Ubuntuでcrtmpserverを試す(その3)

前回の Ubuntuでcrtmpserverを試す(その2) に引き続き、今回は以下を参考にして動画を配信して見た。

idinor.hatenablog.com

処理フロー: [配信アプリ] → RTMP → [crtmpserver] → RTMP → [プレーヤー]
配信アプリ:PCではOBS Studio、Android/iOSではOS Broadcaster
プレーヤー:PCではFlowPlayer、AndroidではWondershare Player、iOSではLive Player

【OBS Studioで配信】

次を参考に以下の手順でOBS StudioからRTMPデーターを配信する。

www18.atwiki.jp

  • Open Broadcaster Software | Home から「Download OBS Studio」ボタン → 「Windows 7+」ボタンをクリックし、OBS Studioインストーラーをダウンロードしてインストールする。
  • インストール完了後、スタートメニューから「OBS Studio」→「OBS Studio (64bit)」を実行する。
  • OBS Studioのソースを追加する。
    今回はMP4ファイルを配信対象とする「メディアソース」とWebCamを配信対象とする「映像キャプチャデバイス」を使用した。
  •  「設定」ボタンをクリックして設定画面を開く。
  • サイドメニューから「配信」を選択して、「配信種別」で「カスタムストリーミングサーバー」を選択し、「URL」に「rtmp://<サーバーのIPアドレス>/live」、「ストリームキー」に「broadcast」と入力する。
    この「broadcast」は受信時に指定するストリームの名前である。
  • サイドメニューから「映像」を選択して、「基本(キャンバス)解像度」と「出力(スケーリング)解像度」に適切な映像サイズを指定する。
    ※FlowPlayerでは映像サイズとディスプレイサイズの縦横比が合わない場合、縦長や横長で表示された。
    ※PCのスペックを超える映像サイズを指定すると、処理遅延によりフレームが落ちる事象が発生する。
  • 設定画面で「OK」ボタンをクリックして設定を反映する。
  • 「配信開始」ボタンをクリックして映像データーを配信する。
  • crtmpserverのログファイルに以下のようなログが出力されることを確認する。
    1485073731:3:/build/buildd/crtmpserver-1.0~dfsg/thelib/src/application/baseclientapplication.cpp:227:SignalStreamRegistered:Stream INR(100) with name `broadcast` registered to application `flvplayback` from protocol IR(95)

 【sample3.htmlの作成】

前回の Ubuntuでcrtmpserverを試す(その2) で作成したsample2.htmlと同じディレクトリに以下の内容でsample3.htmlを作成する。

<html>
    <head>
        <title>Play RTMP via crtmpserver</title>
        <script src="../flowplayer-3.2.13.min.js"></script>
    </head>
    <body>
        <a style="display:block;width:854px;height:480px;" id="player"></a>
        <script>
            $f("player", "../flowplayer-3.2.18.swf", {

                clip: {
                    url: 'broadcast',
                    live: true,
                    provider: 'rtmp'
                },

                plugins: {
                    rtmp: {
                        url: '../flowplayer.rtmp/flowplayer.rtmp-3.2.13.swf',
                        netConnectionUrl: 'rtmp://192.168.1.28/flvplayback'
                    }
                }
            });
        </script>
    </body>
</html>

上記 192.168.1.28 はサーバーのIPアドレスなので、インストール環境に合わせて適宜変更して欲しい。

【ブラウザで再生】

OBS StudioでRTMPデーターの配信を開始してから、PCのブラウザで http://サーバーのIPアドレス/flowplayer/example/sample3.html にアクセスしてRTMPを再生する。

Androidで配信】

以下の手順で「OS Broadcaster」からRTMPデーターを配信する。

  • GooglePlayから「OS Broadcaster」をインストールして開く。
  • 以下の通り、配信サーバーの設定を行う。f:id:pochy9n:20170122191656j:plain上記 192.168.1.28 はサーバーのIPアドレスなので、インストール環境に合わせて適宜変更して欲しい。
    Streamにbroadcastを指定することで、前述のsample3.htmlがそのまま使用できる。
  • 赤いボタンをタップすることでRTMPデーターの配信が開始される。
  • 前述の「ブラウザで再生」の通り、PCのブラウザで再生できることを確認する。

iOSで配信】

以下の手順で「OS Broadcaster」からRTMPデーターを配信する。

  • App Storeから「OS Broadcaster」をインストールして開く。
  • 以下の通り、配信サーバーの設定を行う。

    f:id:pochy9n:20170122232429p:plain

    上記 192.168.1.28 はサーバーのIPアドレスなので、インストール環境に合わせて適宜変更して欲しい。
    Streamにbroadcastを指定することで、前述のsample3.htmlがそのまま使用できる。
  • 赤いボタンをタップすることでRTMPデーターの配信が開始される。
  • 前述の「ブラウザで再生」の通り、PCのブラウザで再生できることを確認する。

Androidで再生】

以下の手順で「Wondershare Player」によりRTMPを再生する。

  • GooglePlayから「Wondershare Player」をインストールして開く。
  • 左上のメニューボタンをタップし、Streamingをタップする。

    f:id:pochy9n:20170123002949j:plain

  • プラスをタップして、任意のストリーム名とStream URLを入力する。

    f:id:pochy9n:20170123003127j:plain

    上記 192.168.1.28 はサーバーのIPアドレスなので、インストール環境に合わせて適宜変更して欲しい。
    URLの最後がストリームの名前である。
  • OBS Studioなどから配信を開始した上で追加されたbroadcastをタップしてRTMPの再生を行う。

    f:id:pochy9n:20170123003415j:plain

iOSで再生】

以下の手順で「Live Player」によりRTMPを再生する。

  • App Storeから「Live Player」をインストールして開く。
  • 画面右端から左へスワイプし、ストリームリストを表示する。

    f:id:pochy9n:20170123000724p:plain

  •  プラスをタップして、Stream URLを入力する。

    f:id:pochy9n:20170123000925p:plain

    上記 192.168.1.28 はサーバーのIPアドレスなので、インストール環境に合わせて適宜変更して欲しい。
    URLの最後がストリームの名前である。
  • OBS Studioなどから配信を開始した上で「Open」をタップしてRTMPの再生を行う。

【まとめ】

配信可能なメディアや再生可能なデバイスが増えてきたところが楽しい。