Web 浏览器中录制高清语音消息的一种方案

[zhuxingyao1]

描述

在高清语音消息（RC:HQVCMsg）中需要使用 AAC 格式音频文件地址，本文描述了从 Web 端录制、播放音频文件的一种方案。

融云 Android/iOS 端的 IMKit SDK 对音频的录制、播放只实现了对 AAC 格式的支持，默认无法播放其他格式，因此建议 Web 端发送语音消息时提供 AAC 格式的音频 URL。如果您的 Android/iOS App 会自行处理音频录制、播放，也可以按需选用其他格式。

解决方案

Web 端能否实现语音录制

可以，不过只有部分浏览器支持，而且对录制的音频格式有限制。只有当前站点为 localhost 或 https 时才可使用。录制原理：

• 使用 getUserMedia 获取音频流。
• 使用 MediaRecorder 录音获取音频数据。注意：该 API 无法直接返回 AAC 格式音频文件。

实现方案

1. 获取 File 对象。

   // 通过 getUserMedia 获取音频流
   navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
       const mediaRecorder = new MediaRecorder(stream);
       const chunks = [];
       // 收集音频数据
       mediaRecorder.ondataavailable = function (e) {
           chunks.push(e.data);
       };
       // 监听音频录制停止
       mediaRecorder.onstop = e => {
           const blob = new Blob(chunks);
           blob.lastModifiedDate = new Date();
           const file = new File([blob], 'audio_file.aac', { type: "audio/aac" }); // 获取到 File 对象, 可将此对象上传至服务器, 获取音频 url
       };
       mediaRecorder.start(); // 开始录音. 此处自动开始, 读者可按产品逻辑点击某个按钮触发录音
       setTimeout(function () { // 5s 倒计时自动停止录音. 读者可按产品逻辑设置停止时机
           mediaRecorder.stop();
       }, 5000)
   });
   

   浏览器不支持使用 MediaRecorder 直接录制 MIMEType 为 audio/aac 格式的音频。默认使用 webm 格式。您可以使用通过调用 MediaRecorder.isTypeSupported() 来检查浏览器是否支持某种 mimeType。可以使用以下代码检测支持状况:

   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 :("));
       // 重点 API: MediaRecorder.isTypeSupported
   }
   

2. 获取到 File 对象后：

   • 使用 Web IMLib SDK 封装的语法糖方法 sendHQVoiceMessage 直接发送（请注意录音数据编码必须已转为 aac 格式）。参见 发送高清语音消息。
   • 您也可以将 file 上传至服务器, 获取音频的远端 URL，写入高清语音消息体，然后使用 sendMessage 发送。参见 sendMessage接口说明。

注意事项

• 使用 getUserMedia 、MediaRecorder 要注意兼容问题 ，以及 getUserMedia 的要求访问站点必须为 localhost 或 https。
• 录制上传后的音频为 webm 格式。您可以尝试在录音时将录音数据编码由 webm 转化为 aac 格式，也可以将数据传给服务端, 由服务端完成格式转换。
• Web 端使用 audio 标签直接播放即可。
• 移动端旧版 SDK 可能会发送普通语音消息（RC:VcMsg），而不是高清语音消息（RC:HQVCMsg）。如遇到该情况，请将默认发送的语音消息类型改为 RC:HQVCMsg。

更多支持

如有疑问，欢迎提交工单-