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 videoif (!checkResult.detail.isH264EncodeSupported) {}// Not support to subscribe videoif (!checkResult.detail.isH264DecodeSupported) {}})
rtc-detect
Librarynpm install rtc-detect
import RTCDetect from 'rtc-detect';// Initialize the detection moduleconst detect = new RTCDetect();// Get the detection result of the current environmentconst result = await detect.getReportAsync();// `result` contains the current environment system information, API support, codec support, and device informationconsole.log('result is: ' + result);
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}.`)}
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();
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();
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 |
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}. |
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();
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 |
const detect = new RTCDetect();const result = await detect.getCodecAsync();
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();
isTRTCSupported
. The check can take up to 30 seconds as tested below: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}.`)}
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();
trtc.startLocalVideo({ view: 'camera-video', publish: false });
trtc.updateLocalVideo({option: { cameraId }});
trtc.stopLocalVideo();
trtc.startLocalAudio({ publish: false });
trtc.updateLocalAudio({ option: { microphoneId }});
trtc.stopLocalAudio();
<audio id="audio-player" src="xxxxx" controls></audio>
const audioPlayer = document.getElementById('audio-player');if (!audioPlayer.paused) {audioPlayer.pause();}audioPlayer.currentTime = 0;
Was this page helpful?