HTML5에서 비디오 라이브 방송 기능을 구현하기 위한 아이디어에 대한 자세한 설명

얼마 전 저는 현재 인기 있는 비디오 라이브 방송에 대해 조사하고 탐구하고, 전반적인 구현 프로세스를 이해하고, 모바일 HTML5 라이브 방송의 타당성을 탐색하는 시간을 가졌습니다.

현재 WEB의 주류 비디오 라이브 방송 솔루션은 HLS와 RTMP인 것으로 나타났습니다. 모바일 WEB 끝은 현재 HLS를 기반으로 하는 반면(HLS에는 대기 시간 문제가 있으며 RTMP는 video.js의 도움으로 사용할 수도 있음) PC 쪽은 더 나은 실시간 성능을 갖춘 RTMP를 기반으로 하며, 이 두 가지 비디오 스트리밍 프로토콜을 중심으로 H5 라이브 방송 테마를 공유하기 시작합니다.

HTTP 라이브 스트리밍(줄여서 HLS)은 Apple에서 구현한 HTTP 기반 비디오 스트리밍 프로토콜입니다. Mac OS의 QuickTime 및 Safari와 iOS의 Safari는 모두 HLS를 지원합니다. MPlayerX 및 VLC와 같은 일부 일반 클라이언트도 HLS 프로토콜을 지원합니다.

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

인코딩: 이미지를 H.263 형식으로 인코딩하고, 사운드를 MP3 또는 HE-AAC로 인코딩한 후 최종적으로 MPEG-2 TS(전송 스트림) 컨테이너로 패키징합니다. 분할: 인코딩된 TS 파일을 동일한 길이로 자릅니다. 접미사가 붙은 작은 파일 ts를 실행하고 .m3u8 일반 텍스트 인덱스 파일을 생성합니다. 브라우저는 m3u8 파일을 사용합니다. m3u8은 오디오 목록 형식 m3u와 매우 유사합니다. m3u8은 여러 ts 파일이 포함된 재생 목록으로 간단히 생각할 수 있습니다. 플레이어는 순서대로 하나씩 재생한 다음, 모두 재생한 후 m3u8 파일을 요청하고, 계속 재생하려면 최신 ts 파일이 포함된 재생 목록을 얻으며, 주기가 다시 시작됩니다. 전체 라이브 방송 프로세스는 지속적으로 업데이트되는 m3u8에 의존하며 m3u8은 동적으로 업데이트되어야 하며 ts는 CDN을 통과할 수 있습니다. 일반적인 m3u8 파일 형식은 다음과 같습니다.

 #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000gear1/prog_index.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=311111gear2/prog_index.m3u8#EXT-X -STREAM -INF:프로그램-ID=1, BANDWIDTH=484444gear3/prog_index.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=737777gear4/prog_index.m3u8

HLS 프로토콜의 본질은 여전히 ​​하나의 HTTP 요청/응답이므로 적응성이 좋고 방화벽의 영향을 받지 않는다는 것을 알 수 있습니다. 그러나 여기에는 치명적인 약점도 있습니다. 지연이 매우 명백하다는 것입니다. 각 ts를 5초로 나누고 하나의 m3u8에 6개의 ts 인덱스가 포함되어 있으면 최소 30초의 지연이 발생합니다. 각 ts의 길이를 줄이고 m3u8의 인덱스 수를 줄이면 지연은 확실히 줄어들지만 버퍼링이 더 자주 발생하고 서버에 대한 요청 압력도 기하급수적으로 증가합니다. 따라서 실제 상황에 따라서만 타협점을 찾을 수 있습니다.

HLS를 지원하는 브라우저의 경우 다음을 작성하여 재생하세요.

 <video src=./bipbopall.m3u8″ 높이=300″ 너비=400″ preload=auto autoplay=autoplay loop=loop webkit-playsinline=true></video>

참고: HLS는 HTML5 비디오를 사용하는 Chrome 브라우저와 유사하게 PC의 Safari 브라우저만 지원합니다.

태그는 m3u8 형식을 재생할 수 없습니다. sewise-player, MediaElement, videojs-contrib-hls 및 jwplayer와 같은 비교적 성숙한 솔루션을 인터넷에서 직접 사용할 수 있습니다.

실시간 메시징 프로토콜(RTMP)은 Macromedia에서 개발했으며 현재는 Adobe에 속해 있는 일련의 비디오 라이브 방송 프로토콜입니다. 이 솔루션을 사용하려면 Adobe Media Server와 같은 전문적인 RTMP 스트리밍 서비스를 구축해야 하며 브라우저에서 플레이어를 구현하는 데는 Flash만 사용할 수 있습니다. 실시간 성능이 매우 좋고 지연도 매우 적지만, 모바일 WEB 재생을 지원하지 못한다는 단점이 있습니다.

