Web

最近更新时间:2024-09-02 17:35:11

我的收藏
本教程基于 5.0 TRTC Web SDK 实现,若您使用 4.x.x 版本 SDK,可参考 此教程

浏览器环境检测

在开始音视频通话之前,建议您先使用 TRTC.isSupported() 接口检测 SDK 是否支持当前网页。如果 SDK 不支持当前浏览器,建议用户使用最新版的 Chrome 浏览器、Edge 浏览器、Safari 浏览器、Firefox 浏览器。
TRTC.isSupported().then(checkResult => {
// 不支持使用 SDK,引导用户使用最新版的 Chrome 浏览器。
if (!checkResult.result) {}
// 不支持发布视频
if (!checkResult.result.isH264EncodeSupported) {}
// 不支持拉视频
if (!checkResult.result.isH264DecodeSupported) {}
})
⚠️ 当用户使用 SDK 支持的浏览器,且收到 TRTC.isSupported 返回的检测结果为 false 时,可能是以下原因:
情况一:请检查链接是否满足以下三种情况之一
localhost 域( Firefox 浏览器支持 localhost 及本地 ip 访问 )
开启了 HTTPS 的域
使用 file:// 协议打开的本地文件
情况二:Firefox 浏览器安装完成后需要动态加载 H264 编解码器,因此会出现短暂的检测结果为 false 的情况,请稍等再试或引导使用其他浏览器。

使用设备检测插件

检测用户的媒体设备 (摄像头、麦克风、扬声器)以及网络,建议在用户进房之前使用,支持移动端适配。
注意:
TRTC Web SDK 版本 ≥ 5.8.0。
此设备检测插件的 z-index 设定为9999 ,开发者需确保自身层级 z-index 低于9999 。

实现流程

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
number
必填
从控制台获得,您的 sdkAppId
userId
string
必填
上行用户 ID,自行决定,与 downlinkUserId 不一致,与用于生成 userSig 的userId一致
userSig
string
必填
userSig 签名,由 sdkAppId,userId,sdkSecretKey 作为参数生成,生产环境由向服务器请求生成,参见 UserSig
downlinkUserId
string
选填
下行用户 ID, 自行决定,与 userId 不一致,与用于生成 userSig 的 userId 一致, 填写 downlinkUserId 和 downlinkUserSig 将进行下行网络测试
downlinkUserSig
string
选填
userSig 签名,由 sdkAppId,downlinkUserId,sdkSecretKey 作为参数生成,生产环境由向服务器请求生成,参见 UserSig
roomId
number
选填
选填,默认为8080,数字类型的房间号,取值要求为 [1, 4294967294] 的整数

startPlugin 返回结果

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

插件 Demo

插件接入方式和效果体验,可前往 插件 Demo 页面。

TRTC 能力检测页面

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