Docs Overview/
Web/

Web

Overview

Because it is difficult for users to detect device problems during a call, we recommend checking the browser and testing devices such as cameras and mics before starting a video call.

Browser Environment Check

Before enterRoom, 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, refer to Supported browsers.
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, refer to Supported browsers.
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 whether the current environment is supported by the TRTC SDK and view the details of the current environment.

Installation

npm install rtc-detect

Usage

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.
Item
Type
Description
UA
string
The browser user-agent.
OS
string
The OS of the current device.
browser
object
The current browser information in the format of { name, version }.
displayResolution
object
The current resolution in the format of { width, height }.
getHardwareConcurrency
number
The number of CPU cores of the current device.
const detect = new RTCDetect();
const result = detect.getSystem();

getAPISupported()

This API is used to get the API support of the current environment.
Item
Type
Description
isUserMediaSupported
boolean
Whether the user media data stream can be obtained
isWebRTCSupported
boolean
Whether WebRTC is supported
isWebSocketSupported
boolean
Whether WebSocket is supported
isWebAudioSupported
boolean
Whether WebAudio is supported
isScreenCaptureAPISupported
boolean
Whether the screen stream can be obtained
isCanvasCapturingSupported
boolean
Whether the data stream can be obtained from the canvas
isVideoCapturingSupported
boolean
Whether the data stream can be obtained from the video
isRTPSenderReplaceTracksSupported
boolean
Whether renegotiation with peerConnection can be skipped when track is replaced
isApplyConstraintsSupported
boolean
Whether the camera resolution can be changed without calling getUserMedia again
const detect = new RTCDetect();
const result = detect.getAPISupported();

(async) getDevicesAsync()

This API is used to get the available devices in the current environment.
Item
Type
Description
hasWebCamPermissions
boolean
Whether the user camera data can be obtained
hasMicrophonePermission
boolean
Whether the user mic data can be obtained
cameras
array
List of user cameras, including their resolutions, maximum width, maximum height, and maximum frame rate (for certain browsers only) supported for video streams
microphones
array
List of mics used by users
speakers
array
List of speakers used by users
CameraItem
Item
Type
Description
deviceId
string
The device ID, which is usually unique and can be used to identify devices.
groupId
string
The group ID. If two devices belong to the same physical device, they have the same group ID.
kind
string
The camera device type: 'videoinput'.
label
string
A tag which describes the device.
resolution
object
The maximum resolution width, height, and frame rate supported by the camera {maxWidth: 1280, maxHeight: 720, maxFrameRate: 30}.
DeviceItem
Item
Type
Description
deviceId
string
The device ID, which is usually unique and can be used to identify devices.
groupId
string
The group ID. If two devices belong to the same physical device, they have the same group ID.
kind
string
The device type, such as 'audioinput' and 'audiooutput'.
label
string
A tag which describes the device.
const detect = new RTCDetect();
const result = await detect.getDevicesAsync();

(async) getCodecAsync()

This API is used to get the codec support of the current environment.
Item
Type
Description
isH264EncodeSupported
boolean
Whether H.264 encoding is supported
isH264DecodeSupported
boolean
Whether H.264 decoding is supported
isVp8EncodeSupported
boolean
Whether VP8 encoding is supported
isVp8DecodeSupported
boolean
Whether VP8 decoding is supported

If encoding is supported, audio/video can be published. If decoding is supported, audio/video can be pulled for playback.
const detect = new RTCDetect();
const result = await detect.getCodecAsync();

(async) getReportAsync()

This API is used to get the detection report of the current environment.
Item
Type
Description
system
object
Same as the returned value of getSystem()
APISupported
object
Same as the returned value of getAPISupported()
codecsSupported
object
Same as the returned value of getCodecAsync()
devices
object
Same as the returned value of getDevicesAsync()
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.
notice
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
For more information on how to use the component's npm package, see rtc-device-detector-react.
For more information on how to debug the component's source code, see github/rtc-device-detector.
For more information on how to import the component, 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

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.