TRTC.checkSystemRequirements().then(checkResult => {if (checkResult.result) {// 방 입장 지원 여부 점검if (checkResult.isH264DecodeSupported) {// 풀 스트림 지원 여부 점검}if (checkResult.isH264EncodeSupported) {// 스트림 푸시가 지원 여부 점검}}})
TRTC.checkSystemRequirements
에서 반환된 점검 결과가 false인 경우 다음 이유 중 하나 때문일 수 있습니다.npm install rtc-detect
import RTCDetect from 'rtc-detect';// 감지 모듈 초기화const detect = new RTCDetect();// 현재 환경의 감지 결과를 가져옴const result = await detect.getReportAsync();// result에는 현재 환경 시스템 정보, API 지원, 코덱 지원, 장치 정보가 포함됨console.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 | 브라우저 ua |
OS | string | 현재 장치의 운영 체제 |
browser | object | { name, version } 형식의 현재 브라우저 정보 |
displayResolution | object | { width, height } 형식의 현재 해상도 |
getHardwareConcurrency | number | 현재 장치의 CPU 코어 수 |
const detect = new RTCDetect();const result = detect.getSystem();
Item | Type | Description |
isUserMediaSupported | boolean | 사용자 미디어 데이터 스트림 획득 가능 여부 |
isWebRTCSupported | boolean | WebRTC 지원 여부 |
isWebSocketSupported | boolean | WebSocket 지원 여부 |
isWebAudioSupported | boolean | WebAudio 지원 여부 |
isScreenCaptureAPISupported | boolean | 화면 스트림 획득 가능 여부 |
isCanvasCapturingSupported | boolean | canvas에서 데이터 스트림 획득 가능 여부 |
isVideoCapturingSupported | boolean | video에서 데이터 스트림 획득 가능 여부 |
isRTPSenderReplaceTracksSupported | boolean | track이 대체될 때 peerConnection과의 재협상을 생략할 수 있는지 여부 |
isApplyConstraintsSupported | boolean | 다시 getUserMedia를 호출하지 않고 카메라 해상도를 변경할 수 있는지 여부 |
const detect = new RTCDetect();const result = detect.getAPISupported();
Item | Type | Description |
hasWebCamPermissions | boolean | 사용자 카메라 데이터 획득 가능 여부 |
hasMicrophonePermission | boolean | 사용자 마이크 데이터 획득 가능 여부 |
cameras | array | 비디오 스트림에 대해 지원되는 해상도, 최대 너비, 최대 높이 및 최대 프레임 레이트(특정 브라우저만 해당)를 포함한 사용자 카메라 목록 |
microphones | array | 사용자 마이크 목록 |
speakers | array | 사용자 스피커 목록 |
Item | Type | Description |
deviceId | string | 장치 ID, 일반적으로 고유하며 장치를 식별하는 데 사용할 수 있음 |
groupId | string | 그룹 ID, 두 장치가 동일한 물리적 장치에 속하는 경우 동일한 그룹 ID를 갖음 |
kind | string | 카메라 장치 유형: 'videoinput' |
label | string | 장치를 설명하는 태그 |
resolution | object | 카메라가 지원하는 최대 해상도 너비, 높이 및 프레임 레이트 {maxWidth: 1280, maxHeight: 720, maxFrameRate: 30} |
Item | Type | Description |
deviceId | string | 장치 ID, 일반적으로 고유하며 장치를 식별하는 데 사용할 수 있음 |
groupId | string | 그룹 ID, 두 장치가 동일한 물리적 장치에 속하는 경우 동일한 그룹 ID를 갖음 |
kind | string | 장치 유형, 예시: 'audioinput', 'audiooutput' |
label | string | 장치를 설명하는 태그 |
const detect = new RTCDetect();const result = await detect.getDevicesAsync();
Item | Type | Description |
isH264EncodeSupported | boolean | h264 인코딩 지원 여부 |
isH264DecodeSupported | boolean | h264 디코딩 지원 여부 |
isVp8EncodeSupported | boolean | vp8 인코딩 지원 여부 |
isVp8DecodeSupported | boolean | vp8 디코딩 지원 여부 |
const detect = new RTCDetect();const result = await detect.getCodecAsync();
Item | Type | Description |
system | object | getSystem()의 반환 값과 동일 |
APISupported | object | getAPISupported()의 반환 값과 동일 |
codecsSupported | object | getCodecAsync()의 반환 값과 동일 |
devices | object | getDevicesAsync()의 반환 값과 동일 |
const detect = new RTCDetect();const result = await detect.getReportAsync();
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-js-sdk';const cameraList = await TRTC.getCameras();const micList = await TRTC.getMicrophones();const speakerList = await TRTC.getSpeakers();const hasCameraDevice = cameraList.length > 0;const hasMicrophoneDevice = micList.length > 0;const hasSpeakerDevice = speakerList.length > 0;
navigator.mediaDevices.getUserMedia({ video: hasCameraDevice, audio: hasMicrophoneDevice }).then((stream) => {// 오디오/비디오 스트림 가져오기 성공// ...// 카메라와 마이크 릴리스stream.getTracks().forEach(track => track.stop());}).catch((error) => {// 오디오/비디오 스트림 가져오기 실패});
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();
import TRTC from 'trtc-js-sdk';let cameraList = await TRTC.getCameras();let cameraId = cameraList[0].deviceId;
const localStream = TRTC.createStream({video: true,audio: false,cameraId,});await localStream.initialize();localStream.play('camera-video');
localStream.switchDevice('video', cameraId);
navigator.mediaDevices.addEventListener('devicechange', async () => {cameraList = await TRTC.getCameras();cameraId = cameraList[0].deviceId;localStream.switchDevice('video', cameraId);})
localStream.close();
import TRTC from 'trtc-js-sdk';let microphoneList = await TRTC.getMicrophones();let microphoneId = microphoneList[0].deviceId;
const localStream = TRTC.createStream({video: false,audio: true,microphoneId,});await localStream.initialize();localStream.play('audio-container');timer = setInterval(() => {const volume = localStream.getAudioLevel();}, 100);
// 사용자가 선택한 새로운 microphoneId 가져오기localStream.switchDevice('audio', microphoneId);
navigator.mediaDevices.addEventListener('devicechange', async () => {microphoneList = await TRTC.getMicrophones();microphoneId = microphoneList[0].deviceId;localStream.switchDevice('audio', microphoneId);})
localStream.close();clearInterval(timer);
<audio id="audio-player" src="xxxxx" controls></audio>
const audioPlayer = document.getElementById('audio-player');if (!audioPlayer.paused) {audioPlayer.pause();}audioPlayer.currentTime = 0;
let uplinkClient = null; // 업스트림 네트워크 품질 점검let downlinkClient = null; // 다운스트림 네트워크 품질 점검let localStream = null; // 테스트용 스트림let testResult = {// 업스트림 네트워크 품질 데이터 기록uplinkNetworkQualities: [],// 다운스트림 네트워크 품질 데이터 기록downlinkNetworkQualities: [],average: {uplinkNetworkQuality: 0,downlinkNetworkQuality: 0}}// 1. 업스트림 네트워크 품질 점검async function testUplinkNetworkQuality() {uplinkClient = TRTC.createClient({sdkAppId: 0, // sdkAppId 입력userId: 'user_uplink_test',userSig: '', // uplink_test의 userSigmode: 'rtc'});localStream = TRTC.createStream({ audio: true, video: true });// 실제 비즈니스 시나리오를 기반으로 video profile 설정localStream.setVideoProfile('480p');await localStream.initialize();uplinkClient.on('network-quality', event => {const { uplinkNetworkQuality } = event;testResult.uplinkNetworkQualities.push(uplinkNetworkQuality);});// 테스트를 위한 방으로 들어갑니다. 충돌을 피하기 위해 방 ID는 무작위여야 합니다.await uplinkClient.join({ roomId: 8080 });await uplinkClient.publish(localStream);}// 2. 다운스트림 네트워크 품질 점검async function testDownlinkNetworkQuality() {downlinkClient = TRTC.createClient({sdkAppId: 0, // sdkAppId 입력userId: 'user_downlink_test',userSig: '', // userSigmode: 'rtc'});downlinkClient.on('stream-added', async event => {await downlinkClient.subscribe(event.stream, { audio: true, video: true });// 성공적인 구독 후 네트워크 품질 이벤트 수신 시작downlinkClient.on('network-quality', event => {const { downlinkNetworkQuality } = event;testResult.downlinkNetworkQualities.push(downlinkNetworkQuality);});})// 테스트를 위한 방으로 들어갑니다. 충돌을 피하기 위해 방 ID는 무작위여야 합니다.await downlinkClient.join({ roomId: 8080 });}// 3. 점검 시작testUplinkNetworkQuality();testDownlinkNetworkQuality();// 4. 15s 후에 점검을 중지하고 평균 네트워크 품질 계산setTimeout(() => {// 평균 업스트림 네트워크 품질 계산if (testResult.uplinkNetworkQualities.length > 0) {testResult.average.uplinkNetworkQuality = Math.ceil(testResult.uplinkNetworkQualities.reduce((value, current) => value + current, 0) / testResult.uplinkNetworkQualities.length);}if (testResult.downlinkNetworkQualities.length > 0) {// 평균 다운스트림 네트워크 품질 계산testResult.average.downlinkNetworkQuality = Math.ceil(testResult.downlinkNetworkQualities.reduce((value, current) => value + current, 0) / testResult.downlinkNetworkQualities.length);}// 점검이 종료됩니다. 관련 상태를 지우십시오.uplinkClient.leave();downlinkClient.leave();localStream.close();}, 15 * 1000);
문제 해결에 도움이 되었나요?