关于前端:融云-Web-SDK-如何实现语音的收发

融云 Web SDK 如何实现语音的收发 ?

依据融云的开发文档, 总结得出, 融云 WebSDK 须要的是一个 aac 格局的音频 url, 不关注 url 如何生成. 生成 url 的步骤由开发者实现

文档: https://docs.rongcloud.cn/v4/views/im/noui/guide/private/msgmanage/msgsend/web.html#HQVCMsg

所以关注点放在以下几个问题:

1、Web 端是否实现语音录制

2、联合融云 SDK 实现语音的发送

3、联合融云 SDK 实现语音的接管和播放

Web 端是否实现语音录制

答案是能够. 不过只有局部浏览器反对, 录制的音频格式有很多限度, 且只有以后站点为 localhost 或 https 时才可应用

录制原理: getUserMedia、MediaRecorder

应用 getUserMedia 获取音频流, 应用 MediaRecorder 录音获取音频数据

以下为录制 5s, 获取 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)
});

获取到 file 对象后, 可将 file 上传至服务器, 获取音频的远端 url

通过测试, 发现录制的音频只能在集成了融云的 Android 端播放, iOS 端无奈播放

通过收集材料, 发现 MediaRecorder 录音的编码是有限度的, 默认是 webm 格局, 而融云反对播放的是 aac 格局

JS 官网文档也没有给出 MediaRecorder 具体反对的格局, 因为各个浏览器实现的编码都不同, 且就算编码格局反对, 也有可能因为计算资源有余而导致编码失败

官网提供以下代码检测反对情况:

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
}

通过一系列调研, 总结以下几点:

1、须要留神浏览器兼容问题 getUserMedia、MediaRecorder

2、录制上传后的音频为 webm 格局. 融云 iOS 暂不反对播放. 读者能够尝试在录音时将录音数据编码由 webm 转化为 aac 格局. 也能够将数据传给服务端, 由服务端转换格局

3、要留神 getUserMedia 的平安限度. 要求拜访站点必须为 localhost 或 https

联合融云 SDK 实现语音的发送

依据文章前的形容. 获取到远端音频 url 后, 调用融云的发送音讯办法就能够了

留神: 记得先 初始化、连贯 融云 SDK

var conversation = im.Conversation.get({
  targetId: '接管方的 userId',
  type: RongIMLib.CONVERSATION_TYPE.PRIVATE
});
conversation.send({
  messageType: RongIMLib.MESSAGE_TYPE.HQ_VOICE, // 'RC:HQVCMsg'
  content: {
    remoteUrl: 'https://rongcloud-audio.cn.ronghub.com/audio_amr__RC-2020-03-17_42_1584413950049.aac?e=1599965952&token=CddrKW5AbOMQaDRwc3ReDNvo3-sL_SO1fSUBKV3H:CDngyWj7ZApNmAfoecng7L_3SaU=', // 音频 url, 倡议格局: aac
    duration: 6, // 音频时长
    type: 'aac'
  }
}).then(function(message){console.log('发送语音音讯胜利', message);
});

联合融云 SDK 实现语音的接管和播放

发送: 按照融云文档设置音讯监听即可

var im = RongIMLib.init({appkey: ''}); // 倡议全局只初始化一次
var conversationList = []; // 以后已存在的会话列表
im.watch({message: function(event){
    var message = event.message;
    console.log('有人给我发音讯啦:', message);
  }
});

播放: 融云发送的音频默认格局为 aac 格局. Web 端应用 audio 标签间接播放即可

播放时遇到的坑:

Web 收到的音讯不是 aac 格局, 而是 amr 格局:

测试时发现 Android 发送的语音音讯是 RC:VcMsg, 而不是 RC:HQVCMsg

查看文档, 发现 RC:VcMsg 是融云旧语音音讯, RC:HQVCMsg 是新语音音讯. 然而融云挪动端 IMKit 默认发送还是旧语音音讯

依据文档提供的切换接口, 将 Android 发送语音改为 RC:HQVCMsg, 此问题胜利解决了

切换文档: https://docs.rongcloud.cn/v4/views/im/noui/guide/private/msgmanage/msgsend/android.html#voice