Categories: 映像配信

video.jsのインストール配信まとめ

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/

hanakotoko