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:
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
npminstall rtc-detect
Usage
import RTCDetect from'rtc-detect';
// Initialize the detection module
const detect =newRTCDetect();
// 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 =newRTCDetect();
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 =newRTCDetect();
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 =newRTCDetect();
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 =newRTCDetect();
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 =newRTCDetect();
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 =newRTCDetect();
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 =newRTCDetect();
const data =await detect.isTRTCSupported();
if(data.result){
const result =await detect.isHardWareAccelerationEnabled();
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
importTRTCfrom'trtc-sdk-v5';
const cameraList =awaitTRTC.getCameraList();
const micList =awaitTRTC.getMicrophoneList();
const speakerList =awaitTRTC.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
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.
Yes
No
Was this page helpful?