요구 사항 • 게시 • 구독
RED5 PRO HTML 스트리밍 테스트 베드
이 저장소에는 Red5 Pro WebRTC SDK의 테스트 및 참조에 사용할 수있는 여러 가지 예제가 포함 된 간단한 프로젝트가 포함되어 있습니다.
요구 사항
클라이언트 브라우저 (Mobile & Desktop)가 연결할 수있는 기능, RED5 Pro Server 웹 (또는 로컬)에 액세스 할 수있는 기능이 필요합니다.
자세한 내용은 https://www.red5.net/을 방문하십시오.
브라우저 컴퓨팅 성
RED5 Pro WebRTC SDK는 스트리밍 솔루션 (게시 및 구독 모두)에 WebRTC를 활용하는 것을 목표로하지만, 기본적으로 지원하는 브라우저 (예 : 모바일 및 데스크톱 Safari)에 대한 HLS 지원을 제공합니다.
브라우저 컴퓨팅 가능성에 대한 자세한 내용은 caniuse.com의 WebRTC 피어 연결 정보에서 볼 수 있습니다.
발행자
Red5 Pro의 맥락에서 출판사라는 용어는 방송 스트림을 생산하는 클라이언트를 나타냅니다. SDK의 두 가지 유형의 인스턴스가 게시자를 시작하는 데 활용할 수 있습니다.
-
WHIPClient WHIPClient 는 WEBRTC -HTTP 섭취 PROTOCL에 의존하여 일련의 HTTP/S 요청을 통해 연결을 설정합니다. -
RTCPublisher RTCPublisher 는 Broadcast 세션을 설정하기 위해 WebSocket 연결에 의존합니다.
WHEPClient 연결 순서는 매우 빠르며 - ~ 1 초 - RTCPublisher WebSocket 에 의존하기 때문에 스트림에 연결하는 데 약 3-5 초가 걸릴 수 있습니다.
구독자
Red5 Pro의 맥락에서 가입자라는 용어는 이미 라이브 방송 스트림을 소비하고 재생하는 클라이언트를 말합니다. 가입자를 시작하는 데 사용될 수있는 SDK의 세 가지 유형의 인스턴스가 있습니다.
-
WHEPClient WHEPClient WEBRTC -HTTP EGRESS 프로토콜에 의존하여 일련의 HTTP/S 요청을 통해 연결을 설정합니다. -
RTCSubscriber RTCSubscriber 는 WebSocket 연결에 의존하여 방송 세션을 설정합니다. -
HLSSubscriber HLSSubscriber 는 HLS 스트림 (예 : 모바일 및 데스크탑 사파리)을 재생하는 기본 기능에 의존합니다.
WHEPClient 연결 순서는 매우 빠릅니다 - ~ 1 초 - RTCPublisher 는 WebSocket 에 대한 의존으로 인해 스트림에 연결하는 데 약 3-5 초가 걸릴 수 있습니다.
HLSSubscriber 연결 시퀀스를 거치지 않고 서버에서 직접 HL을 스트리밍하지만 라이브 세그먼트의 길이로 인해 최대 6 초의 대기 시간이 있습니다.
참고 : WHIPClient 및 WHEPClient Red5 Pro Webrtc SDK의 11.0.0 릴리스에서 도입되었습니다.
설정
서버 인스턴스의 IP 주소를 가리 키려면 설정 페이지에서 호스트 필드를 수정해야합니다. 그렇지 않은 경우, 예제는 빌드 할 때 작동하지 않습니다. 서버를 로컬로 실행하는 경우 컴퓨터와 모바일 장치가 동일한 WiFi 네트워크에 있어야합니다.
TLS 및 CORS에 대한 참고 사항
이러한 예 중 일부, 특히 WebRTC를 사용하여 출판과 관련된 예제 중 일부는 TLS에서 실행되어 HTTPS를 통해 제공되어야한다는 점에 유의해야합니다. localhost 에서 예제를 실행하는 경우 문제가 표시되지 않지만 서버가 원격으로 배포되면 이러한 예제가 HTTPS를 통해 제공되며 적절한 크로스 원산지 리소스 공유 (CORS) 설정이 서버에 대해 정의되어 있는지 확인해야합니다.
- Red5 Pro 및 SSL에 대해 자세히 알아보십시오.
- Cors에 대한 자세한 정보.
지침
서버 인스턴스의 IP 주소를 정의하려면 브라우저에서 테스트 베드 웹 앱을 열고 시작시 표시되지 않으면 설정 페이지로 이동하십시오. 설정 에 액세스하려면 상단에있는 예제 목록에서 홈 아이템을 선택하십시오.
서버 인스턴스의 IP로 호스트를 정의하려면 호스트 필드 F 양식을 클릭하고 로컬 또는 원격 IP 주소 (예 : 10.0.0.5 , 76.199.199.199 에 입력하십시오.
힌트 : 포트 5080 (예 : 로컬로 시작한 경우 http://localhost:5080 )에서 서버 인스턴스의 방문 페이지를 열 수 있으며 페이지는 오른쪽 상단에 IP를 표시합니다.
WHIP/WHEP 설정 옵션
설정 페이지에서 WHEP/WHEP를 선호하도록 선택할 수 있습니다. 이 옵션을 선택함으로써 모든 테스트는 각각 게시 및 가입을 위해 WHEPClient 및 WHIPClient 사용합니다.
WHIP/WHEP 옵션을 선택 해제하기로 결정한 경우 모든 테스트는 각각 게시 및 서브 시퀀싱을 위해 RTCPublisher 및 RTCSubscriber 사용으로 되돌아갑니다. 이러한 인스턴스는 협상 단계에서 브라우저에서 WebSocket 지원이 필요합니다. 연결이 이루어지면 메시징 전송 시스템이 RTCDataChannel 로 전환되고 WebSocket이 닫힙니다.
예
출판
| 발행자 |
|---|
WEBRTC를 사용하는 기본 게시자 예제, WEBRTC-HTTP 섭취 (일명, WHIP ) 또는 WebSockets 사용하여 방송 연결을 설정하는 옵션을 사용합니다. |
| 추가 |
|---|
| Append 옵션을 사용하여 서버에 스트림을 녹음하는 것을 보여줍니다. |
| 입증 |
|---|
| 출판을위한 단순한 부식 플러그 인 인증을 보여줍니다. |
| 카메라 소스 |
|---|
| 원하는 카메라를 선택하는 것을 보여줍니다. |
| 카메라 스왑 |
|---|
모바일 장치의 후면 및 전면 카메라를 기반으로 한 facingMode 조건에 대한 정의 된 video 소스가있는 MediaStream 대한 요청을 보여줍니다. |
| 사용자 정의 설정 |
|---|
| WEBRTC 게시자의 미디어 방송 설정을 사용자 정의 할 수 있습니다. |
| 사용자 정의 오디오 설정 |
|---|
| WebRTC 게시자의 오디오 설정을 사용자 정의 할 수 있습니다. |
| 미디어 스트림 스왑 |
|---|
WEBRTC 기반 게시자를 위해 다른 카메라 소스를 동적으로 교체하기 위해 replaceTrack 사용하는 것을 보여줍니다. |
| 이미지 캡처 |
|---|
| 출판중인 라이브 비디오의 이미지를 캡처하는 것을 보여줍니다. |
| 무음 |
|---|
| 라이브 비디오가 출판 된 음소거 및 미확인 오디오. |
| 기록 |
|---|
| VOD (Deady-on-Demand) 재생을 위해 서버에 스트림을 녹음하는 것을 보여줍니다. |
| 원격 통화 |
|---|
| 구독 한 모든 고객에게 원격 메시지를 보내는 것을 보여줍니다. |
| 왕복 인증 |
|---|
| Red5 Pro와의 왕복 인증을 활용하는 예. |
| 스크린 공유 |
|---|
Chrome 및 Firefox 의 화면 공유 기능을 활용하는 예 .
구독 스크린 공유 예제와 함께 사용합니다. |
| 공유 객체 |
|---|
| 원격 공유 객체를 사용하여 연결된 클라이언트간에 정보를 보내고받는 것을 보여줍니다. |
| 소셜 미디어 스트림 푸시 |
|---|
| 소셜 미디어 플랫폼으로 라이브 스트림을 재 파장하는 예. |
| VP8 |
|---|
| Publish에서 VP8 Video Codec을 요청하는 예 |
게시 - 스트림 관리자 예제
| 스트림 관리자 |
|---|
| Red5 Pro Stream Manager API를 사용하여 자동화 클러스터의 원점에 게시합니다. |
| 스트림 관리자 프록시 |
|---|
| Red5 Pro Stream Manager를 SSL WebSocket 프록시로 사용하여 WebRTC를 자동화 클러스터의 원점에 게시합니다. |
| 스트림 관리자 프록시 카메라 선택 |
|---|
| Red5 Pro Stream Manager를 SSL Websocket 프록시로 사용하여 Camera Select를 사용하여 WebRTC를 자동화 클러스터의 원점에 게시합니다. |
| 스트림 관리자 프록시 설정 |
|---|
| Red5 Pro Stream Manager를 SSL WebSocket 프록시로 사용하여 사용자 지정 비디오 설정을 자동화하는 클러스터의 원점에 게시하기 위해 SSL WebSocket 프록시로 사용합니다. |
| 오디오가있는 스트림 관리자 프록시 설정 |
|---|
| SSL Websocket 프록시로 Red5 Pro Stream Manager를 사용하여 사용자 지정 오디오 설정을 자동화하는 클러스터의 원점에 게시하기위한 SSL Websocket 프록시로 사용합니다. |
| 스트림 관리자 프록시 왕복 authenticaion |
|---|
| Red5 Pro Over Stream Manager Proxy와 함께 왕복 인증을 활용하는 예. |
| 스트림 관리자 프록시 화면 공유 |
|---|
| Chrome 및 Firefox 의 화면 공유 기능을 활용하는 예 . Stream Manager Proxy 구독 화면 공유 예제와 함께 사용합니다. |
| 스트림 관리자 프록시 소셜 미디어 스트림 푸시 |
|---|
| 소셜 미디어 플랫폼으로 라이브 스트림을 재 파장하는 예. |
| 스트림 관리자 트랜스 코드 제공 양식 |
|---|
| ABR 방송의 스트림 관리자에게 새로운 조항을 쉽게 게시 할 수있는 쉬운 양식을 제공합니다. 조항이 게시되면 좋아하는 미디어 인코더를 사용하여 변형을 방송하십시오. |
| 스트림 관리자 프록시 트랜스 코더 |
|---|
| ABR 방송의 스트림 관리자에게 새로운 조항을 게시하고 트랜스 코더를 사용하여 단일 변형 방송을 시작하는 쉬운 양식을 제공합니다. |
| 인증이있는 스트림 관리자 프록시 트랜스 코더 |
|---|
| ABR 방송의 스트림 관리자에게 새로운 조항을 게시하고 인증을 포함하여 트랜스 코더를 사용하여 단일 변형 방송을 시작하는 쉬운 양식을 제공합니다. |
| 스트림 관리자 프록시 유효성 검사 |
|---|
| Red5 Pro Over Stream Manager 프록시와 함께 유효성 검사 매개 변수를 사용하는 예. |
멀티
| 양방향 |
|---|
| 구독 중에 동시에 출판을 보여줍니다 - 대화를 허용합니다. 스트림 감지 및 자동 연결을 포함합니다. |
| 양방향 스트림 관리자 프록시 |
|---|
| 프록시 사용을 포함하여 스트림 관리자를 통한 양방향 예제. 스트림 감지 및 자동 연결을 포함합니다. |
| 회의 |
|---|
| RED5 Pro를 사용한 다당 통신을 보여줍니다. 또한 공유 객체를 공유 객체를 알림으로 사용하여 파티의 추가 및 제거를 인식합니다. |
| 회의 - 스트림 관리자 |
|---|
| Red5 Pro Over Stream Manager를 사용한 다당 통신을 보여줍니다. 또한 공유 객체를 공유 객체를 알림으로 사용하여 파티의 추가 및 제거를 인식합니다. |
| 공유 객체 (Websockets 만) |
|---|
| Red5 Pro Html SDK의 WebSocket 프록시를 통해 공유 객체의 사용을 보여줍니다. |
가입
| 구독자 |
|---|
장애 조치가있는 기본 가입자 예제.
즉, WEBRTC 브라우저 지원이 없으면 첫 번째 플래시 플레이어가 감지 된 다음 HLS를 감지합니다. |
| 오디오 만 |
|---|
| 오디오 전용 스트림의 재생을 보여줍니다. |
| 입증 |
|---|
| 구독을위한 단순한 보증 플러그 인 인증을 보여줍니다. |
| 이미지 캡처 |
|---|
| 소비되는 라이브 비디오의 이미지를 캡처하는 것을 보여줍니다. |
| 무리 |
|---|
| RED5 Pro 클러스터 API에서 IP에 액세스하여 라이브 스트림에 서브를 작성하는 것을 보여줍니다. |
| HLS |
|---|
| 이것은 HLS 만 사용하여 스트림을 구독하는 예입니다. HLS가 브라우저에서 기본적으로 지원되지 않는 경우 HLS.JS 3 파티 라이브러리가 사용됩니다. |
| 이미지 캡처 |
|---|
이 예제는 CanvasRenderingContext2D 의 drawImage API를 사용하여 여전히 재생을 캡처하는 것을 보여줍니다. |
| 다시 연결하십시오 |
|---|
| Red5 Pro HTML SDK의 장애 조치 메커니즘을 보여 주면 브라우저 지원을 기반으로 가입자를 선택하고 브로드 캐스트 또는 연결 손실의 닫기시 자동 연결을 제공합니다. |
| 원격 통화 |
|---|
| 방송사로부터 원격 메시지를받는 것을 보여줍니다. |
| 유효하지 않은 이름으로 다시 시도하십시오 |
|---|
강화 후 subscribe 요청의 오류에 따라 WebSocket 연결을 유지하기 위해 가입자의 maintainConnectionOnSubscribeErrors 구성 속성을 사용합니다. |
| 왕복 인증 |
|---|
| 스트림 관리자 프록시 오버 스트림 관리자와 함께 라운드 트립 인증을 활용하는 예 |
| 스크린 공유 |
|---|
| Chrome 및 Firefox 의 화면 공유 기능을 활용하는 예 . 게시 화면 공유 예제와 함께 사용합니다. |
| 공유 객체 |
|---|
| 원격 공유 객체를 사용하여 연결된 클라이언트간에 정보를 보내고받는 것을 보여줍니다. |
| 대기 |
|---|
| 대기 API를 사용하여 MediaStream에서 비디오 및 오디오 데이터를 수신하는 동안 "일시 중지"를 요청하면서 클라이언트와 서버에 대한 연결을 유지하는 예입니다. |
| 스트림 스위치 |
|---|
| WebRTC를 통해 현재 가입자의 스트림을 다른 라이브 스트림으로 전환하는 것을 보여주는 예. |
| 두 개의 스트림 |
|---|
Stream1 Name 과 Stream 2 Name 변수를 사용하여 설정 페이지에서 2 개의 스트림을 구독하는 예입니다. |
| 비디오 음소거 |
|---|
| 비디오 스트림 "음소거 된"방송에 가입하는 것을 보여주는 예. |
| VP8 |
|---|
| 재생 스트림에 대한 VP8 비디오 인코딩 요청을 보여줍니다. |
구독 - 스트림 관리자 예제
| 스트림 관리자 |
|---|
| Red5 Pro Stream Manager API를 활용하고 SSL Websocket 프록시 역할을하여 Live Stream을 구독하기 위해 Edge Server IP에 액세스하는 것을 보여줍니다. |
| 스트림 관리자 프록시 |
|---|
| Red5 Pro Stream Manager API를 활용하여 Edge Server IP에 액세스하여 라이브 스트림을 구독합니다. |
| 스트림 관리자 프록시 재 연결 |
|---|
| Red5 Pro HTML SDK의 장애 조치 메커니즘을 보여 주면 브라우저 지원을 기반으로 가입자를 선택하고 브로드 캐스트 또는 연결 손실의 닫기시 자동 연결을 제공합니다. |
| 스트림 관리자 프록시 지역 |
|---|
| Red5 Pro Stream Manager API를 활용하여 Edge Server IP에 액세스하여 라이브 스트림을 구독합니다. |
| 스트림 관리자 프록시 왕복 여행 인증 |
|---|
| 왕복 인증, 지정된 지역을 사용한 가입을 보여줍니다. |
| 스트림 관리자 프록시 트랜스 코더 (RTC) |
|---|
| Red5 Pro Stream Manager API를 활용하여 조항 및 에지 서버 IP에 액세스하여 적응 형 비트 레이트 제어 기능을 갖춘 라이브 WEBRTC 기반 스트림에 가입합니다. |
| 스트림 관리자 프록시 트랜스 코더 (RTMP) |
|---|
| Red5 Pro Stream Manager API를 활용하여 조항에 액세스하고 Edge Server IP를 사용하여 적응 형 비트 레이트 제어 기능을 갖춘 라이브 플래시 기반 스트림에 가입합니다. |
| 스트림 관리자 프록시 트랜스 코더 (HLS) |
|---|
| Red5 Pro Stream Manager API를 활용하여 조항 및 에지 서버 IP에 액세스하여 적응 형 비트 레이트 제어 기능을 갖춘 라이브 HLS 기반 스트림에 가입합니다. |
| 스트림 관리자 프록시 화면 공유 |
|---|
| Chrome 및 Firefox 의 화면 공유 기능을 활용하는 예 . 게시 화면 공유 예제와 함께 사용합니다. |
믹서 - 스트림 관리자 예제
| 스트림 관리자 프록시 컨퍼런스 참가자 |
|---|
| Red5 Pro Stream Manager API를 활용하여 단일 반환 스트림과 함께 화상 회의에 참여하는 것을 보여줍니다. |
| 스트림 관리자 프록시 컨퍼런스 호스트 |
|---|
| Red5 Pro Stream Manager API를 활용하여 단일 반환 스트림으로 화상 회의를 호스팅하고 관리합니다. |
| 스트림 관리자 그리드 구성 호스트 |
|---|
| Red5 Pro Stream Manager API를 사용하여 여러 라이브 스트림의 구성을 단일 스트림으로 작성하고 관리합니다. |
| 스트림 관리자 2x2 그리드 레이아웃 예제 |
|---|
| 라이브 스트림 세트를 2x2 그리드로 구성하여 Red5 Pro 믹서에로드하여 최대 4 개의 스트림으로 구성을 생성 할 수 있습니다. |
| 스트림 관리자 3x3 그리드 레이아웃 예제 |
|---|
| 라이브 스트림 세트를 3x3 그리드로 구성하여 Red5 Pro 믹서에로드하여 최대 9 개의 스트림으로 구성을 생성 할 수 있습니다. |
| 스트림 관리자 NXN 그리드 레이아웃 예제 |
|---|
| 새로운 스트림이 추가 될 때 자동으로 크기를 조정할 수있는 NXN 그리드로 라이브 스트림 세트를 작성하는 것을 보여줍니다. 페이지를 RED5 PRO 믹서에로드하여 많은 스트림으로 구성을 생성 할 수 있습니다. |
| 스트림 관리자 컨퍼런스 레이아웃 |
|---|
| 발표자가 강조 표시되는 화상 회의를 위해 일련의 라이브 스트림을 집중된 레이아웃으로 구성하는 것을 보여줍니다. 페이지를 Red5 Pro 믹서에로드하여 단일 리턴 스트림으로 화상 회의를 만들 수 있습니다. |
메모
- 가입자 예를 들어, 설정 의 스트림 1 이름 필드를 기반으로 라이브 스트림이 게시되고 명명되어 있어야합니다. 다른 장치를 사용 하여이 WebApp을 사용하여 스트리밍을 시작하거나 웹 브라우저를 사용하여 Flash, http : // your_red5_pro_server_ip : 5080/live를 통해 게시 할 수도 있습니다.
- http : // your_red5_pro_server_ip : 5080/live/subscribe.jsp로 탐색하여 활성 스트림 목록을 볼 수 있습니다 (게시를 시작한 후이 페이지를 새로 고침해야 함).
- http : // your_red5_pro_server_ip : 5080/을 열고 페이지 상단 오른쪽에서 인쇄 된 IP를 찾아 설정 의 호스트 필드에서 사용하려면 Red5 Pro Server 설치의 서버 IP에 액세스 할 수 있습니다.
- 서버를 로컬로 실행하지 않는 한 WebRTC Publishing에는 유효한 SSL 인증서가 필요합니다.
