はじめに

呉高専 Advent Calendar 2018 22日目の記事です。

始めまして？、呉高専のVue.jsが大好きなkobakazu0429です。

「ライブストリーミング配信をする（かもしれない）」ということで、dockerを使って簡単に環境構築をしてどんなものかを試してみたいと思います。

本来は Vue.js + Vuex + OpenLayersで記事を書こうと思ったんですけど、思ったより書くことがなかったので変更です...

ざっくりとしたアーキテクチャはこんな感じです

今回使用するURLは以下の通りです

実行環境

MacBook Pro (15-inch, 2017)
プロセッサ ： 3.1 GHz Intel Core i7
メモリ ： 16 GB 2133 MHz LPDDR3
グラフィックス ： Radeon Pro 560 4096 MB, Intel HD Graphics 630 1536 MB

$ docker -v
Docker version 18.06.0-ce, build 0ffa825

nginx-rtmp

Docker for Macの導入は飛ばします。
Mac以外をお使いの方は適宜読み替えていただけたらと思います。

今回はDocker Hubで公開されているtiangolo/nginx-rtmpを使います。
tiangoloさんに感謝です！

次の1行を実行するだけでサーバー構築は終了です。
お手軽ですね！

$ docker run -d -p 1935:1935 --name nginx-rtmp tiangolo/nginx-rtmp

OBS Studio

次はOBS Studioを環境に合わせてインストーラーをダウンロードし導入しましょう

OBS(Open Broadcaster Software) Studioは、各種ライブ配信サイトで使用できる無料の配信ソフトです。
また、それだけでなく、複数の動画の合成、テロップ、画像の挿入などをリアルタイムに配信しながら配信することができます。

配信設定

設定→配信から「配信種別：カスタムストリーミングサーバー」を選択
URLはrtmp://<IP Address>/live/です。
ストリームキーは自由に設定してください。これは後から配信を見るときに使われます。

配信用カメラ設定

今回はiPhoneの映像をWi-Fi経由で受け取り、それを配信します。
メディアソースを新規追加し、ローカルファイルのチェックを外します。
入力に先ほどのURLと末尾に名前を適当につけます。
このURLはあとでiPhone側の設定で使うので覚えておいてください。
入力フォーマットはrtmp/mp4です。

このメディアソースは使いたいiPhoneの数だけ追加します。

Switcher Studio

今回はお試しなのでSwitcher Studioというアプリを入れます。
会員登録、ログインをしたら
Use as Swictherを選択
設定→Outputs→Custom RTMP、新規作成をします

STREAM KEY/IDはさっきOBSで設定した通りにしてください。

※ 複数カメラを用いる場合は、Remote Camera Modeを選択し、一つの端末に映像を集約するか、
それぞれを別アカウントにして、OBS側で処理するかの2択になると思います。
同一アカウントを使ってログインすると片方のアカウントが自動でログアウトされてしまいます。

VLC(再生プレイヤー)

今回はwebではなくVLCを使って再生します。
RTMPサーバーからストリーミングで受信できればどのプレイヤーでも構いません。
ネットワークから、OBSの配信設定で設定したURL192.168.137.62/liveを使って受信します。

これで再生できたら成功です！

最後に

お疲れ様でした！
駆け足の記事なってしまいましたがいかがだったでしょうか？

これで誰でもお外からライブニュースごっこができますね！

それでは明日のeuglena1215先輩による「つくったものの紹介」を楽しみに！

P.S. 何かあればコメント等でお願いします🙇‍♂️🙇‍♂️🙇‍♂️