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
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>