반응형

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초까지는 처음에 다운로드 하고, 플레이가 진행되면서 순차적으로 다운로드를  진행한다.




반응형
Posted by alias
,