H5 라이브 스타터 (이론 부분)

이 문서는 재현 원숭이 2048 웹 사이트 ➻ https://www.mk2048.com/blog/blog.php?id=i1kia0h2bb

머리말

이 요약은 실제로 일주일 지난 올해, 회사는 내 시간 기록을 공유하는 기술로 바뀝니다. 개인 생각의 요금이 포럼을 많이 설정하는 태스크 위임 될 수에서 그 당시 회사가 적극적으로 라이브 방송 서비스를 준비하고, 내가 공유 할 수있는 간단한 기술했다. 나중에 부담하는 또 다른 동료를 만들기 위해 서비스를 라이브, 그는 연민, 라이브를 연습 할 기회가 없다. 음, ADO, 우리는 ~ 이론적 인 기사를 시작

배경

그것은 라이브 스테이지의 전례없는 발발로 이동하면서 라인에 라이브 클래스 응용 프로그램의 증가로 개발 된 모바일 단말기에 PC에서 라이브 볼 수 있지만, 대부분의 모바일 방송, 그 네이티브 클라이언트를 위해 달성 할 수 있었다 가장 중요한 또한 라이브 비디오를 재생할 수 H5 동안 주로하지만, H5 끝 모바일 방송은 또한, H5 빠르게 확산 등으로 대체 할 수없는 역할 및 장점을 쉽게 방출을 수행한다.

라이브 2016의 주요 광대역 공급자가 여론 확대 가격을 준수하고, 둘째, 대규모 자본이 방송 부문으로 유입하고, 반복적 인 업데이트 기술을 촉진 첫번째 때문에, 첫 해입니다. 시장, 가장 일반적으로 사용되는 물론 애플 HLS 방송 프로토콜 (H5 원래의 재생을 지원)의 소개, RTMP, HTTP-FLV, RTP 등.

라이브 비디오 파일 포맷과 프로토콜

비디오 파일 형식

비디오 파일이 사실을 포맷, 우리는 종종 우리는 종종 일반적인 형식, FLV, MP4, OGG 포맷으로 생활에서 대부분의 이야기입니다, 컨테이너 형식라고도합니다. 그것은 특정 비트를 특정 순서에 박스로 스트리밍하는 것으로 이해되어야한다. 그건 문제가 비디오 설치하는 다른 형식을 사용합니까?

대답은 문제가되지 않습니다,하지만 당신은 상자의 잠금을 해제하고 디코딩을 위해 해당 디코더를 찾는 방법을 알 필요가있다. 당신은,이에 따라, 이러한 MP4, OGV, WEBM 비디오 포맷 등, 한 나는이 해당 디코더와 플레이어를 가지고, 다음 문제가없는 그렇게한다면. 그런 다음 상자 자체가 문제가 있기 때문에 문제가있는 경우 일정 기간 후 최종 생성 된 파일은 실제로는 사용할 수 없습니다 내부 상자에 비디오 비트 스트림입니다.

그러나, 나는 그냥 정적 비디오 스트림으로 이해 상단 장소의 오해가있다. 비디오 등등 예를 들어, 라이브, 라이브 방송, 연속 재생을 필요로하고 상상해보십시오. 여기, 우리가 설명하는 TS / PS 스트림을했다.

  • PS (프로그램 스트림) : 정적 파일 스트림

  • TS (트랜스 포트 스트림) : 동적 파일 스트림

위의 두 가지로 이동 컨테이너 형식은, 사실, 비디오 비트 스트림은 다른 프로세스로 구성된다.

  • PS : 상자에 망명 전체 비디오 비트, 생성 된 고정 파일
  • TS : 다른 상자로 나뉘어 수신 된 비디오. 마지막으로 여러 상자 파일을 생성.

하나 개 이상의 상자가 손상된 경우, 결과는, PS 형식은 볼 수 없습니다하지만, TS는 프레임 또는 모자이크 효과를 건너 뜁니다. 둘 사이의 차이가 특정이있다 : 비디오에 대한 높은 내결함성, 그것은 PS를 선택할 것, TS 내결함성 동영상의 낮은 속도를 선택할 것이다.

