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-SDK 的过程中有更好的用户体验，我们建议您在用户加入 TRTC 房间之前，对用户设备及网络状况进行检测并给出建议和引导。

为方便您快速集成设备检测及网络检测功能，我们提供一下几种方式供您参考：

• rtc-detect 的 JS 库
• 设备检测的 React 组件
• TRTC 能力检测页面

rtc-detect 库

您可以使用 rtc-detect 用来检测当前环境对 TRTC SDK 的支持度，以及当前环境的详细信息。

安装

npm install rtc-detect

使用方法

import RTCDetect from 'rtc-detect';
// 初始化监测模块
const detect = new RTCDetect();
// 获得当前环境监测结果
const result = await detect.getReportAsync();
// result 包含了当前环境系统的信息，API 支持度，编解码支持度，设备相关的信息
console.log('result is: ' + result);

API

(async) isTRTCSupported()

判断当前环境是否支持 TRTC。

const detect = new RTCDetect();
const data = await detect.isTRTCSupported();
if (data.result) {
  console.log('current browser supports TRTC.')
} else {
  console.log(`current browser does not support TRTC, reason: ${data.reason}.`)
}

getSystem()

获取当前系统环境参数。

const detect = new RTCDetect();
const result = detect.getSystem();

getAPISupported()

获取当前环境 API 支持度。

const detect = new RTCDetect();
const result = detect.getAPISupported();

(async) getDevicesAsync()

获取当前环境可用的设备。

CameraItem

DeviceItem

const detect = new RTCDetect();
const result = await detect.getDevicesAsync();

(async) getCodecAsync()

获取当前环境参数对编码的支持度。

支持编码即支持发布音视频，支持解码即支持拉取音视频播放

const detect = new RTCDetect();
const result = await detect.getCodecAsync();

(async) getReportAsync()

获取当前环境监测报告。

const detect = new RTCDetect();
const result = await detect.getReportAsync();

(async) isHardWareAccelerationEnabled()

检测 Chrome 浏览器是否开启硬件加速。

注意：

• 该接口的实现依赖于 WebRTC 原生接口，建议在 isTRTCSupported 检测支持后，再调用该接口进行检测。检测最长耗时 30s。经实测：
  1. 开启硬件加速的情况下，该接口在 Windows 耗时 2s 左右， Mac 需耗时 10s 左右。
  2. 关闭硬件加速的情况下，该接口在 Windows 和 Mac 耗时均为 30s。

const detect = new RTCDetect();
const data = await detect.isTRTCSupported();
if (data.result) {
  const result = await detect.isHardWareAccelerationEnabled();
  console.log(`is hardware acceleration enabled: ${result}`);
} else {
  console.log(`current browser does not support TRTC, reason: ${data.reason}.`)
}

设备检测的 React 组件

设备检测 UI 组件特点

1. 处理了设备连接及设备检测逻辑

2. 处理了网络检测的逻辑

3. 网络检测 tab 页可选

4. 支持中、英文两种语言

设备检测 UI 组件相关链接

组件npm包使用说明请参考：rtc-device-detector-react

组件源码调试请参考：github/rtc-device-detector

组件引用示例请参考：WebRTC API Example

设备检测 UI 组件界面

设备及网络检测逻辑

1）设备连接

​ 设备连接的目的是检测用户使用的机器是否有摄像头，麦克风，扬声器设备，是否在联网状态。如果有摄像头，麦克风设备，尝试获取音视频流并引导用户授予摄像头，麦克风的访问权限。

• 判断设备是否有摄像头，麦克风，扬声器设备

  import TRTC from 'trtc-sdk-v5';
  const cameraList = await TRTC.getCameraList();
  const micList = await TRTC.getMicrophoneList();
  const speakerList = await TRTC.getSpeakerList();
  const hasCameraDevice = cameraList.length > 0;
  const hasMicrophoneDevice = micList.length > 0;
  const hasSpeakerDevice = speakerList.length > 0;
  

• 获取摄像头，麦克风的访问权限

  await trtc.startLocalVideo({ publish: false });
  await trtc.startLocalAudio({ publish: false });
  

• 判断设备是否联网

  export function isOnline() {
    const url = 'https://web.sdk.qcloud.com/trtc/webrtc/assets/trtc-logo.png';
    return new Promise((resolve) => {
      try {
        const xhr = new XMLHttpRequest();
        xhr.onload = function () {
          resolve(true);
        };
        xhr.onerror = function () {
          resolve(false);
        };
        xhr.open('GET', url, true);
        xhr.send();
      } catch (err) {
        // console.log(err);
      }
    });
  }
  const isOnline = await isOnline();
  

2） 摄像头检测

​检测原理：打开摄像头，并在页面中渲染摄像头画面。

• 打开摄像头

  trtc.startLocalVideo({ view: 'camera-video', publish: false });
  

• 切换摄像头

  trtc.updateLocalVideo({
    option: { cameraId } 
  });
  

• 设备插拔检测

• 检测完成后关闭摄像头

  trtc.stopLocalVideo();
  

3）麦克风检测

​检测原理：打开麦克风，并获取麦克风音量。

• 打开麦克风

  trtc.startLocalAudio({ publish: false });
  

• 切换麦克风

  trtc.updateLocalAudio({ option: { microphoneId }});
  

• 设备插拔检测

• 检测完成后释放麦克风占用

  trtc.stopLocalAudio();
  

4） 扬声器检测

​ 检测原理：通过 audio 标签播放一个 mp3 媒体文件

• 创建 audio 标签，提醒用户调高播放音量，播放 mp3 确认扬声器设备是否正常。

  <audio id="audio-player" src="xxxxx" controls></audio>
  

• 检测结束后停止播放

  const audioPlayer = document.getElementById('audio-player');
  if (!audioPlayer.paused) {
      audioPlayer.pause();
  }
  audioPlayer.currentTime = 0;
  

5） 网络检测

参考：通话前的网络质量检测

TRTC 能力检测页面

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