Edited at

Live Streaming on Web 概観

More than 3 years have passed since last update.

WebサイトでLiveStreamingを実現しようと思い色々調べた備忘録です。

キモはブラウザ対応です汗汗


生放送を実現する技術


・プロコトル



  • HLS(HTTP Live Streaming)


    • iOS/Androidに配信するならコレ




  • RTMP (RealTime Messaging Protocol)


    • Flash使うならコレ




  • RTSP (RealTime Streaming Protocol)


    • Androidならコレ




  • MSE (Media Source Extention)



.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まとめ