Skip to main content

Media Recorder

This element allows users to record voice and send them as audio messages. It has a start button to start recording, a stop button to stop recording, a play button to play the recorded message, a submit button to submit the recorded message and a close button to close the media recorder.

Properties

PropertyTypeDescription
startIconURLstringprovides icon to the start Icon/widget that starts recording the audio
startIconTextstringprovides icon to the start Icon/widget that starts recording the audio
stopIconURLstringprovides icon to the start Icon/widget that stops recording the audio
stopIconTextstringprovides icon to the start Icon/widget that stops recording the audio
closeIconURLstringprovides icon to the start Icon/widget that closes the CometChatMediaRecorder
submitButtonIconURLstringprovides icon to the start Icon/widget that utilizes the path audio recorded through the CometChatMediaRecorder
submitButtonIconTextstringprovides icon to the start Icon/widget that utilizes the path audio recorded through the CometChatMediaRecorder
autoRecordingbooleanWhen set to true, will start the recording on mount. Default value - false
recordingTypestringAllows us to set the recording type to audio or video.
mediaPlayerStyleMediaRecorderStylehelps to customize the appearance of CometChatMediaRecorder

MediaRecorderStyle

NameDescription
widthSets the width of the component
heightSets the height of the component
borderSets the border of the component
borderRadiusSets the border radius of the component
backgroundSets all background style properties at once, such as color, image, origin and size, or repeat method. Reference link
timerTextFontSets all the different properties of font for the timer text. Reference link
timerTextColorSets the foreground color of the timer text.
submitIconTintSets the tint or color applied to the submit icon
startIconTintSets the tint or color applied to the start icon
stopIconTintSets the tint or color applied to the stop icon
closeIconTintSets the tint or color applied to the close icon

Events

Custom events dispatched by the element

NameDescription
cc-media-recorder-submittedEvent emitted when user submits the recording
cc-media-recorder-closedEvent emitted when user closes the recording

Usage

import '@cometchat/uikit-elements';//import the web component package.

const submitRecording = event => {
console.log(event.detail.url); //the detail property has the image url
}

const closeRecording = event => {
console.log(event.detail.url); //the detail property has the image url
}

<cometchat-media-recorder autoRecording]="true"
:startIconText="Start"
:stopIconText="Stop"
submitButtonIconText="submit"
cc-media-recorder-submitted={submitRecording}
cc-media-recorder-closed={closeRecording}></cometchat-media-recorder>