HLS 프로토콜을 라이브

(HLS로 함) HTTP 라이브 스트리밍은 HTTP 비디오 스트리밍을 기반으로하는 프로토콜입니다. 이것은 애플에 의해 제안 된 라이브 스트리밍 프로토콜입니다. 현재, IOS와 안드로이드 버전은 높은 HLS를 지원합니다. HLS는 무엇인가? HLS 두 가지 주요 내용 .m3u8 .TS 파일이며, 파일을 재생할 수 있습니다.

HLS 프로토콜은 HTTP 기반으로하며 HLS를 제공하는 서버 두 가지 작업을 수행해야한다 :

인코딩 : MP3 또는 HE-AAC 인코딩 사운드 H.263 형식의 화상 부호화에서는, 결국 용기의 MPEG-2 TS (트랜스 포트 스트림)으로 패킹;

분할 : TS가 작은 파일은 TS 접미사에 좋은 컷만큼 파일을 코딩하고, 일반 텍스트 인덱스 파일 .m3u8를 생성

M3U8 파일을 사용하여 브라우저. M3U와 같은 오디오 포맷의 목록 M3U8, 당신은 단순히 M3U8 여러 재생 목록의 TS 파일을 포함하는 것입니다 생각할 수 있습니다. 플레이어별로 플레이어 순서가 모두 완료 한 다음 재생 목록 파일을 다시하고 다시 재생할 수 계속 최신 TS를 포함 얻기 M3U8 파일 요청을 찾습니다. 전체 프로세스는 라이브 지속적으로 업데이트 M3U8은 TS와 작은 파일의 무리에 의존하는 것입니다, M3U8 동적으로 업데이트해야합니다, TS는 CDN을 갈 수 있습니다.

여기, 우리는 클라이언트의 과정에 대해 강조 표시합니다. 우선, 그 이유는 그 내용이 실시간으로 업데이트되는 라이브 방송된다. HLS는 그것을 어떻게 완료?

우리가 사용하는 HLS에 직접 비디오에 포함 할 수 있습니다 :

<video autoplay controls>
    <source src="xxx.m3u8" type="application/vnd.apple.mpegurl" />
    <p class="warning">Your browser doesn't support video</p>
</video>

상기 설명에 따르면, 실제로 .m3u8의 요청 인덱스 파일이다. 이 파일은 예를 들어 관련 .TS 파일의 설명을 포함합니다 :

그러나,이 단지 매우 간단합니다, 그것은 라이브 스트림의 기능을 포함하지 않습니다. 사실, HLS의 전체 아키텍처로 나눌 수 있습니다 :
주로 현재 사용자의 대역폭, 해상도 및 디코더를 사용하는 스트리밍하는 결정 기타 조건에 따라입니다 수행 masterplaylist. 그래서, 더 나은 사용자 경험과 존재에 대한 마스터 재생 목록.

마스터 재생 목록 URL을 입력 할 때, 그 사용자는 마스터 재생 목록을 한 번 다운로드합니다. 그런 다음, 플레이어는 미디어 재생 목록을 결정 (즉, 하위 M3U8 파일) 현재의 환경을 기반으로. 재생에서, 사용자의 재생 조건이 변경되면, 플레이어는 해당 미디어 재생 목록을 전환합니다.

물론, HLS 지원 기능, 그냥 (특히 살고 적용) 선수 슬라이스하지, 그것은 또한 다른 적절한 기능을 포함하고 있습니다.

  • 사용하여 TS 파일 암호화 HTTPS

  • 고속 / 되감기

  • 광고 삽입

  • 다른 해상도의 비디오 스위칭

