Edited at

簡単なライブ動画配信アプリの制作

More than 1 year has passed since last update.

最近、動画配信アプリに興味があって色々と調べながら、勉強していたので、以下のようにまとめておく。 今回はnimble streamerというストリム転送ソフトとOBS(Open Broadcaster)というEncoderでライブ配信を試みた過程をポスティングしようと思っている。ざっくりした感じで調べたので、何か間違いがあればコメントで指摘して欲しい。


目標

Video Encoderで撮影された動画をリアルタイムで配信し、それがブラウザー、モバイル端末などでライブで見えるようにする。 プラスアルファで私はいつもバラウザから放送局のサイトで生放送を見るのがめんどうくさいと思っていたので、自分が好きな放送局のstreamingも見えるようにしたい。


過程


Step 1, 必要なソフトのダウンロード


1. OBS (Open Broadcaster) : Game capture、Display capture や Live streamingの配信などに対応している無料ソフトで、ニコ生のユーザーらによく使われているらしい。 Download


 2. Nimble Streamer : 一応無料のmedia serverソフトで、 streamingを様々なプロトコルの間で変換してくれる機能もあれば、streamingをコンピュータ、モバイル端末、IPTVなどに配信することが可能。 やっていることのイメージとしてNimbleのホームベージに乗せている以下の図がわかりやすい。Download

 1.png

2.png

3.png


  • 今回実現しようとしていることは一番上の図のようなことである。

  • Nimble Streamerのinstallにおいて、WMSPanelに登録する必要がある。 それから、以降Nimble Streamerにおける設定はこのサイトから行うことになる。


Step 2, OBSでライブstreamingを受けるNimble Streamerをインストールしたサーバーを指定する。


1. OBSメイン画面 -> settings -> stream

1.1.  Stream Type (Custom Streaming Serverを選択)

1.2. URL: rtmp://server_url:port/stream_app (例:rtmp://192.168.179.3:3925/origin)
Stream Key: 自由に設定 (例: livestream)

Screen Shot 2016-10-22 at 6.29.20 PM.png


2. 設定が終わったら [Start Streaming]を押す。

      * 上の設定に問題がある場合、[Failed to connect to server]というErrorが出るはず。

 


Step 3, Nimble側の設定 (主にWMSPanelでの設定になる)


1. WMSPanelにloginし、メインメニューから[Nimble Streamer]->[Live streams settings]を選択

  4.png

*以上のような画面が出てくると、赤い四角形で表示したように、Nimble Streamerのインストールで登録したサーバーが表示される。  


2. Globalを選択し、自分が必要なstreaming protocalを選択し、[save]を押す。

*このプロトコルはEncoderからきたstreamingをnimble streamerが転送する時の出力フォーマットになる。今回はバラウザとモバイル端末で放送するのが目標だったので, HLSを選択。


3. Interface tagを選択し、 受信interfaceを作成する。

3.1 OBS Encoderから配信されるライブ動画はRTMP formatなので、今回はRTMP interfaceを作成。

3.2 IP Addressは入力せずに、port番号は Step 2の2で設定した、サーバーのport番号を入力

3.3 Serverは自分が登録したサーバーを選択

5.png

*設定はここまでで、次のステップで、動作確認を行う。


Step 4, メインメーニュから [Nimble Streamer] -> [Live streams]を選択

Screen Shot 2016-10-22 at 7.01.39 PM.png

図のように[Incoming Streams],[Outgoing Streams]項目に数字が出ていると正確に設定されていることになる。


Step 5, Step 4の画面から、サーバー項目を選択すると受信しているstreamの詳細を見ることができる。

6.png


Step 6, 上の図の赤い部分を押すと、出力streamを動画で確認できる。

*下の図の赤い部分を押すことで、ライブ動画の出力確認ができる。

7.png

Screen Shot 2016-10-22 at 7.20.15 PM.png

*上記のURLをcopyし、バラウザやモバイル端末のプログラムでしてすることで、ライブ配信アプリを作ることが可能。

+alpha


Step 7, 放送局からライブ配信される番組は、[Live streams settings] -> [Live pull settings]から該当URLを追加することで実現できる。

*上と同じstepで動画を確認することができる。

Screen Shot 2016-10-22 at 7.25.47 PM.png

**上の物を使って以下のような自分用のiOSアプリを作った。

Screen Shot 2016-10-22 at 7.30.07 PM.png

Screen Shot 2016-10-22 at 7.30.19 PM.png