Feedback

检测能力

为保证用户使用 TRTC SDK 有良好的体验,我们建议您在用户进入TRTC房间时测试用户的媒体设备和网络质量。

支持的平台

请参阅 Supported Platforms

检测浏览器功能

进入房间前,建议您先使用 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 video
if (!checkResult.detail.isH264EncodeSupported) {}
// Not support to subscribe video
if (!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
必填
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: { 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 stream
await 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 microphone
await 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 event
trtc.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;
}

检测网络质量

在线TRTC能力检测

您可以在当前使用 TRTC SDK 的地方使用 在线 TRTC 能力检测 来检测当前环境。您还可以单击生成报告,获取当前环境的报告,用于环境检测或故障排除。