당신은 방화벽이 영향을받지 않을 것이라고 HLS 프로토콜은 잘 여전히 본질적으로 HTTP 요청 / 응답, 적응성 중 하나입니다 볼 수 있습니다. 그러나 그것은 또한 치명적인 약점이 있습니다 지연 현상이 매우 분명하다. 5 초마다의 TS는 분할에 의한 경우가 6 M3U8 넣어 지수의 TS, 30 초 이상 지연을 가져올 것이다. 각 TS의 길이를 줄이고, 인덱스 M3U8 감소 않는 지연의 수를 줄일 수 있지만, 더 자주 버퍼링으로 이어질 경우, 요청의 서비스 측의 압력이 두 배가 될 것이다. 당신은 실제 상황에 따라 타협 점을 찾을 수 있습니다.

참고 : M3U8 형식을 재생할 수없는 HTML5 비디오 태그를 사용하여 크롬 브라우저와 유사한에만 PC 측 HLS 지원 사파리 브라우저를, 직접적으로 인터넷에게 같은 더 성숙 프로그램의 일부를 사용 할 수 있습니다 sewise 플레이어를 MediaElement에, videojs-있는 contrib-HLS, jwplayer .

라이브 RTMP 프로토콜

(RTMP 함) 실시간 메시징 프로토콜은 이제 어도비에 속하는 매크로 미디어는 비디오 방송 프로토콜의 집합을 개발합니다. 그리고 같은 구별은 아이폰 OS 브라우저에서 재생할 수 없습니다 RTMP 플래시를 기반으로, HLS 라이브 비디오에 적용 할 수 있지만, 실시간 성능은 HLS보다 낫다. 따라서,이 프로토콜의 일반적인 사용은 비디오 스트림 서버에 푸시 된 비디오 스트림을 업로드합니다.

다음은 HLS 및 RTMP의 비교입니다 :

라이브 프로토콜 HTTP-FLV

RTMP 및 HTTP-FLV 유사한, FLV에 라이브 비디오 포맷 않습니다 스트리밍 배포하고 있습니다. 그러나 두 사람은 큰 차이가있다.

  • 직접 발사 긴 연결, 해당 FLV 파일을 다운로드
  • 간단한 헤더 정보

시장에서 사용할 수, 일반적으로 사용되는 HTTP-FLV 재생입니다. 휴대 전화의 끝이 지원되지 않습니다 때문에, 그래서, HTTP-FLV의 H5는 아픈 지점입니다. 그러나 지금 flv.js는 mediaSource를 구문 분석하는 브라우저의 높은 버전을 할 수 있습니다. HTTP-FLV는 사용이 매우 간단합니다. 그리고 HLS, 당신은 단지 연결을 추가 수 :

<object type="application/x-shockwave-flash" src="xxx.flv"></object>

기본 아키텍처 라이브

현재 일반적으로 라이브 달성 H5 및 서버 측과 기본 (안드로이드, IOS)를 기반으로, 더 성숙한 제품을 살,이 루틴은 기본적으로 다음 그림이다 :

전체 방송은 다음 조각으로 나눌 수 있습니다 :

  • 동영상 녹화 종료 : 일반적으로 오디오 및 비디오 입력 장치 또는 컴퓨터의 카메라 또는 마이크 휴대폰 측 이동 단말기가 현재 기반 모바일 비디오.

  • 비디오 재생 측 : 메인 플레이어 기본이었다 여전히 전화의 끝, 비디오 라벨의 H5가, 컴퓨터, 휴대 전화 측의 기본 플레이어에서 재생할 수 있습니다.

  • 비디오 서버 : nginx를 일반적으로 비디오 플레이어 스트리밍 서비스에 끝을 제공하는 동시에, 엔드 비디오 녹화를 제공하기 위해 비디오 소스를 수용 할 수있는 서버입니다.

구현으로 나눌 수 있습니다 현재 H5 비슷한 라이브 페이지, 약간의 기술적 인 어려움을 달성 : ① 달성하기 위해 ② 우려를 비디오 플레이어를 사용하여 비디오 배경 비디오 태그의 바닥은, 주석 모듈은 전송 된 새 메시지 WebScoket를 사용하고 DOM와 CSS3를 통해 실시간으로 수신 ③ 달성 엄지 CSS3 애니메이션을 사용

