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.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 检测页面 ，可用于探测当前环境，还可以点击生成报告按钮，得到当前环境的报告，用于环境检测，或者问题排查。