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>