Skip to main content
Version: v4

Media Recorder

The CometChatMediaRecorder is a custom Android component that provides a user interface for recording audio and playing back the recorded audio. It is designed to be easily integrated into chat applications or other projects where audio messaging is required.

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>