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.

Media Device Test

Option 1: Use Device Detector Plugin (including default UI)

The device detector plugin is used to test the user's media device(camera, microphone, speaker) and network which is recommended to be used before the user enters the room. 。

• Support TRTC Web SDK version >= v5.8.0
• The plugin includes a default UI. If the UI does not meet your product design requirements, you can refer to Option 2 for a custom UI implementation.

Usage

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 Description

trtc.startPlugin('DeviceDetector', options)

options.mirror(optional)

Enable the mirror checkbox during camera detection

options.cameraDetect(optional)

options.networkDetect(optional)

trtc.stopPlugin('DeviceDetector')

Plugin Demo

Option 2: Implement Device Detection Based on SDK API (Custom UI)

If the default UI of the device detection plugin in Option 1 does not meet your requirements, you can choose Option 2 to customize the UI.

1. Device Connection

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

• Check whether the device has a camera, microphone, and speaker device

  import TRTC from 'trtc-sdk-v5';
  const cameraList = await TRTC.getCameraList();
  const micList = await TRTC.getMicrophoneList();
  // Mobile devices do not support getting speaker devices, so speaker detection on mobile devices can skip getting the speaker list  
  const speakerList = await TRTC.getSpeakerList();
  const hasCameraDevice = cameraList.length > 0;
  const hasMicrophoneDevice = micList.length > 0;
  const hasSpeakerDevice = speakerList.length > 0;
  

2. Camera Detection

Detection principle: Turn on the camera and render the camera image on the page. You can provide two buttons on the page to allow the user to confirm whether they can see the camera image.

• Turn on the camera

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

• Switch the camera

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

• Close the camera after detection is completed

  trtc.stopLocalVideo();
  

3. Microphone Detection

Detection principle: Open the microphone and obtain the microphone volume. Listen to the microphone volume event and render the real-time volume to the page, guide the user to speak, and confirm whether they can see the volume bar change.

• Turn on the microphone

  trtc.on(TRTC.EVENT.AUDIO_VOLUME, event => {
    event.result.forEach(({ userId, volume }) => {
        const isMe = userId === '';
        if (isMe) {
            console.log(`my volume: ${volume}`);
            // Render the microphone volume to your page.
        }
    })
  });
  // 开启音量回调，并设置每 200ms 触发一次事件
  trtc.enableAudioVolumeEvaluation(200);
  trtc.startLocalAudio({ publish: false });
  

• Switch the microphone

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

• Release the microphone usage after detection is completed

  trtc.stopLocalAudio();
  

4. Speaker Detection

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

• Create an audio tag, remind the user to turn up the playback volume, play the mp3 to confirm whether the speaker device is normal.

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

• Stop playback after detection is completed

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

5. Network Detection

Reference: Network Quality Detection before enterRoom

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.