2018年8月22日水曜日

nginx-rtmp-module で HLS を使う方法

概要
環境
- サーバ
- 配信クライアント
視聴クライアント
nginx.conf の修正
HLS 用のプレイヤーの作成
動作確認
最後に
参考サイト

概要

前回、nginx-rtmp-module を使った nginx の構築と rtmp をライブ配信の方法を紹介しました
今回は更にそこから HLS (Http Live Streaming) を使った配信をしてみます
基本は前回と同じなので変更した部分だけ紹介します

環境

サーバ

Ubuntu 16.04
nginx 1.15.3

配信クライアント

macOS X 10.13.5
OBS 21.1.1

視聴クライアント

macOS X 10.13.5
Chrome 68.0.3440.106
video.js 7.0

nginx.conf の修正

http ディレクティブに以下を追加します
hls 用の Content-Type を指定します

location /myhls {
    types {
        application/vnd.apple.mpegurl m3u8;
        video/mp2t ts;
    }
    root /tmp;
    add_header Cache-Control no-cache;
}

HLS 用の設定を追記します

rtmp {
    server {
        listen 1935;
        chunk_size 4000;

        application myhls {
            live on;

            record all;
            record_path /tmp/av;
            record_max_size 1K;
            record_unique on;

            hls on;
            hls_path /tmp/myhls;

            allow publish 106.181.187.16;
            deny publish all;

            allow play all;
        }
    }
}

追加しているのは以下の 2 つです

hls on･･･ HLS を有効にする
hls_path /tmp/myhls･･･hls に変換するテンポラリーディレクトリを指定

/tmp/myhls を変更した場合は location に追加した root /tmp パスも変更してください
また location 自体のパスも変更してください

HLS 用のプレイヤーの作成

rtmp では flash が必須でしたが HLS では不要です
HLS 用のプレイヤーを作成しましょう

vim /usr/local/nginx/html/index.html

<html>
  <head>
    <title>HLS livestreaming</title>
    <link href="https://vjs.zencdn.net/7.0/video-js.min.css" rel="stylesheet">
  </head>
  <body>
    <video id=example-video width=1280 height=720
       class="video-js vjs-default-skin" controls>
      <source
         src="http://192.168.100.50/myhls/live.m3u8"
         type="application/x-mpegURL">
    </video>
    <script src="https://vjs.zencdn.net/7.0/video.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.min.js"></script>
    <script>
      var player = videojs('example-video');
      player.play();
    </script>
  </body>
</html>

source タグで指定する IP の部分は書き換えてください
あとは同じで動作するはずです

動作確認

OBS を起動して配信を開始しましょう
/tmp/myhls 配下にエンコードされた hls 用のファイルが作成されていることがわかると思います

live-0.ts
live-1.ts
live-2.ts
live-3.ts
live-4.ts
live-5.ts
live-6.ts
live.m3u8

エンコードされた live.m3u8 が /myhls/live.m3u8 で見える設定になっているので、それをプレイヤーが受け取って再生する仕組みです

ブラウザに flash がインストールされていない場合でも再生できるのがわかると思います

最後に

nginx-rtmp-module で HLS を使う方法を紹介しました
設定自体は既存の rtmp の設定に HLS のフラグをオンにしディレクトリを作成するだけでした

ただ、HLS 用のプレイヤーを作成する必要はあります
プレイヤーもそうですが、クライアント側で Flash が不要になるというはかなり嬉しい点かなと思います

iOS など Apple のモバイル系 OS では基本 Flash が再生できないので HLS が登場したのも納得できます

hawksnowlog