Record high-quality voice messages in a web browser

[RC]

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

1. 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 using MediaRecorder. By default, webm format is used. You can check if a browser supports a specific mimeType by calling MediaRecorder.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
   }
   

2. 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 be localhost or https.
• The uploaded audio after recording is in webm format. You can try converting the audio data encoding from webm to aac 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 to RC:HQVCMsg.

Further support

If you have any questions, feel free to submit a ticket.