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

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

JavaScript

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>