NGINX 는 고성능 웹서버이다. 이 웹서버에서 로컬 동영상 파일을 HLS 로 스트리밍할 수 있다. 본 포스팅에서는 ubuntu 16.04 에서 NGINX 를 이용해 HLS 동영상 파일 스트리밍 하는 것에 대해서 설명한다.
1. 소스 다운로드 및 컴파일
NGINX 와 nginx-vod-module 을 다운로드 한다.
- nginx: wget http://nginx.org/download/nginx-1.12.2.tar.gz
- nginx-void-module : git clone https://github.com/kaltura/nginx-vod-module.git
각각 압축을 풀고 nginx 소스 폴더에서 다음과 같이 configure 를 진행한다.
./configure --add-module=../nginx-vod-module --with-file-aio --with-threads --with-cc-opt="-O3" |
--with-file-aio 는 asynchronous I/O 를 지원하게 해준다.
--with-threads 는 thread pool 을 이용해서 asynchronous 하게 파일을 open 하도록 해준다.
--with-cc-opt="-O3" 는 compiler Optimization 을 위한 옵션이다.
2. Configuration
/usr/local/nginx/conf/nginx.conf 에 다음과 같이 vod 관련 configuration을 설정한다.
worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; server_name localhost; location / { root html; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # vod settings vod_mode local; vod_fallback_upstream_location /fallback; vod_last_modified 'Sun, 19 Nov 2000 08:52:00 GMT'; vod_last_modified_types *; vod_metadata_cache metadata_cache 512m; vod_response_cache response_cache 128m; gzip on; gzip_types application/vnd.apple.mpegurl; vod_segment_duration 1000; open_file_cache max=1000 inactive=5m; open_file_cache_valid 2m; open_file_cache_min_uses 1; open_file_cache_errors on; aio on; location /content/ { root /PATH_YOUR_LOCALMEDIA/; vod hls; add_header Access-Control-Allow-Headers '*'; add_header Access-Control-Expose-Headers 'Server,range,Content-Length,Content-Range'; add_header Access-Control-Allow-Methods 'GET, HEAD, OPTIONS'; add_header Access-Control-Allow-Origin '*'; expires 100d; } } }
|
/PATH_YOUR_LOCAMEDIA/에 mp4 파일을 넣으면(예를 들어 a.mp4) http://[SERVER_IP_ADDRESS]/content/a.mp4/index.m3u8 로 접근 가능하다. 동영상은 1초 단위로 쪼개지도록 다음의 파라미터를 1000으로 설정한다.
- vod_segment_duration : 하나의 세그먼트의 duration 시간(밀리초)
3. HTML 에서 HLS 재생
HTML Video Tag로 직접 HLS 재생은 불가능하다. 하지만 hls.js 라는 라이브러리를 이용하면 다음과 같은 방법으로 가능하다. (https://github.com/video-dev/hls.js/ 에서 hls 를 직접 다운로드-빌드 할 수 있다.)
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <video id="video"></video> <script> if(Hls.isSupported()) { var video = document.getElementById('video'); var hls = new Hls(); hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8'); hls.attachMedia(video); hls.on(Hls.Events.MANIFEST_PARSED,function() { video.play(); }); } </script> |
빌드는 다음과 같이 한다.
git clone https://github.com/video-dev/hls.js.git
cd hls.js
npm install
dist 폴더에 보면 hls.js 및 hls.min.js 가 있다. hls.min.js 를 상기 srcipt src 에 걸어주면 된다.
4. 동영상 크기 줄이기
동영상 크기는 다음처럼 줄일 수 있다. (거의 1/4로 줄어듬)
ffmpeg -i a.mp4 -vcodec h264 -acodec mp3 ac.mp4
5. 동영상 플레이 버퍼 시간 조정
동영상 플레이시 버퍼를 조정하면 동영상 다운로드를 on-demand 로 다운로드 할 수 있다.
다음처럼 hls.js 에 maxBufferLength를 조정한다.
<html> <script src="/hls.js"></script> <body> <video id="video"> </video> <script> if(Hls.isSupported()){ var video=document.getElementById('video'); var hls=new Hls({ maxBufferLength:3 }); hls.loadSource('http://[YOUR_HLS_VIDEO]/index.m3u8'); hls.attachMedia(video); hls.on(Hls.Events.MANIFEST_PARSED,function(){ video.play(); }); }; </script> </body> </html> |
동영상을 플레이 해보면 다음 그림처럼 3초까지는 처음에 다운로드 하고, 플레이가 진행되면서 순차적으로 다운로드를 진행한다.
