Nginxをrtmpで受け、HLSストリーミング化して、web配信
webプレーヤはvidejsを利用する。
Nginx+rtmp+HLSストリーミングの実現はこちら
事前準備
npm install
途中でエラー出るnode.jsの古いバージョンが必要?インストールを促されるので
sudo apt-get install nodejs-legacy
で、再度必要なライブラリのインストールを試みる
npm install
video.jsのインストール
npm install --save-dev video.js npm i videojs-contrib-hls npm i videojs-contrib-media-sources
videojs-contrib-hls
HLS(m3u8)形式の動画ファイルを再生可能にするvideo.jsプラグイン。
HLSに対応していないブラウザでもFlash技術を通すことで再生可能にしているらしい。
videojs/videojs-contrib-media-sources
videoタグに動画ソースを流し込めるようにするvideo.jsプラグイン。
W3Cのドラフト仕様Media Source Extensionsが元のよう。
できたものをvideojsフォルダに突っ込む
sudo mkdir /usr/local/nginx/html/live/videojs ~/videojs-contrib-media-sources/dist$ sudo cp * /usr/local/nginx/html/live/videojs/ ~/videojs-contrib-hls/dist$ sudo cp * /usr/local/nginx/html/live/videojs/ ~/video.js/dist$ sudo cp video* /usr/local/nginx/html/live/videojs/
webプレーヤで映像配信
/usr/local/nginx/html/live$ sudo vi index.html <html> <head> <link href="./videojs/video-js.css" rel="stylesheet"> <script src="./videojs/video.js"></script> <script src="./videojs/videojs-contrib-hls.min.js"></script> <script src="./videojs/videojs-contrib-media-sources.min.js"></script> </head> <body> <video id="rtmp_test" class="video-js vjs-default-skin" autoplay="autoplay" controls="controls" width="800" height="450" data-setup="{}"> <source src="./hls/test.m3u8" type="application/x-mpegURL" /> </video> </body> </html>
HLSの組み込み参考
http://blog.toshimaru.net/play-m3u8-video-in-browser/