Media Recorder

Media Recorder — CometChat documentation.

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

Property	Type	Description
startIconURL	string	provides icon to the start Icon/widget that starts recording the audio
startIconText	string	provides icon to the start Icon/widget that starts recording the audio
stopIconURL	string	provides icon to the start Icon/widget that stops recording the audio
stopIconText	string	provides icon to the start Icon/widget that stops recording the audio
closeIconURL	string	provides icon to the start Icon/widget that closes the CometChatMediaRecorder
submitButtonIconURL	string	provides icon to the start Icon/widget that utilizes the path audio recorded through the CometChatMediaRecorder
submitButtonIconText	string	provides icon to the start Icon/widget that utilizes the path audio recorded through the CometChatMediaRecorder
autoRecording	boolean	When set to true, will start the recording on mount. Default value - false
recordingType	string	Allows us to set the recording type to audio or video.
mediaPlayerStyle	MediaRecorderStyle	helps to customize the appearance of CometChatMediaRecorder

MediaRecorderStyle

Name	Description
width	Sets the width of the component
height	Sets the height of the component
border	Sets the border of the component
borderRadius	Sets the border radius of the component
background	Sets all background style properties at once, such as color, image, origin and size, or repeat method. Reference link
timerTextFont	Sets all the different properties of font for the timer text. Reference link
timerTextColor	Sets the foreground color of the timer text.
submitIconTint	Sets the tint or color applied to the submit icon
startIconTint	Sets the tint or color applied to the start icon
stopIconTint	Sets the tint or color applied to the stop icon
closeIconTint	Sets the tint or color applied to the close icon

Events

Custom events dispatched by the element

Name	Description
cc-media-recorder-submitted	Event emitted when user submits the recording
cc-media-recorder-closed	Event emitted when user closes the recording

Usage

HTML

<cometchat-media-recorder
[autoRecording]="true"  
[startIconText]="'Start'" 
[stopIconText]="'Stop'" 
[submitButtonIconText]="'submit'" 
(cc-media-recorder-submitted)="submitRecording($event)"
(cc-media-recorder-closed)="closeRecording($event)"
></cometchat-media-recorder>

JavaScript

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

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