Tutorial: 通话前环境与设备检测

通话前环境与设备检测

浏览器环境检测

在开始音视频通话之前,建议您先使用 TRTC.isSupported 接口检测 SDK 是否支持当前网页。如果 SDK 不支持当前浏览器,建议用户使用最新版的 Chrome 浏览器、Edge 浏览器、Safari 浏览器、Firefox 浏览器。

TRTC.isSupported().then(checkResult => {
  // 不支持使用 SDK,引导用户使用最新版的 Chrome 浏览器。
  if (!checkResult.result) {}
  // 不支持发布视频
  if (!checkResult.detail.isH264EncodeSupported) {}
  // 不支持拉视频
  if (!checkResult.detail.isH264DecodeSupported) {}
})

⚠️ TRTC.isSupported 返回的检测结果为 false 时,可能是以下原因:

  1. 网页使用了 http 协议。浏览器不允许 http 协议的网站采集摄像头和麦克风,您需要使用 https 协议部署您的网页。
  2. 当前浏览器不支持 WebRTC 相关能力,您需要引导用户使用推荐的浏览器 浏览器与应用环境信息
  3. Firefox 浏览器安装完成后需要动态加载 H264 编解码器,因此会出现短暂的检测结果为 false 的情况,请稍等再试或引导使用其他浏览器。

使用设备检测插件

检测用户的媒体设备 ( 摄像头、麦克风、扬声器)以及网络,建议在用户进房之前使用,支持移动端适配。

⚠️ TRTC Web SDK 版本 >= 5.8.0。

实现流程

import { DeviceDetector } from 'trtc-sdk-v5/plugins/device-detector';
const trtc = TRTC.create({ plugins: [DeviceDetector] });
// 1. Test Media Device Only
const result = await trtc.startPlugin('DeviceDetector');
// 2. Test Media Device & Network Quality
const options = { 
    networkDetect: { sdkAppId, userId, userSig }
}
const resultWithNetwork = await trtc.startPlugin('DeviceDetector', options);

API

trtc.startPlugin('DeviceDetector', options)

第一个参数为'DeviceDetector'字符串,用于开启设备检测插件。

options.cameraDetect(optional)
Name Type Attributes Description
mirror boolean 选填 选填。为true时,在摄像头检测环节会开启画面镜像,并显示镜像画面的复选框
options.networkDetect(optional)
Name Type Attributes Description
sdkAppId string 必填 从控制台获得,你的sdkAppId
userId string 必填 上行用户ID, 自行决定,与downlinkUserId不一致,与用于生成userSig的userId一致
userSig string 必填 userSig 签名,由sdkAppId,userId,sdkSecretKey作为参数生成,生产环境由向服务器请求生成,参考:UserSig
downlinkUserId string 选填 下行用户ID, 自行决定,与userId不一致,与用于生成downlinkUserSig的userId一致。填写 downlinkUserId 和 downlinkUserSig将进行下行网络测试
downlinkUserSig string 选填 userSig 签名,由sdkAppId,downlinkUserId,sdkSecretKey作为参数生成,生产环境由向服务器请求生成,参考:UserSig
roomId number 选填 选填,默认为8080,数字类型的房间号,取值要求为 [1, 4294967294] 的整数

startPlugin返回结果

Name Type Description
camera object { isSuccess: boolean, device: { deviceId: string, groupId: string, kind: "videoinput", label: string }}
microphone object { isSuccess: boolean, device: { deviceId: string, groupId: string, kind: "audioinput", label: string }}
speaker object { isSuccess: boolean, device: { deviceId: string, groupId: string, kind: "audiooutput", label: string }}
network object 网络检测结果(startPlugin传入networkDetect才检测返回)
{ isSuccess: boolean, result: { quality: number , rtt: number}}
quality为网络质量,默认为上行网络质量,传入下行userId和userSig时为上下行网络质量中较差值
网络质量
0:网络状况未知,表示当前 TRTC 实例还没有建立上行/下行连接
1:网络状况极佳
2:网络状况较好
3:网络状况一般
4:网络状况差
5:网络状况极差
6:网络连接已断开 注意:若下行网络质量为此值,则表示所有下行连接都断开了

插件 Demo

TRTC 能力检测页面

您可以在当前使用 TRTC SDK 的地方,使用 TRTC 检测页面 ,可用于探测当前环境,还可以点击生成报告按钮,得到当前环境的报告,用于环境检测,或者问题排查。