检测能力
为保证用户使用 TRTC SDK 有良好的体验,我们建议您在用户进入TRTC房间时测试用户的媒体设备和网络质量。
支持的平台
检测浏览器功能
进入房间前,建议您先使用 TRTC.isSupported API 检查 SDK 是否支持当前浏览器,如果不支持,请引导用户使用支持的浏览器(Chrome 56+、Edge 80+、Firefox 56+、 Safari 11+)。
TRTC.isSupported().then(checkResult => {// Not supported, guide the user to use a supported browser(Chrome 56+, Edge 80+, Firefox 56+, Safari 11+).if (!checkResult.result) {}// Not support to publish videoif (!checkResult.detail.isH264EncodeSupported) {}// Not support to subscribe videoif (!checkResult.detail.isH264DecodeSupported) {}});
如果 TRTC.isSupported 返回的检查结果为 false,原因可能是:
1. 网页使用 http 协议。浏览器不允许 http 协议站点捕获摄像头和麦克风,您需要使用 https 协议部署您的页面。
2. 火狐浏览器安装后需要动态加载H264编解码器,因此短时间内检测结果会出现错误,请稍候重试或指导使用其他浏览器。
使用设备检测插件
检测用户的媒体设备 (摄像头、麦克风、扬声器)以及网络,建议在用户进房之前使用,支持移动端适配。
注意:
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 | 必填 | |
downlinkUserId | string | 选填 | 下行用户 ID, 自行决定,与 userId 不一致,与用于生成 userSig 的 userId 一致, 填写 downlinkUserId 和 downlinkUserSig将进行下行网络测试 |
downlinkUserSig | string | 选填 | |
roomId | number | 选填 | 选填,默认为8080,数字类型的房间号,取值要求为 [1, 4294967294] 的整数 |
startPlugin 返回结果
说明:
若用户在检测界面点击跳过检测,返回
undefiend。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
手动设备检测
测试摄像头
1. 获取摄像头列表
一般需要先查看摄像头列表,确认用户是否有摄像头。然后,您可以显示摄像机列表以让用户选择他们想要的摄像机。
const cameraList = await TRTC.getCameraList();const hasCameraDevice = cameraList.length > 0;if (!hasCameraDevice) {// User has not any camera.}
2. 采集和播放摄像头
此步骤需要采集并播放摄像头,不需要推流。
如果采集摄像头成功,则需要引导用户确认用户是否可以看到摄像头画面。
如果采集失败,通常是由于 NotAllowedError 或 NotReadableError 引起的,参见 DEVICE_ERROR。
try {// Capture and play camera, not need to publish streamawait trtc.startLocalVideo({ view: 'camera-video-view-id', publish: false });} catch(error) {// Common reasons: NotAllowedError or NotReadableError}
3. 切换摄像头
如果调用 trtc.startLocalVideo 时没有指定 cameraId,SDK 将默认采集摄像头列表中的第一个。如果用户有多个摄像头,则用户可能想要在进入房间之前切换另一个摄像头。
// You can get the cameraId from the camera list you got in fisrt step.if (cameraList[1]) {try {await trtc.updateLocalVideo({ option: { cameraId: cameraList[1].deviceId } });} catch(error) {// Common reasons: NotAllowedError or NotReadableError, same with step 2.}}
4. 关闭摄像头
测试完成后,您需要关闭摄像头。
await trtc.stopLocalVideo();
测试麦克风
1. 获取麦克风列表
一般情况下,需要先查看麦克风列表,确认用户是否有麦克风。然后,您可以显示麦克风列表以让用户选择他们想要的麦克风。
const microphoneList = await TRTC.getMicrophoneList();const hasMicrophoneDevice = micList.length > 0;if (!hasMicrophoneDevice) {// User has not any microphone.}
2. 采集麦克风并获取音量
这一步需要采集麦克风,获取麦克风的音量以显示音量条,不需要推流。
如果采集成功,需要引导用户确认音量条是否发生变化。
如果采集失败,通常是由于NotAllowedError或NotReadableError引起的,参见 DEVICE_ERROR.
try {// Capture microphoneawait trtc.startLocalAudio({ publish: false });trtc.on(TRTC.EVENT.AUDIO_VOLUME, event => {event.result.forEach(({ userId, volume }) => {// When userId is an empty string, it represents the volume of the local microphone.const isMe = userId === '';if (isMe) {// show a volume bar based on the value of volume.}})});trtc.enableAudioVolumeEvaluation(500);} catch(error) {// Common reasons: NotAllowedError or NotReadableError}
3. 切换麦克风
如果调用 trtc.startLocalAudio 时没有指定 microphoneId,SDK将默认采集麦克风列表中的第一个麦克风。如果用户有很多麦克风,则用户可能想要在进入房间之前切换到另一个麦克风。
// You can get the microphoneId from the microphone list you got in fisrt step.if (microphoneList[1]) {try {await trtc.updateLocalAudio({ option: { microphoneId: microphoneList[1].deviceId } });} catch(error) {// Common reasons: NotAllowedError or NotReadableError, same with step 2.}}
4. 关闭麦克风
// You need to stop microphone when the testing finished.await trtc.stopLocalAudio();// disable audio-volume eventtrtc.enableAudioVolumeEvaluation(-1);
测试扬声器
1. 获取扬声器列表
const speakerList = await TRTC.getSpeakerList();if (speakerList.length === 0) {// User has not speaker.}
2. 通过音频元素播放 mp3 媒体文件。
您需要引导用户播放mp3文件并确认他们是否可以听到扬声器发出声音。
<audio id="audio-player" src="xxxxx" controls></audio>
3. 切换扬声器
您无法使TRTC.setCurrentSpeaker 来切换扬声器,因为您是通过音频元素播放mp3,而不是 TRTC SDK。有一个 HTMLMediaElement.sinkId 属性可用于设置 audio element 的扬声器。
const audioElement = document.getElementById('audio-player');if (speakerList[1]) {audioElement.sinkId = speakerList[1].deviceId;}