본 문서에서는 Tencent Cloud TRTC Web SDK를 귀하의 프로젝트에 빠르게 통합하는 방법을 소개합니다.
WebRTC 기술은 Google이 처음 고안한 기술로 Chrome, Edge, Firefox, Safari, Opera 브라우저 등에서 지원되고 있습니다. Tencent Cloud TRTC Web SDK는 WebRTC 패키지를 기반으로 하며 Tencent Cloud TRTC Web SDK에 대한 자세한 지원도는 플랫폼 지원을 참고하십시오.
Tencent Cloud TRTC Web SDK의 상세 지원 관련 내용은 지원 플랫폼을 참고하십시오.
주의:
- 브라우저에서 TRTC Web SDK 기능 테스트 페이지를 열어 WebRTC의 모든 기능이 지원되는지 테스트할 수 있습니다(예: WebView 등 브라우저 환경).
- H.264 버전 권한 제한으로 인해, Huawei Chrome 88 이하 버전은 H264 코덱을 사용할 수 없습니다(즉, 스트림 푸시 불가). Huawei 기기의 Chrome 브라우저에서 TRTC Web SDK를 사용하여 스트림을 푸시하려면 티켓 제출을 통해 VP8 코덱 활성화를 신청하십시오.
응용 시나리오 | 프로토콜 | 수신(재생) | 발송(마이크 켜짐) | 화면 공유 | 비고 |
---|---|---|---|---|---|
프로덕션 환경 | HTTPS 프로토콜 | 지원 | 지원 | 지원 | 권장 |
프로덕션 환경 | HTTP 프로토콜 | 지원 | 미지원 | 미지원 | |
로컬 개발 환경 | http://localhost | 지원 | 지원 | 지원 | 권장 |
로컬 개발 환경 | http://127.0.0.1 | 지원 | 지원 | 지원 | |
로컬 개발 환경 | http://[로컬 IP] | 지원 | 미지원 | 미지원 | |
로컬 개발 환경 | file:/// | 지원 | 지원 | 지원 |
TRTC Web SDK 사용 시 방화벽 제한으로 인해 음성 및 영상 통화가 안될 수 있으니 방화벽 제한 처리를 참고하여 해당 포트 및 도메인 이름을 방화벽 얼로우리스트에 추가하시기 바랍니다.
프로젝트에서 npm을 사용하여 SDK 패키지를 설치해야 합니다.
npm install trtc-js-sdk --save
프로젝트 스크립트에 모듈을 삽입합니다.
import TRTC from 'trtc-js-sdk';
귀하의 Web 페이지에 다음 코드만 추가하면 됩니다.
<script src="trtc.js"></script>
SDK 다운로드 주소: 클릭하여 다운로드 .
더 자세한 초기화 절차 및 API 사용 소개는 다음 가이드를 참고하십시오.
기능 | Sample Code 가이드 |
---|---|
기본 음성/영상 통화 | 가이드 링크 |
인터랙티브 라이브 스트리밍 | 가이드 링크 |
카메라/마이크 전환 | 가이드 링크 |
로컬 비디오 속성 설정 | 가이드 링크 |
로컬 오디오 또는 비디오 동적 ON/OFF | 가이드 링크 |
화면 공유 | 가이드 링크 |
볼륨 감지 | 가이드 링크 |
사용자 정의 수집 및 사용자 정의 재생 렌더링 | 가이드 링크 |
방의 업스트림 사용 인원 제한 | 가이드 링크 |
배경 음악/음향 효과 구현 | 가이드 링크 |
통화 전 환경 및 디바이스 점검 | 가이드 링크 |
통화 전 네트워크 품질 점검 | 가이드 링크 |
장치 연결/해제 동작 감지 | 가이드 링크 |
CDN에 푸시 스트림 구현 | - |
이중 스트림 활성화 | 가이드 링크 |
뷰티 필터 활성화 | 가이드 링크 |
워터마크 활성화 | 가이드 링크 |
크로스 룸 연결 구현 | 가이드 링크 |
설명:클릭하여 더 많은 기능을 확인하십시오.
문제 해결에 도움이 되었나요?