tencent cloud

Tencent Real-Time Communication

소식 및 공지 사항
제품 업데이트
Tencent Cloud 오디오/비디오 단말 SDK 재생 업그레이드 및 권한 부여 인증 추가
TRTC 월간 구독 패키지 출시 관련 안내
제품 소개
제품 개요
기본 개념
제품 기능
제품 장점
응용 시나리오
성능 데이터
구매 가이드
Billing Overview
무료 시간 안내
Monthly subscription
Pay-as-you-go
TRTC Overdue and Suspension Policy
과금 FAQ
Refund Instructions
신규 사용자 가이드
Demo 체험
Call
개요(TUICallKit)
Activate the Service
Run Demo
빠른 통합(TUICallKit)
오프라인 푸시
Conversational Chat
온클라우드 녹화(TUICallKit)
AI Noise Reduction
UI 사용자 정의
Calls integration to Chat
Additional Features
No UI Integration
Server APIs
Client APIs
Solution
ErrorCode
릴리스 노트
FAQs
라이브 스트리밍
Billing of Video Live Component
Overview
Activating the Service (TUILiveKit)
Demo 실행
No UI Integration
UI Customization
Live Broadcast Monitoring
Video Live Streaming
Voice Chat Room
Advanced Features
Client APIs
Server APIs
Error Codes
Release Notes
FAQs
RTC Engine
Activate Service
SDK 다운로드
API 코드 예시
Usage Guidelines
API 클라이언트 API
고급 기능
RTC RESTFUL API
History
Introduction
API Category
Room Management APIs
Stream mixing and relay APIs
On-cloud recording APIs
Data Monitoring APIs
Pull stream Relay Related interface
Web Record APIs
AI Service APIs
Cloud Slicing APIs
Cloud Moderation APIs
Making API Requests
Call Quality Monitoring APIs
Usage Statistics APIs
Data Types
Appendix
Error Codes
콘솔 가이드
애플리케이션 관리
사용량 통계
모니터링 대시보드
개발 보조
Solution
Real-Time Chorus
FAQs
과금 개요
기능 관련
UserSig 관련
방화벽 제한 처리
설치 패키지 용량 축소 관련 질문
Andriod 및 iOS 관련
Web 관련
Flutter 관련
Electron 관련
TRTCCalling Web 관련
멀티미디어 품질 관련
기타 질문
Protocols and Policies
컴플라이언스 인증
보안 백서
정보 보안에 관한 참고 사항
Service Level Agreement
Apple Privacy Policy: PrivacyInfo.xcprivacy
TRTC 정책
개인 정보 보호 정책
데이터 처리 및 보안 계약
용어집

Web

PDF
포커스 모드
폰트 크기
마지막 업데이트 시간: 2024-07-24 16:43:38
본문에서는 오디오 및 비디오에 대한 사용자 정의 캡처 및 사용자 정의 렌더링을 사용하는 방법을 설명합니다.

사용자 정의 캡처

로컬 스트림을 생성하기 위해 {@link TRTC.createStream createStream()}을 호출할 때 캡처 방법을 지정할 수 있습니다.
마이크와 카메라에서 오디오 및 비디오 데이터 캡처:
const localStream = TRTC.createStream({ userId, audio: true, video: true });
localStream.initialize().then(() => {
// local stream initialized success
});
화면 공유 스트림 캡처:
const localStream = TRTC.createStream({ userId, audio: false, screen: true });
localStream.initialize().then(() => {
// local stream initialized success
});
상기 두 가지 예시는 SDK에 내장된 캡처 프로세스를 사용합니다. 스트림을 사전 처리하려면 createStream을 사용하여 외부 오디오/비디오 소스, 즉 사용자 정의 캡처를 사용하여 로컬 스트림을 생성할 수 있습니다. 예를 들어 다음을 수행할 수 있습니다.
getUserMedia를 사용하여 특정 마이크 및 카메라에서 오디오/비디오를 캡처합니다.
getDisplayMedia를 사용하여 디스플레이 콘텐츠를 캡처합니다.
captureStream을 사용하여 웹페이지에서 재생되는 오디오/비디오를 캡처합니다.
captureStream을 사용하여 canvas에서 애니메이션을 캡처합니다.