공세를 들어, 약간 더 복잡, 당신은 다음과 같은 점에 초점을 맞출 필요가 있습니다 :

  • 갑문 실시간은, 전송 및 렌더링 새로운 webscoket 공세와 실시간으로 수신 할 수 있습니다.

  • 브라우저를 지원하지 않습니다 Webscoket, 그것은 단지 실시간 프런트 엔드 공세를 얻기 위해 긴 폴링 또는 타이머를 다운 그레이드 요청을 보낼 수 있습니다.

  • 충돌 검출 및 애니메이션 (즉, 사격 겹치지 않는) 또는 렌더링 사격시 등에

H5 라이브 프로그램

사용 flv.js 사세요

  • 간략한 소개

flv.js는 Bilibli에서 오픈 소스 프로젝트입니다. 그것은 FLV 파일이 가능한 FLV 플래시 플레이어의 도움없이, 기본 HTML5 비디오 태그 플레이 오디오 및 비디오 데이터에 브라우저를 공급 구문 분석합니다.

  • 우월

네이티브 비디오 라벨의 브라우저가 하드웨어 가속, 좋은 성능, 고해상도 지원을 사용하기 때문에. 모두 녹화하고 살고 지원합니다. 플래시에 의존 제거하십시오.

  • 의존 브라우저

flv.js 브라우저에 의존 호환성 목록을 제공합니다

1, HTML5 비디오

2, 미디어 소스 확장

3 웹 소켓

4, HTTP FLV는 : 或 스트림을 가져

  • 원칙

flv.js에만 데이터를 디코딩하는 기본 JS FLV로 FLV 포맷의 오디오 및 비디오 데이터를 획득 한 후, 하나의 일을 한 다음 미디어 소스 확장 API에 의해 기본 HTML5 비디오 태그를 공급. (HTML5는 네이티브 재생 MP4 / WEBM 형식을 FLV를 지원하지 않습니다 지원)

왜 서버에서 FLV 변환을 얻을, 주변을 flv.js해야하고 디코딩 한 후 비디오 라벨을 공급? 다음과 같은 이유 :

현재 라이브 프로그램과 호환 1 : 대부분의 프로그램은 오디오 살고 비디오 서비스는 오디오 및 비디오 데이터 전송을위한 FLV 컨테이너 형식을 사용하고 있습니다.

2, 간단한,보다 빠르고 편리하게 해결하기 위해 그들에 비해 FLV 컨테이너 형식의 MP4 형식입니다.

  • 지원 솔루션

PC 단

그것은 약간의 지연 때문에 우선적으로, HTTP-FLV를 사용하여 1, 성능이 나쁜 1080P는 매우 부드러운 없습니다.

2, 플래시의 사용이 flv.js 플레이어 RTMP 스트리밍 방송을 지원하지 않습니다에. 플래시 호환성이 매우 좋다,하지만 성능 차이는 기본적 많은 브라우저에서 사용할 수 없습니다.

3, HLS도 사용할 수있는 플래시 호환을 사용하지 않지만, PC 측에만 Safari는 HLS를 지원합니다

모바일 끝

이 때문에 1, 우선적으로는 약간의 지연, 지원 장비 성능 실행이 HTTP-FLV가 충분히 flv.js, HTTP-FLV를 사용.

2, HLS의 사용에 flv.js을 지원하지 않지만, HLS는 매우 큰 지연.

이동 단말은 플래시를 지원하지 않기 때문에 3, HLS, 그것은 살 수 없다 지원하지 않습니다.

음, 결국, 후속 관행 내가 마음보다, 지금 느낌 독서를 업데이트가있는 경우 ~ 항목 이론적 기사입니다

추천

출처www.cnblogs.com/qianduanwriter/p/11789635.html