Description
High-quality voice messages (RC:HQVCMsg
) require an AAC format audio file URL. This document outlines a solution for recording and playing audio files on the web client.
RC’s IMKit SDK for Android/iOS only supports recording and playback of AAC format audio by default. Other formats can’t be played natively. So, it’s recommended to provide an AAC format audio URL when sending voice messages from the web client. If your Android/iOS app handles audio recording and playback independently, you can choose other formats as needed.
Solution
Can voice recording be implemented on the web client?
Yes, but only some browsers support it, and there are restrictions on the audio format. It’s only available when the current site is localhost
or https
. The recording process works as follows:
- Use getUserMedia to get the audio stream.
- Use MediaRecorder to record and obtain audio data. Note that this API can’t directly return audio files in AAC format.
Implementation
-
Get the File object.
// Get the audio stream via getUserMedia navigator.mediaDevices.getUserMedia(constraints).then((stream) => { const mediaRecorder = new MediaRecorder(stream); const chunks = []; // Collect audio data mediaRecorder.ondataavailable = function (e) { chunks.push(e.data); }; // Listen for recording stop mediaRecorder.onstop = e => { const blob = new Blob(chunks); blob.lastModifiedDate = new Date(); const file = new File([blob], 'audio_file.aac', { type: "audio/aac" }); // Get the File object, which can be uploaded to the server to obtain the audio URL }; mediaRecorder.start(); // Start recording. This starts automatically; you can trigger it via a button click based on your product logic setTimeout(function () { // Automatically stop recording after 5s. You can set the stop timing based on your product logic mediaRecorder.stop(); }, 5000) });
Browsers don’t support recording audio directly in
audio/aac
format usingMediaRecorder
. By default,webm
format is used. You can check if a browser supports a specificmimeType
by callingMediaRecorder.isTypeSupported()
. Use the following code to test support:var types = ["video/webm", "audio/webm", "video/webm;codecs=vp8", "video/webm;codecs=daala", "video/webm;codecs=h264", "audio/webm;codecs=opus", "video/mpeg"]; for (var i in types) { console.log("Is " + types[i] + " supported? " + (MediaRecorder.isTypeSupported(types[i]) ? "Maybe!" : "Nope :(")); // Key API: MediaRecorder.isTypeSupported }
-
After obtaining the File object:
- Use the syntactic sugar method sendHQVoiceMessage provided by the Web IMLib SDK to send it directly (ensure the audio data encoding is converted to AAC format). Refer to Sending high-quality voice messages.
- Alternatively, upload the file to the server to get the remote audio URL, write it into the high-quality voice message body, and send it using sendMessage. Refer to sendMessage interface documentation.
Notes
- Be aware of compatibility issues when using getUserMedia and MediaRecorder. Also,
getUserMedia
requires the site to belocalhost
orhttps
. - The uploaded audio after recording is in
webm
format. You can try converting the audio data encoding fromwebm
toaac
during recording or pass the data to the server side for format conversion. - On the web client, simply use the
audio
tag for playback. - Older SDKs on the mobile client might send regular voice messages (
RC:VcMsg
) instead of high-quality voice messages (RC:HQVCMsg
). If this happens, change the default voice message type toRC:HQVCMsg
.
Further support
If you have any questions, feel free to submit a ticket.