Tutorial: Check Environment and Device Before Calls

Browser Environment Check

Before calling the communication capabilities of the SDK, we recommend you use the TRTC.isSupported API to check whether the SDK supports the current browser first, and if not, please recommend the user to use a supported browser(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) {}
})

⚠️ If the check result returned by TRTC.isSupported is false, this may be because:

1. The web page uses the http protocol. Browsers do not allow http protocol sites to capture cameras and microphones, you need to deploy your page using the https protocol.
2. The current browser does not support WebRTC, you need to guide the user to use the recommended browser Browsers Supported.
3. Firefox browser needs to load H264 codec dynamically after installation, so the detection result will be false for a short period of time, please wait and try again or guide to use other browsers.

Audio/Video Device Test

To ensure that users can have a good user experience with the TRTC SDK, we recommend you check the user's device and network conditions and provide troubleshooting suggestions before the user enters a TRTC room.

You can quickly integrate the device and network check features by referring to the following methods:

• rtc-detect Library
• React Component for Device Check
• TRTC Capability Check Page

rtc-detect Library

You can use rtc-detect to check the support of the current environment for the TRTC SDK and view the details of the current environment.

Installation

npm install rtc-detect

How to use

import RTCDetect from 'rtc-detect';
// Initialize the detection module
const detect = new RTCDetect();
// Get the detection result of the current environment
const result = await detect.getReportAsync();
// `result` contains the current environment system information, API support, codec support, and device information
console.log('result is: ' + result);

API

(async) isTRTCSupported()

This API is used to check whether the current environment supports 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()

This API is used to get the current system environment parameters.

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

getAPISupported()

This API is used to get the API support of the current environment.

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

(async) getDevicesAsync()

This API is used to get the available devices in the current environment.

CameraItem

DeviceItem

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

(async) getCodecAsync()

This API is used to get the codec support of the current environment.

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

(async) getReportAsync()

This API is used to get the detection report of the current environment.

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

(async) isHardWareAccelerationEnabled()

This API is used to check whether hardware acceleration is enabled on the Chrome browser.

Note: the implementation of this API depends on the native WebRTC API. We recommend you call this API for check after calling isTRTCSupported. The check can take up to 30 seconds as tested below:

1. If hardware acceleration is enabled, this API will take about 2 seconds on Windows and 10 seconds on macOS.
2. If hardware acceleration is disabled, this API will take about 30 seconds on both Windows and macOS.

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 Component for Device Check

Device check UI component features

1. Device connection and check logic processing

2. Network check logic processing

3. Optional network check tab

4. Support for Chinese and English

Device check UI component links

For more information on how to use the component's npm package, please see rtc-device-detector-react.

For more information on how to debug the component's source code, please see github/rtc-device-detector.

For more information on how to import the component, please see WebRTC API Example.

Device check UI component page

Device and Network Detection Logic

1) Device Connection

The purpose of device connection is to detect whether the user's machine has camera, microphone, and speaker devices, and whether it is in a networked state. If there are camera and microphone devices, try to obtain audio and video streams and guide the user to grant access to the camera and microphone.

• Determine whether the device has camera, microphone, and speaker devices

  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;
  

• Obtain access to the camera and microphone

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

• Check whether the device is connected to the network

  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） Camera Detection

​Detection principle: Open the camera and render the camera image on the page.

• Open the camera

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

• Switch camera

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

• Device plug and unplug detection

• Close the camera after the detection is complete

  trtc.stopLocalVideo();
  

3) Microphone Detection

Detection principle: Open the microphone and obtain the microphone volume.

• Open the microphone

  trtc.startLocalAudio({ publish: false });
  

• Switch microphone

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

• Device plug and unplug detection

• Release microphone usage after detection is complete

  trtc.stopLocalAudio();
  

4) Speaker Detection

Detection principle: Play an mp3 media file through the audio tag.

• Create an audio tag to remind the user to turn up the volume and play the mp3 to confirm whether the speaker device is working properly.

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

• Stop playing after detection is complete

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

5) Network Detection

Reference: Network Quality Detection Before Call

TRTC Capability Detection Page

You can use the TRTC Detection Page where you are currently using the TRTC SDK to detect the current environment. You can also click the "Generate Report" button to get a report of the current environment for environment detection or troubleshooting.