Live Streaming on Web 概観

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編)](http://qiita.com/tomoyukilabs/items/57ba8a982ab372611669)

.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: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で検証

```html
 <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で検証

```xml
<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まとめ