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>