iOS의 H5 페이지에서는 재생할 수 없지만 기본 iOS 애플리케이션에 대한 디코딩 및 구문 분석을 직접 작성할 수 있습니다. RTMP는 대기 시간이 짧고 실시간 성능이 뛰어납니다. 브라우저 측, HTML5 비디오

태그는 video.js를 통해 얻을 수 있는 RTMP 프로토콜 비디오를 재생할 수 없습니다.

 <link href=http://vjs.zencdn.net/5.8.8/video-js.css rel=stylesheet><video id=example_video_1″ class=video-js vjs-default-skin은 preload=auto width=640을 제어합니다 높이=264 루프=루프 webkit-playsinline><소스 src=rtmp://10.14.221.17:1935/rtmplive/home type='rtmp/flv '></video><script src=http://vjs.zencdn.net/5.8.8/video.js>< /script><script>videojs.options.flash.swf = 'video.swf ';videojs('example_video_1′).ready(function() {this.play();});</script>

현재 라이브 방송 표시 형식은 일반적으로 YY Live 및 Yingke Live와 같은 페이지가 지배합니다. 해당 구조는 세 가지 레이어로 나눌 수 있습니다.

① 배경 영상 레이어

② 팔로우 및 댓글 모듈

③ 애니메이션을 좋아한다

현재 H5는 생방송 페이지와 유사하며, 구현은 기술적으로 어렵지 않습니다.

① 하단의 동영상 배경은 동영상 태그를 이용하여 재생하는 것입니다.

② 팔로우 및 댓글 모듈은 WebScoket을 사용하여 DOM 및 CSS3를 통해 실시간으로 새로운 메시지를 주고 받습니다.

③ CSS3 애니메이션 좋아요 및 활용

생방송 형식을 이해한 후, 생방송 과정을 전체적으로 이해해 봅시다.

전체 라이브 방송 프로세스는 대략 다음과 같이 나눌 수 있습니다.

영상 수집 끝: 컴퓨터의 오디오 및 영상 입력 장치일 수도 있고, 휴대폰의 카메라나 마이크일 수도 있습니다. 현재는 휴대폰 영상이 주된 것입니다.

라이브 스트리밍 비디오 서버: Nginx 서버는 비디오 녹화 측에서 전송되는 비디오 스트림(H264/ACC 인코딩)을 수집하고 이를 서버 측에서 구문 분석 및 인코딩한 후 RTMP/HLS 형식의 비디오 스트림을 비디오 재생 측으로 푸시합니다.

비디오 플레이어: 컴퓨터의 플레이어(QuickTime Player, VLC), 휴대폰의 기본 플레이어 또는 H5의 비디오 태그 등이 될 수 있습니다. 현재 휴대폰의 기본 플레이어가 주요 플레이어입니다.

(웹 프론트엔드 학습교류회 : 328058344. 채팅은 금지되어 있습니다. 관심없으시면 들어가지 마세요!)

H5 영상녹화에는 실시간 음성대화나 영상대화를 위해 웹브라우저를 지원하는 기술인 강력한 webRTC(Web Real-Time Communication)를 사용할 수 있다. 단점은 PC의 크롬에서만 잘 지원된다는 점이다. 모바일 장치에서는 그다지 좋지 않습니다.

webRTC를 이용한 영상 녹화의 기본 과정

① window.navigator.webkitGetUserMedia()를 호출합니다.

사용자의 PC 카메라 영상 데이터를 가져옵니다.

② 얻은 비디오 스트림 데이터를 window.webkitRTCPeerConnection으로 변환합니다.

(비디오 스트리밍 데이터 형식).

③ 웹스코켓을 이용하세요

비디오 스트리밍 데이터를 서버로 전송합니다.

알아채다:

Google이 WebRTC를 홍보하고 많은 성숙한 제품이 등장했지만 대부분의 모바일 브라우저는 아직 webRTC를 지원하지 않으므로(최신 iOS 10.0은 지원하지 않음) 실제 비디오 녹화는 여전히 클라이언트(iOS, Android)에 따라 달라지며, 그 효과는 더 좋아질 것입니다.

WebRTC 지원

WebRTC 지원

iOS 기본 애플리케이션은 카메라를 호출하여 비디오 프로세스를 녹화합니다.

① 오디오 및 비디오 수집의 경우 AVCaptureSession 및 AVCaptureDevice를 사용하여 원본 오디오 및 비디오 데이터 스트림을 수집할 수 있습니다.

② 비디오는 H264, 오디오는 AAC로 인코딩 iOS에는 오디오와 비디오를 인코딩하기 위한 캡슐화된 인코딩 라이브러리(x264 인코딩, faac 인코딩, ffmpeg 인코딩)가 있습니다.

③ 인코딩된 오디오 및 비디오 데이터를 패킷으로 조립합니다.

