Live Streaming on Web 概観 #Video

WebサイトでLiveStreamingを実現しようと思い色々調べた備忘録です。
キモはブラウザ対応です汗汗

生放送を実現する技術

・プロコトル

HLS（HTTP Live Streaming）
- iOS/Androidに配信するならコレ
RTMP (RealTime Messaging Protocol)
- Flash使うならコレ
RTSP (RealTime Streaming Protocol)
- Androidならコレ
MSE (Media Source Extention)
- bufferSourceに貯めて動画を再生
- iOSとIE以外はちゃんと使えるっぽい
- Media Source Extensionsを使ってみた (WebM編)

.mp4と.webmが用意できれば、古いAndroid以外のすべてのブラウザで
生配信が実現できる。
webmはFirefox用

・クライアント側

video.js - http://videojs.com/
シンプルで使いやすい。

JWPlayer - http://www.jwplayer.com/
有料だが、動画・広告配信ができたりサポート体制も充実していて高機能。

Dash.js - https://github.com/Dash-Industry-Forum/dash.js
MPEG-Dashを実現するプラグイン

hls.js - https://github.com/dailymotion/hls.js/tree/master
Dailymotionが開発している、HSLをあらゆるブラウザで再生することを目指すプラグイン

サーバー側

サーバーの配信方法はいくつかあるが、既存の技術に乗っかったほうが圧倒的に楽。
エンコードと複数プロコトル配信を実現してくれるアプリケーションはいくつかある。

WOWZA - https://www.wowza.com/
老舗のStreamingサーバー提供サービス。ドキュメントや、サポート体制が充実している。
LiveStreamingで検索すると、高確率でここのSupportThreadがヒットする。

Wowza Enginというアプリケーションもあって、自鯖に同等機能をインストールすることができる。
かつ、細かいカスタマイズが可能になる。

180日無料お試しがついてくるので、そこから初めて見ては？

nginx-rtmp-module - https://github.com/arut/nginx-rtmp-module
nginxサーバーに複数LiveStreamingプロコトルを実現してくれるmodule

Linuxサーバーをいじる知識が必要だけれど、手軽に様々なプロコトルに対応してくれる。
AllRightReservedだけど、使用自体は無料。

nginx入ってる人は是非。

FlashMediaServer - http://www.adobe.com/jp/products/adobe-media-server-family.html
様々なフォーマットに対応していて、さらにUIがかっこいい。
だけど、Flashかぁって感じだし、Licence料がとても高い。

ローカルでテスト配信してみた。

1.OBS (Open Broadcaster Software)を使う - https://obsproject.com/

超便利

キャプチャと配信までやってくれるソフトウェア。
このアプリで入力を受け取って、サーバーに送信するまでをGUIで操作できる。

入力も、PC画面・Webカメラ・mp4動画・Syphoneなどいたれりつくせり。
エンコーダーがH.264しか無いっぽいんだけど、FFMPEGと連携とかしてくれないのかなぁ。

ニコ動で生配信するときとかも、コレを使うといろいろ出来るんじゃないかなぁ。

2.nginx-rtmp-moduleをセットアップ

インストールとセットアップ方法はこちらに書いてある。
https://github.com/arut/nginx-rtmp-module

日本語記事もあるけど、表記バラバラだしバージョン違うっぽいのでちゃんと動かなかった。
本家をちゃんと見るのが吉。

nginx.conf

http {
  # ~ m3u8が生成される場所をホスト ~
}

rtmp {
    server {
        listen 1935;
        chunk_size 4096;
        access_log logs/rtmp_access.log;

        ping 30s;
        ping_timeout 10s;

        # HLS
        application live {
            live on;
            wait_video on;
            allow publish 127.0.0.1;
            allow play 127.0.0.1;
            allow publish 192.168.1.28;
            allow play 192.168.1.28;
            # allow publish localhost;
            # allow play localhost;

            deny publish all;

            hls on;
            hls_path /usr/local/nginx/html/hls;
            hls_fragment 1s;
            hls_type live;
        }
    }
}

<ip address>を指定するところは、http://127.0.0.1 で統一するとうまく行った。
localhostでうまくいかないの謎

3.video.jsで検証

 <video id="rtmp live stream" class="video-js vjs-default-skin" controls
   preload="auto" width="640" height="480" data-setup='{}'>

    <!-- 配信先のもろもろのURL -->
    <source src="http://127.0.0.1/live/stream.m3u8" type='application/x-mpegURL'>
    <source src="rtmp://127.0.0.1/live/stream" type='rtmp/mp4' />
    <source src="rtsp://127.0.0.1/live/stream" type='rtsp/mp4' />

  </video>

複数ソースを自動でfallbackしてくれるので有能。
HLSはhttpサーバーを立てて静的ファイルにアクセスするイメージで。

4.krpanoで検証

<krpano>
  <security cors="">
    <!-- 動画をbroadcastしているサーバーでホストされているcrossdomainポリシーファイルのパス -->
    <crossdomainxml url="http://127.0.0.1:1935/crossdomain.xml" />
    <allowdomain domain="*" />
  </security>

  <!-- 読み込み先の設定 -->
  <plugin name="video"　
    url.flash="./plugins/videoplayer.swf" 
    url.html5="./plugins/videoplayer.js"
    videourl="rtmp://127.0.0.1:1935/live/stream"
    videourl.ios="http://127.0.0.1:1935/live/stream.m3u8"
    />

  <image>
    <sphere url="plugin:video" />
  </image>
</krpano>

FlashはtoBitmapDataで、webGLはdrawImageでクロスドメインのエラーが出るので、
crossdomain.xmlをserverに置かないといけない。

toBitmapDataでどうにもうまく動かなくて挫折した。

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Range

サーバーの設定でコレを書かないとダメという記事を見つけたけど、うまくイカず。

CORSはやく実現しないかなと思う今日このごろであった。

追記

http://qiita.com/tomoyukilabs/items/81698edd5812ff6acb34
CORSまとめ