tencent cloud

Cloud Streaming Services

문서Cloud Streaming Services기능 사례Push and PlaybackWebRTC 프로토콜 푸시 스트리밍Web푸시 스트림

Web푸시 스트림

PDF
포커스 모드
폰트 크기
마지막 업데이트 시간: 2023-11-10 17:05:36

TXLivePusher 푸시 스트리밍 SDK는 주로 비디오 클라우드의 LEB(초저지연 라이브 스트리밍) 푸시 스트리밍에 사용되며, 브라우저가 수집한 멀티미디어 화면을 WebRTC를 통해 라이브 스트리밍 서버로 푸시하는 역할을 합니다. 현재 카메라 푸시 스트리밍, 화면 녹화 푸시 스트리밍 및 로컬 미디어 파일 푸시 스트리밍을 지원합니다.
주의：
WebRTC 프로토콜을 사용하여 스트림을 푸시하며 각 푸시 도메인의 동시 푸시 스트림 수는 기본적으로 1000개로 제한됩니다. 제한 확장은 티켓 제출을 통해 신청할 수 있습니다.

기본 지식

연결 전 다음 기본 지식을 알아두어야 합니다.


푸시 스트리밍 주소 조합

Tencent Cloud CSS 서비스 사용 시, 푸시 스트리밍 URL은 아래와 같이 Tencent Cloud 표준에 부합하는 푸시 스트리밍 URL 형식을 충족해야 하며 네 부분으로 구성됩니다.





인증 Key 부분은 옵션이며, 링크 도용 방지가 필요한 경우 푸시 스트리밍 인증을 활성화하십시오. 구체적인 설명은 라이브 방송 URL 직접 조합을 참고하십시오.


브라우저 지원

LEB 푸시 스트리밍은 WebRTC를 기반으로 구현되며 WebRTC에 대한 운영체제 및 브라우저의 지원에 종속되어 있습니다.

또한 브라우저의 멀티미디어 화면 캡처 기능은 모바일에서 제대로 지원되지 않습니다. 예를 들어, 모바일 브라우저는 화면 녹화를 지원하지 않으며 iOS 14.3 이상에서만 사용자 카메라 장치 가져오기가 지원됩니다. 따라서 푸시 스트리밍 SDK는 주로 데스크톱 브라우저에 적합하며, 최신 버전의 chrome, Firefox 및 Safari 브라우저에서 LEB 푸시 스트리밍이 모두 지원됩니다.

모바일은 MLVB SDK 사용을 통한 푸시 스트리밍을 권장합니다.


연결 방법

1단계: 페이지 준비 작업

라이브 방송 푸시 스트리밍을 진행할 페이지(데스크톱)에 초기화 스크립트를 가져옵니다.

<script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.1.0.min.js" charset="utf-8"></script>
설명：
스크립트는 HTML의 body 부분에 삽입되어야 하며 head 부분에 삽입되면 오류가 보고됩니다.


2단계: HTML에 컨테이너 배치

로컬 멀티미디어 화면을 표시해야 하는 페이지 위치에 플레이어 컨테이너를 추가합니다. 즉, div를 넣고 이름을 id_local_video와 같이 지정하면 로컬 비디오 화면이 컨테이너에서 렌더링됩니다. 컨테이너의 크기 제어의 경우 div의 CSS 양식을 사용하여 제어할 수 있으며 샘플 코드는 다음과 같습니다.

<div id="id_local_video" style="width:100%;height:500px;display:flex;align-items:center;justify-content:center;"></div>


3단계: 라이브 방송 푸시 스트리밍

1. 푸시 스트리밍 SDK 인스턴스 생성: 전역 객체 'TXLivePusher'를 통해 SDK 인스턴스를 생성하고, 후속 작업은 해당 인스턴스를 통해 완료합니다.
var livePusher = new TXLivePusher();
2. 로컬 비디오 플레이어 컨테이너 지정: 로컬 비디오 플레이어 컨테이너 div를 지정하면 브라우저에서 수집한 멀티미디어 화면이 div로 렌더링됩니다.
livePusher.setRenderView('id_local_video');
설명：
'setRenderView'를 호출하여 생성된 video 요소는 기본적으로 소리가 나며, 음소거가 필요한 경우 video 요소를 직접 가져오기 하여 작업할 수 있습니다.
document.getElementById('id_local_video').getElementsByTagName('video')[0].muted = true;

