tencent cloud

Cloud Streaming Services

신규 사용자 가이드
제품 소개
제품 개요
하위 제품 소개
기본 개념
제품 기능
응용 시나리오
제품 장점
사용 제한
구매 가이드
가격 리스트
기본 서비스
부가 서비스
선불 패키지
구매 프로세스
과금 변경
환불 정책
청구서 조회
연장 안내
연체시 서비스 중지 설명
과금 FAQ
LVB
개요
응용 시나리오
시작하기
SDK 연결 안내
LEB(초저지연 라이브 방송)
개요
LEB와 LVB의 차이점
응용 시나리오
시작하기
SDK 통합
콘솔 가이드
콘솔 소개
개요
Domain Management
스트리밍
리소스 패키지 관리
기능 설정
릴레이
사용량 과금
CAM 액세스 제어
기능 사례
Push and Playback
기능
Live Streaming Security
해외 라이브 방송
콜백 이벤트 정보 알림
자주 사용하는 3rd party 툴 가이드
SDK 사례
0. SDK 통합 가이드
2. 재생
3. 고급 기능
API문서
History
Introduction
API Category
Making API Requests
Live Pad APIs
Live Stream Mix APIs
Time Shifting APIs
Monitoring Data Query APIs
Billing Data Query APIs
Live Transcoding APIs
Delayed Playback Management APIs
Domain Name Management APIs
Watermark Management APIs
Certificate Management APIs
Stream Pulling APIs
Recording Management APIs
Live Callback APIs
Screencapturing and Porn Detection APIs
Authentication Management APIs
Live Stream Management APIs
Data Types
Error Codes
유지보수 가이드
비디오 랙 최적화(V2)
푸시 스트리밍 실패 문제 해결
재생 실패 문제 해결
라이브 방송 딜레이 문제 해결
풀 스트림 비디오 품질 저하 문제 해결
라이브 방송에 COS bucket 권한을 부여하여 화면 캡처 저장
장애 처리
라이브 방송 혼합 스트림 오류: InvalidParameter.OtherError
FAQs
라이브 방송 기본 관련
푸시 및 재생
라이브 방송 과금
라이브 방송 해외 관련
라이브 레코딩
클라우드 혼합 스트리밍 관련
도메인 설정 관련
Apple ATS 적용 관련
SLA
CSS Service Level Agreement
CSS 정책
개인 정보 보호 정책
데이터 처리 및 보안 계약

WebRTC 기반 로컬 스트림 혼합

PDF
포커스 모드
폰트 크기
마지막 업데이트 시간: 2022-12-23 10:41:21
설명:
스트림 푸시 SDK는 현재 베타 테스트 중입니다. 공식 버전의 과금 규칙이 적용됩니다.
SDK는 여러 비디오 스트림 혼합(예: PiP), 이미지 효과 처리(예: 미러링 및 필터), 기타 요소(예: 워터마크 및 텍스트) 추가를 포함하여 다양한 비디오 스트림 이미지 처리 기능을 제공합니다. 기본 프로세스는 다음과 같습니다. SDK는 먼저 여러 스트림을 수집하고 로컬에서 혼합하여 이미지를 결합하고 오디오를 혼합합니다. 그런 다음 다른 효과를 처리합니다. 모든 기능은 브라우저의 지원에 의존하므로 SDK에는 브라우저 성능에 대한 특정 요구 사항이 있습니다. 구체적인 API 프로토콜은 TXVideoEffectManager를 참고하십시오. 본문은 로컬 스트림 혼합의 기본 사용법을 설명합니다.

기본 사용

로컬 스트림 혼합 기능을 사용하려면 SDK를 초기화하고 SDK 인스턴스 livePusher를 가져와야 합니다. 초기화 코드는 WebRTC 프로토콜 푸시 스트리밍을 참고하십시오.

1단계: 비디오 효과 관리 인스턴스 가져오기

var videoEffectManager = livePusher.getVideoEffectManager();

2단계: 로컬 스트림 혼합 활성화

먼저 로컬 스트림 혼합 기능을 활성화해야 합니다. 기본적으로 SDK는 하나의 비디오 스트림과 오디오 스트림만 수집합니다. 이 기능이 활성화되면 SDK는 브라우저에서 로컬로 혼합되는 여러 스트림을 수집할 수 있습니다.
videoEffectManager.enableMixing(true);

3단계: 스트림 혼합 매개변수 설정

스트림 혼합 매개변수, 특히 스트림 혼합 후 비디오 출력의 해상도와 프레임 레이트를 설정합니다.
videoEffectManager.setMixingConfig({
videoWidth: 1280,
videoHeight: 720,
videoFramerate: 15
});

4단계: 여러 스트림 수집

로컬 스트림 혼합이 활성화되면 SDK는 카메라 및 공유 화면과 같은 여러 스트림을 수집하기 시작합니다. 후속 작업에 필요하므로 스트림 ID를 유지해야 합니다.
var cameraStreamId = null;
var screenStreamId = null;

livePusher.startCamera().then((streamId) => {
cameraStreamId = streamId;
}).catch((error) => {
console.log('카메라 켜기 실패:'+ error.toString());
});

livePusher.startScreenCapture().then((streamId) => {
screenStreamId = streamId;
}).catch((error) => {
console.log('화면 공유 실패:'+ error.toString());
});

5단계: 이미지 레이아웃 설정

수집된 두 스트림의 이미지 레이아웃을 설정합니다. 여기에서 공유 화면이 메인 이미지로 표시되며 카메라 이미지는 왼쪽 상단에 표시됩니다. 특정 매개변수 구성에 대해서는 TXLayoutConfig를 참고하십시오.
videoEffectManager.setLayout([{
streamId: screenStreamId,
x: 640,
y: 360,
width: 1280,
height: 720,
zOrder: 1
}, {
streamId: cameraStreamId,
x: 160,
y: 90,
width: 320,
height: 180,
zOrder: 2
}]);

6단계: 미러링 효과 설정

카메라에 의해 수집된 이미지가 실제로 반전되므로 카메라 이미지를 미러링합니다.
videoEffectManager.setMirror({
streamId: cameraStreamId,
mirrorType: 1
});

7단계: 워터마크 추가

이미지 객체를 준비하고 비디오 스트림 이미지에 워터마크로 추가합니다. 여기에서 워터마크 이미지는 오른쪽 상단 모서리에 배치됩니다.
var image = new Image();
image.src = './xxx.png'; // 이미지 주소는 다른 도메인에 속할 수 없음에 유의해야하며, 그렇지 않으면 도메인 간 문제가 발생합니다

videoEffectManager.setWatermark({
image: image,
x: 1230,
y: 50,
width: 100,
height: 100,
zOrder: 3
});

8단계: 스트림 푸시 시작

상기 단계를 거친 후 PiP 레이아웃, 미러링된 이미지 및 워터마크 출력이 포함된 비디오 스트림을 서버로 푸시합니다.
livePusher.startPush('webrtc://domain/AppName/StreamName?txSecret=xxx&txTime=xxx');
설명:
WebRTC 기반 스트림 혼합 API에 대한 자세한 내용은 TXLivePusher를 참고하십시오.

도움말 및 지원

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

피드백