④ RTMP 연결을 설정하고 서버에 푸시합니다.

5. Ng 구축

nginx, nginx-rtmp-module 설치

① 먼저 nginx 프로젝트를 로컬로 복제합니다.

브루 탭 홈브류/nginx

② nginx-rtmp-module 실행 및 설치

양조 설치 nginx-full –with-rtmp-모듈

2. nginx.conf 구성 파일, RTMP 및 HLS 구성

nginx.conf 구성 파일(path/usr/local/etc/nginx/nginx.conf)을 찾아 RTMP 및 HLS를 구성합니다.

① http 노드 앞에 rtmp 구성 콘텐츠를 추가합니다.

② http에 hls 구성 추가

nginx 서비스를 다시 시작하고 브라우저에 http://localhost:8080을 입력한 후 nginx가 성공적으로 다시 시작되었음을 확인하는 환영 인터페이스가 나타나는지 확인합니다.

nginx -s 다시 로드

서버는 비디오 녹화 측에서 전송된 비디오 스트림을 수신하면 이를 구문 분석 및 인코딩하고 RTMP/HLS 형식 비디오 스트림을 비디오 플레이어에 푸시해야 합니다. x264 인코딩, faac 인코딩, ffmpeg 인코딩 등과 같이 일반적으로 사용되는 일반적인 인코딩 라이브러리 솔루션 FFmpeg 도구는 여러 오디오 및 비디오 형식 인코딩을 통합하므로 형식 변환, 인코딩 및 스트리밍에 FFmpeg를 사용하는 데 우선순위를 둘 수 있습니다.

1.FFmpeg 도구 설치

양조 설치 ffmpeg

2. MP4 파일 푸시

영상 파일 주소:/Users/gao/Desktop/video/test.mp4

푸시 및 풀 스트리밍 주소: rtmp://localhost:1935/rtmplive/home, rtmp://localhost:1935/rtmplive/home

 //RTMP 프로토콜 스트림 ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home//HLS 프로토콜 스트림 ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile 기준선 -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

알아채다:

스트림을 푸시한 후 VLC 및 ffplay(rtmp 프로토콜을 지원하는 비디오 플레이어)를 설치하여 시연을 위해 로컬로 스트림을 가져올 수 있습니다.

① 라이브 스트리밍용 비디오 파일

 ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile 기준선 -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://192.168.1.101: 1935/hls/testffmpeg-re-i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile 기준선 -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

② 라이브 방송을 위한 푸시 스트리밍 카메라 + 데스크톱 + 마이크 녹음

 ffmpeg -f avfoundation -framerate 30 -i 1:0″ /-f avfoundation -framerate 30 -video_size 640x480 -i 0 /-c:v libx264 -preset ultrafast /-filter_complex 'overlay=main_w-overlay_w-10:main_h-overlay_h -10′ -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://192.168.1.101:1935/hls/test

더 많은 명령을 보려면 다음을 참조하세요.

RTMP 스트리밍 미디어 처리를 위한 FFmpeg 명령의 전체 목록

FFmpeg 일반적으로 사용되는 스트리밍 명령

iOS와 Android 모바일 단말기 모두 HLS 프로토콜을 자연스럽게 지원하며, 영상 수집 종료 및 영상 스트리밍 푸시 서비스가 완료된 후 H5 페이지에서 영상 태그를 직접 구성하여 라이브 영상을 재생할 수 있습니다.

 <비디오 제어 preload=auto autoplay=autoplay loop=loop webkit-playsinline><source src=http://10.14.221.8/hls/test.m3u8″ type=application/vnd.apple.mpegurl /><p class=warning >귀하의 브라우저는 HTML5 동영상을 지원하지 않습니다.</p></video>

이 문서에서는 비디오 수집 및 업로드, 비디오 푸시의 서버 처리, 라이브 비디오의 H5 페이지 재생에 대한 전체 프로세스를 자세히 설명하며, 구현 과정에서 많은 성능 최적화 문제가 발생하게 됩니다.

① H5 HLS 제한은 H264+AAC 인코딩이어야 합니다.

② H5 HLS 재생 문제가 멈췄습니다. 서버 측에서는 조각화 전략을 구현하고 ts 파일을 CDN에 넣을 수 있으며 프런트 엔드에서는 DNS 캐싱 등을 구현하려고 시도할 수 있습니다.

③ 더 나은 실시간 상호 작용을 달성하기 위해 H5 라이브 방송은 RTMP 프로토콜을 사용하고 video.js를 통해 재생을 실현할 수도 있습니다.

이상은 에디터가 소개한 HTML5 동영상 라이브 방송 기능에 대한 자세한 설명입니다. 궁금한 사항이 있으시면 메시지를 남겨주시면 에디터가 시간 맞춰 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!