概要
前回、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 が登場したのも納得できます
