Web Player

이 가이드는 웹 애플리케이션에서 WebRTC Player SDK를 효과적으로 통합하고 활용하는 방법에 대한 자세한 지침을 개발자에게 제공합니다. 설정, 구성, 및 사용 단계를 설명하여 다양한 플랫폼에서 안정적인 비디오 재생을 보장합니다.

SDK 다운로드

WebRTC H5 Player SDK와 데모

SDK 사용 방법

1. 비디오 태그 생성

HTML에 <video> 태그를 생성하고 자동 재생 및 제어 기능을 추가하여 모던 브라우저에서 HTML5 비디오 재생을 지원합니다.

<video id="videotest" class="centeredVideo" controls autoplay width="1024" height="576">
    사용 중인 브라우저는 HTML5 비디오를 지원하지 않습니다.
</video>

2. JavaScript 파일 가져오기

HTML 문서에 SDK의 JavaScript 파일을 포함시켜 그 기능을 활용합니다.

<script src="wsrtcplayer.min.js"></script>

3. 이벤트 콜백 함수 설정

재생 이벤트를 효과적으로 관리하기 위해 강력한 이벤트 콜백 함수를 정의합니다. 이러한 함수는 재생 중단, 데이터 수신, 네트워크 응답과 같은 주요 상황을 처리하는 데 도움이 됩니다.

/***** 사용자 정의 콜백 함수
@argument arguments[0]: 이벤트 타입:
0 - 버퍼에서 재생 재개
1 - 버퍼링 이벤트 발생
2 - 서버가 세션 설명 프로토콜(SDP) 데이터로 응답
@argument arguments[1]: 서버로부터의 SDP 문자열, 이벤트 타입 2의 경우에만 관련 있음
*****/
function onEvent() {
    // 여기에서 강력한 이벤트 처리 로직을 추가합니다.
}
window.wsrtcplayer.callback = onEvent;

4. 플레이어 초기화

지정된 구성 옵션으로 플레이어 인스턴스를 초기화합니다.

var option = {
    element: document.getElementById('videotest'),
    customerID: "XXXX",
    listener: onEvent
};
var player = window.wsrtcplayer.createWSRTCPlayer(option);

5. 재생 시작

신호 URL을 사용하여 스트림 재생을 시작합니다.

// @param signal_url: 재생 스트림의 신호 URL
player.open(signal_url);

WebRTC에서는 신호 처리는 통신 세션을 설정, 관리 및 종료하는 데 사용되는 프로세스입니다. 신호 URL은 다음 형식으로 구성됩니다:

signal_url: http(s)://domain/appName/streamName.sdp

• domain: 스트리밍 서비스를 호스팅하는 도메인 이름.
• appName: 애플리케이션 이름. 다양한 유형의 라이브 스트림을 구분하는 데 사용됩니다. 이는 트랜스코딩, 스크린샷 및 녹화 설정의 기본 단위이기도 합니다.
• streamName: 라이브 스트림 이름. 서로 다른 스트림을 식별하는 데 사용됩니다.

6. 재생 중지

재생을 중지하려면 close 함수를 호출합니다.

player.close();

예시

구체적인 예시는 SDK 내의 demo.html을 참조하세요.

WebRTC 호환성

다음은 WebRTC 호환성 개요입니다:

참고: 크롬 엔진을 사용하는 브라우저는 해당 크롬 버전을 참조해야 합니다. 안드로이드 장치의 브라우저 호환성은 기기마다 다르며, 일부 모델은 H264 디코딩을 지원하지 않을 수 있습니다.