웹 페이지에서 재생되는 비디오 소스 캡처

// 현재 브라우저가 video 요소에서 stream 캡처를 지원하는지 확인
const isVideoCapturingSupported = () => {
['captureStream', 'mozCaptureStream', 'webkitCaptureStream'].forEach((item) => {
if (item in document.createElement('video')) {
return true;
}
});
return false;
};

// 현재 브라우저가 video 요소에서 stream 캡처를 지원하는지 확인
if (!isVideoCapturingSupported()) {
console.log('your browser does not support capturing stream from video element');
return
}
// 페이지에서 재생 중인 video의 태그 가져오기
const video = document.getElementByID('your-video-element-ID');
// 재생중인 비디오에서 비디오 스트림 캡처
const stream = video.captureStream();
const audioTrack = stream.getAudioTracks()[0];
const videoTrack = stream.getVideoTracks()[0];

const localStream = TRTC.createStream({ userId, audioSource: audioTrack, videoSource: videoTrack });

// 영상 통화 경험을 보장하기 위해 비디오 속성은 외부 비디오 소스의 속성과 동일해야 함
localStream.setVideoProfile('480p');

localStream.initialize().then(() => {
// local stream initialized success
});

canvas에서 애니메이션 캡처하기

// 현재 브라우저가 canvas 요소에서 stream 캡처를 지원하는지 확인
const isCanvasCapturingSupported = () => {
['captureStream', 'mozCaptureStream', 'webkitCaptureStream'].forEach((item) => {
if (item in document.createElement('canvas')) {
return true;
}
});
return false;
};

// 현재 브라우저가 canvas 요소에서 stream 캡처를 지원하는지 확인
if (!isCanvasCapturingSupported()) {
console.log('your browser does not support capturing stream from canvas element');
return
}
// canvas 태그 가져오기
const canvas = document.getElementByID('your-canvas-element-ID');

// canvas에서 15 fps 비디오 스트림 캡처
const fps = 15;
const stream = canvas.captureStream(fps);
const videoTrack = stream.getVideoTracks()[0];

const localStream = TRTC.createStream({ userId, videoSource: videoTrack });

// 영상 통화 경험을 보장하기 위해 비디오 속성은 외부 비디오 소스의 속성과 동일해야 함
localStream.setVideoProfile('480p');

localStream.initialize().then(() => {
// local stream initialized success
});

사용자 정의 렌더링

{@link Stream#play Stream.play()}를 사용하여 TRTC.createStream()을 통해 생성 및 초기화된 로컬 스트림 또는 Client.on('stream-added')을 통해 수신된 원격 스트림을 렌더링할 수 있습니다. Stream.play() 메소드는 오디오 플레이어와 비디오 플레이어를 만들고 <audio>/<video> 태그를 App이 전달한 Div 컨테이너에 삽입합니다.
자신의 플레이어를 사용하려면 Stream.play()/stop()을 호출하는 대신 {@link Stream#getAudioTrack Stream.getAudioTrack()}/{@link Stream#getVideoTrack Stream.getVideoTrack()} 오디오 및 비디오 트랙을 가져오고 자신의 플레이어로 렌더링합니다. 이러한 경우 Stream.on('player-state-changed') 콜백이 트리거되지 않습니다. 현재 스트림의 상태에 대한 정보를 얻으려면 App이 'mute/unmute/ended' 및 MediaStreamTrack의 기타 이벤트를 수신해야 합니다.
또한 스트림의 라이프사이클을 모니터링하기 위해 Client.on('stream-added'), Client.on('stream-updated')Client.on('stream-removed')을 수신해야 합니다.
주의사항:
'stream-added' 또는 'stream-updated' 이벤트 콜백을 수신한 후 스트림에 오디오 또는 비디오 track이 있는지 확인합니다. stream-updated 콜백에 대한 오디오 또는 비디오 track이 있는 경우 플레이어를 업데이트하고 최신 오디오 및 비디오 track을 재생해야 합니다.

도움말 및 지원

문제 해결에 도움이 되었나요?

피드백