3. 멀티미디어 품질 설정: 멀티미디어 스트림 수집 이전에 먼저 멀티미디어 품질을 설정하고, 사전 설정된 품질 매개변수가 요구 사항을 충족하지 않는 경우 개별적인 사용자 정의 설정을 진행할 수 있습니다.
// 비디오 품질 설정
livePusher.setVideoQuality('720p');
// 오디오 품질 설정
livePusher.setAudioQuality('standard');
// 프레임 레이트 사용자 정의
livePusher.setProperty('setVideoFPS', 25);
4. 스트림 수집 시작: 현재 카메라 디바이스, 마이크 디바이스 수집, 화면 녹화 및 로컬 미디어 파일 스트림 수집을 지원합니다. 멀티미디어 스트림이 성공적으로 수집되면 로컬로 수집된 멀티미디어 화면이 플레이어 컨테이너에서 재생됩니다.
// 카메라 켜기
livePusher.startCamera();
// 마이크 켜기
livePusher.startMicrophone();
5. 푸시 스트리밍 시작: Tencent Cloud LEB 푸시 스트리밍 주소를 전달하고 푸시 스트리밍을 시작합니다. 푸시 스트리밍 주소의 형식은 Tencent Cloud LVB URL을 참고하십시오. RTMP 푸시 스트리밍 주소 앞의 rtmp://를 webrtc://로 바꾸면 됩니다.
livePusher.startPush('webrtc://domain/AppName/StreamName?txSecret=xxx&txTime=xxx');
설명：
푸시 스트리밍 이전에 멀티미디어 스트림이 수집되었는지 확인하십시오. 그렇지 않으면 푸시 스트리밍 인터페이스 호출이 실패하게 됩니다. 멀티미디어 스트림 수집 후 자동 푸시 스트리밍을 구현하려면 콜백 이벤트 알림을 통해, 첫 번째 프레임이 성공적으로 수집되었다는 알림을 받으면 스트림을 다시 푸시합니다. 비디오 스트림과 오디오 스트림이 동시에 수집된 경우 첫 번째 비디오 프레임과 첫 번째 오디오 프레임의 콜백 알림을 모두 수신한 후 푸시 스트림밍을 진행해야 합니다.
var hasVideo = false;
var hasAudio = false;
var isPush = false;
livePusher.setObserver({
 onCaptureFirstAudioFrame: function() {
   hasAudio = true;
   if (hasVideo && !isPush) {
     isPush = true;
     livePusher.startPush('webrtc://domain/AppName/StreamName?txSecret=xxx&txTime=xxx');
   }
 },
 onCaptureFirstVideoFrame: function() {
   hasVideo = true;
   if (hasAudio && !isPush) {
     isPush = true;
     livePusher.startPush('webrtc://domain/AppName/StreamName?txSecret=xxx&txTime=xxx');
   }
 }
});

6. LEB 푸시 스트리밍 중지:
livePusher.stopPush();
7. 멀티미디어 스트림 수집 중지:
// 카메라 끄기
livePusher.stopCamera();
// 마이크 끄기
livePusher.stopMicrophone();


고급 전략

호환성

SDK는 WebRTC와 브라우저의 호환성을 확인하는 스태틱 메소드를 제공합니다.
TXLivePusher.checkSupport().then(function(data) {    // WebRTC 지원 여부    if (data.isWebRTCSupported) {        console.log('WebRTC Support');    } else {        console.log('WebRTC Not Support');    }    // H264 인코딩 지원 여부    if (data.isH264EncodeSupported) {        console.log('H264 Encode Support');    } else {        console.log('H264 Encode Not Support');    }});

콜백 이벤트 알림

SDK는 현재 콜백 이벤트 알림을 제공하고 있으며, Observer 설정을 통해 SDK 내부 상태 정보 및 WebRTC 관련 데이터 통계를 알아볼 수 있습니다. 
livePusher.setObserver({  // 푸시 스트리밍 경고 메시지  onWarning: function(code, msg) {    console.log(code, msg);  },  // 푸시 스트리밍 연결 상태  onPushStatusUpdate: function(status, msg) {    console.log(status, msg);  },  // 푸시 스트리밍 통계 데이터  onStatisticsUpdate: function(data) {    console.log('video fps is ' + data.video.framesPerSecond);  }});


디바이스 관리

SDK는 사용자가 디바이스 리스트 가져오기, 디바이스 전환과 같은 작업을 수행하는 데 도움이 되는 디바이스 관리 인스턴스를 제공합니다.
var deviceManager = livePusher.getDeviceManager();// 디바이스 리스트 가져오기deviceManager.getDevicesList().then(function(data) {  data.forEach(function(device) {      console.log(device.deviceId, device.deviceName);    });});// 카메라 디바이스 전환deviceManager.switchCamera('camera_device_id');

이전 주제: 기능 사례다음 주제: 딜레이 재생

도움말 및 지원

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

피드백