本ページは広告が含まれています。気になる広告をクリック頂けますと、サーバ運営費になります(^^
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/
