Help us understand the problem. What is going on with this article?

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

prty
プロダクト・サービス開発、エンターテイメント、ブランディングの制作を行う会社。
https://prty.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away