Vol. 16
在网络会议、重要直播等对音视频通话质量等要求较高的场景下,需要在通话前进行调试,例如可以进行设备检测以提前做好设备管理,或者探测网络质量以提前识别网络问题。NERTC SDK 提供通话前设备检测和网络探测的相关接口与回调方法,帮助您保证高质量的音视频通话体验。
视频讲解
10 分钟视频详解,手把手教你接入
具体步骤
通过创建 UpClient 实例和对应的本地音视频流,以检测麦克风、摄像头、扬声器等设备的表现是否正常;通过创建 UpClient 和 DownClient 两个实例,分别模拟上/下行用户进入虚拟房间进行推拉流,以检测上行和下行网络质量,并最终判断当前网络环境的平均质量,整个过程大概花 30s 左右。
API 调用时序
(点击放大)
一、设备检测
在您的浏览器页面进行相关检测前,请先在该页面引入 NERTC Web SDK,具体请参考集成 SDK。(https://doc.yunxin.163.com/nertc/docs/DM3MDA4NzQ?platform=web)
实现方法
1、调用 createStream 方法创建 client 实例。示例代码如下:
let upClient=null;
let downClient=null;
let localStream=null;
let remoteStream=null;
let audioDevices=null;
let videoDevices=null;
let audioOutDevices=null;
let intervalA=null;
let intervalB=null;
upClient = NERTC.createClient({
appkey: '', //您的 appkey
debug: true, //是否开启调试日志
});
2、调用 getDevices 方法获取本地麦克风、摄像头和扬声器设备列表。示例代码如下:
function deviceInit(){
//确认浏览器是否符合要求
if (!NERTC.checkSystemRequirements()) {
alert("browser is no support webRTC");
}
NERTC.getDevices().then(function(devices){
audioDevices = devices.audioIn; //数组,麦克风设备列表,包含deviceId和label信息,网页上展示设备label信息供用户选择,实际测试时传入deviceId来打开设备确认设备是否可用
videoDevices = devices.video; //摄像头设备列表
audioOutDevices = devices.audioOut; //扬声器列表
console.log(audioDevices[0].deviceId, audioDevices[0].label);//测试打印出设备id等信息
console.log(videoDevices[0].deviceId, videoDevices[0].label);
}).catch(function(err){
console.warn(err);
})
}
( 因浏览器的安全隐私政策,若您使用的是 Chrome(81+)、Safari 或 Firefox 浏览器,则需要在获取媒体设备权限后才能获取设备 ID。简单通俗的理解:Chrome/Firefox等浏览器只要在当前页面执行过打开设备(对应stream.init()的能力)即可枚举出真正的设备Id和设备名;如果之前没有打开过设备,那枚举到的deviceId会为"",设备名可能是""或者microphone 1、camera 1这种代称;所以建议在第一次打开对应的网页枚举设备时,拿到的deviceId是什么就传入什么,就算是空字符串也没关系,浏览器会去选择第一个默认设备去打开的;Safari浏览器只有在当前页面执行一次getUserMedia(也就是Stream.init)之后才能够枚举到真正的设备Id和设备名;
设备 ID 为随机生成,部分情况下同一个设备的 ID 可能会改变,因此建议您在每次测试设备时均先调用 getDevices 方法获取最新的设备 ID。)
3、打开对应的设备以确认设备是否可以正常使用
创建音频流,获取音频流音量,以检测麦克风表现是否正常。
打开摄像头,以检测摄像头表现是否正常。
选择扬声器设备播放音乐,以检测扬声器表现是否正常。
切换麦克风和摄像头测试。
function streamCreate(){
//监听设备相关异常
upClient.on("accessDenied",function(evt){
console.log("accessDenied"+JSON.stringify(evt));
})
upClient.on("notFound",function(evt){
console.log("notFound"+JSON.stringify(evt));
})
upClient.on("deviceError",function(evt){
console.log("deviceError"+JSON.stringify(evt));
})
upClient.on("beOccupied",function(evt){
console.log("beOccupied"+JSON.stringify(evt));
})
//1.创建音频流
localStream = NERTC.createStream({
uid: 112211,//传入随机字符串即可,和join时的uid对应
audio: true,
microphoneId: audioDevices[0].deviceId, //指定要开启的mic,填入获取到的deviceId
video: false,
});
//init失败时,会通过upClient上的accessDenied、notFound、deviceError、beOccupied这几个监听事件通知
localStream.init().then(function(){
intervalA=setInterval(function(){
console.log("获取mic采集的音量:"+localStream.getAudioLevel());//音量范围是0~1,大于0.1就表示音量比较正常
//在UI层动态展示获取到的音量,让终端用户确认音量条是否变化
//如果出现因设备本身问题导致音量一直为0或者无法打开设备的情况,可以使用WebRTC官方的demo验证这个结论的准确性 https://webrtc.github.io/samples/src/content/devices/input-output/
//用于播放音视频的div元素
}, 2000);
//2.打开摄像头
let createDivL=document.createElement("div");
createDivL.id="NE_local";
createDivL.style.width='640px';
createDivL.style.height='480px';
document.body.appendChild(createDivL)
let divL = document.getElementById('NE_local')
localStream.open({type: "video",deviceId: videoDevices[0].deviceId,type:'video'}).then(function(){
console.log("摄像头打开成功");//打开成功后才能去做切换、关闭摄像头的操作
localStream.play(divL, { audio:false,video: true}).then((evt)=>{
console.log("播放成功");//把视频画面渲染到页面上,让用户确认视频画面内容是否正常
}).catch((evt)=>{
console.log(evt);
});
localStream.setLocalRenderMode({
width: 640,
height: 480,
cut: false
})
});
//3.选择扬声器设备播放音乐;步骤:1)调用setSinkId选择扬声器设备;2)创建一个audio标签播放音乐
document.getElementById("audio").setSinkId(audioOutDevices[0].deviceId).then(function() { ... })
}).catch(function(evt){
console.log(evt);
});
}
//4.切换麦克风和摄像头测试
function switchDevice(){
//UI上展示设备名称,用户选择设备名称之后拿到对应的设备deviceId来进行切换操作
//switchDevice的优势是比close+open更方便,快速切换摄像头或者麦克风;劣势是调用之前需要确保麦克风或者摄像头已经打开;并且部分移动端由于无法同时开启两个摄像头,调用switchDevice会失败,这种情况建议使用close+open的组合
localStream.switchDevice("video", videoDevices[1].deviceId).then(function(){
console.log('设备切换成功');
}).catch(function(err){
console.log(err)
await localStream.close({ type: "video"});//关闭摄像头,如果需要切换分辨率,关闭之后再次设置setVideoProfile
await localStream.open({ type: "video",deviceId:videoDevices[1].deviceId});//开启摄像头,open里面也可以设置facingMode
})
}
二、网络探测
实现方法
具体网络质量数值说明请参考 network-quality。
(https://doc.yunxin.163.com/docs/interface/NERTC_SDK/Latest/Web/api/enums/types.networkstatus.html)
1、upClient 加入房间并推流。
function upClientPub(){
//监听用户实际网络质量
upClient.on("network-quality",function(evt){
console.log("network-quality"+JSON.stringify(evt));//检测用户上行的网络质量
})
upClient.join({
channelName: "TEST",//RTC房间名
uid: 112211,
token: "" //调试模式下传空即可
}).then(function () {
console.log('upClient加入房间成功...');//此时表示用户TCP网络正常长链接建立成功
upClient.publish(localStream).then(function() {
console.log('本地 publish 成功');
intervalB=setInterval(function(){
upClient.getTransportStats().then(function(stat){
console.log(stat); //获取本地网络上行预估带宽、RTT,根据这个结果判断用户UDP网络状态
})
}, 2000);
}).catch(function(err){
console.warn(err)
});
}).catch(function (err) {
console.log(err);
});
}
2、downClient 加入房间并拉流。
function downClientSub(){
downClient= NERTC.createClient({
appkey: '', //您的 App key
debug: true, //是否开启调试日志
});
downClient.on("network-quality",function(evt){
console.log("network-quality"+JSON.stringify(evt));//检测用户下行的网络质量
})
downClient.join({
channelName: "TEST",//RTC房间名,加入同一个房间拉流
uid:112233, //随机用户Id
token: "" //调试模式下传空即可
}).then(function () {
console.log('接收方加入房间成功...');
}).catch(function (err) {
console.log(err);
});
//回调事件-远端用户已发流
downClient.on('stream-added', function (evt) {
console.log("远端有流来: " + evt.mediaType);
remoteStream =evt.stream;
remoteStream.setSubscribeConfig({
audio: true,
video: true
});
downClient.subscribe(remoteStream, function(){
console.log("Subscribe stream success");
},function (err) {
console.log("Subscribe stream failed", err);
});
});
//回调事件-远端音视频流已订阅
downClient.on('stream-subscribed', function (evt) {
console.log('订阅远端流成功');
//渲染订阅到的视频流(可选)
let createDivR=document.createElement("div");
createDivR.id="NE_remote";
createDivR.style.width='640px';
createDivR.style.height='480px';
document.body.appendChild(createDivR)
let divRemote = document.getElementById('NE_remote');
evt.stream.play(divRemote,{audio:true,video:true}).then(() => {
console.log('播放对端视频流成功');
})
evt.stream.setRemoteRenderMode({
width: 640,
height: 480,
cut: false //是否裁剪
},'video');
})
}
(您可以选择不渲染订阅的视频流,只通过 network-quality 判断下行网络的等级;但建议您将订阅的视频流渲染至画布上,以模拟较为真实的音视频通话过程,从而对当前网络状况得出更真实的判断,同时您可以调用 getRemoteAudioStats 和 getRemoteVideoStats 方法以获取更全面的统计数据。
建议将推拉流过程的时长设置为 20s 左右,以取平均网络质量数据,从而大致判断出上下行网络情况。)
3、检测 20s 左右之后完成检测,并及时销毁实例。
function destroy(){
clearInterval(intervalA);
clearInterval(intervalB);
upClient.leave().then(function() {
console.log('upClient leave成功');
}).catch(function(err){
console.log(err);
});
downClient.leave().then(function() {
console.log('downClient leave成功');
}).catch(function(err){
console.log(err);
});
}
network-quality 详细值说明
在注册 on("network-quality") 网络质量监听回调后,您可以通过回调中的数值判断当前的网络状况。具体说明如下表。
数值 | 网络质量水平 | 说明 |
0 | UNKNOWN | 网络状况未知,表示当前 client 实例还没有成功建立上行/下行连接 |
1 | EXCELLENT | 网络状况极佳 |
2 | GOOD | 网络状况较 |
3 | POOR | 网络状况一般 |
4 | BAD | 网络状况差 |
5 | VERYBAD | 网络状况极差 |
6 | DOWN | 网络连接已断开 |
建议当 network-quality 的数值大于 3 时,您可以检查网络并尝试更换网络环境,以保证正常的音视频通话。您也可以通过降低分辨率/帧率来降低带宽消耗,减少数据传输压力。
视频中演示的完整 DEMO github 地址:https://github.com/dongsettle/troubleTool_yunxin
以上就是我们本期《云信小课堂》的内容,我们下期见!
「云信小课堂」推荐阅读
👇快速接入指南👇
(点击即可快速跳转)