見出し画像

【iPhone+Macのみで"それっぽい"生配信をする方法】 OBS-Periscopeの連携と設定まとめ


みなさん外出自粛期間いかがお過ごしでしょうか?

僕はもっぱら人と会わないので,ネットに繋がりを求め,料理しながら生配信するなどオンラインアクティブに活動しています.

そんな中,もっと良い感じに生配信できるのではないかと思い,
一眼レフがなくても手持ちのiPhoneとMacで”それっぽい”生配信ができるシステムを構築したので簡単に紹介したいと思います!

今回はTwitterで配信を行いたかったため,Periscopeというライブ配信プラットフォームを採用しましたが,同じように機材のセッティングを行えばどうぶつの森の配信や,YoutubeLiveやTwitchなどでの生配信もできます.

「Periscopeってなんだ?」「なんでPC使うんや?」と疑問に思った方はこちらの記事をご覧ください.

---

0. 概要

今回の生配信で使用する機材は以下の4つのみ.
めっちゃ高い一眼レフやガンマイクなんてなくても生配信できるんです!

・iPhone 8 plus
・MacBook Air (11-inch, Early 2015)
・Lightning コード( https://amzn.to/3ealg1l )
・スマホ三脚 ( https://amzn.to/2yPzxAo )

Lightningコードに関しては,お持ちの充電コードがあればそれで大丈夫ですが,このコードは耐久性が高く長さも十分なため,配信用・旅行用して購入しておくのがおすすめです.(Anker公式ストアでは50%OFFのクーポンの配布も行っています)

また,スマホ三脚もなくても良いのですが,安価かつコンパクトなので,配信だけでなく旅行用などにも使用でき購入しておくとQOLあがりますよ.

----

今回のシステムを大まかに表してみました.

アートボード 1

基本的な構成として,iPhoneのカメラで撮影している風景をMacBookに画面共有し,OBSソフトを使用して各プラットフォームに配信します.

スマホ版のPeriscopeではカメラを直接生配信することしかできませんでしたが,Macbookを中継することによってBGMや映像切り替えなどリッチな配信を行うことができるようになりました.早速,次章からセッティングを行なっていきましょう.


---


1. MacBookAirにiPhoneの画面を共有する


① まずMacにQuicktimePlayer をDLします (基本的には入ってると思います)

②以下のように,iPhoneとMacを充電コードで接続します(ここでiPhoneのデフォルトカメラのポートレートモードを起動しておきましょう)(これで一眼レフぽくなる=なんか雰囲気が良くなる)

画像2

③接続が完了したら,QuicktimePlayerを起動しましょう

④QuicktimePlayer / ファイル / 新規ムービー録画 を選択し

スクリーンショット 2020-04-10 18.07.03

⑤録画画面が起動したら,録画マークの右隣の「↓」からカメラをiPhoneに設定し,iPhoneの画面が共有されていることを確認します

スクリーンショット 2020-04-10 15.37.15

⑥これでMacBookAirにiPhoneの画面をキャプチャーすることができているかと思います!もしiPhoneの項目が出てきていない場合などは,接続端子の確認などを行いましょう.

スクリーンショット 2020-04-10 18.43.50


---

2. OBSでキャプチャしたiPhoneの画面を表示する

次に,先ほどキャプチャした動画を配信できるようにするため,OBS(Open Broadcaster Software)というビデオ録画と生放送用の無料でオープンソースのソフトウェアを使用して各種設定していきます.

ここから自分のOSにあったソフトウェアをDLします

②アプリケーションをDLできたら立ち上げます

③主に使用するのは,以下の図で色付きで囲った枠内になります

スクリーンショット 2020-04-10 18.30.32

赤色:BGMやキャプションなどの素材を入れておくAsset置き場
緑色:音声関係の調整するInspector
青色:配信関係の設定を行うBuildSettings

④キャプチャしたiPhoneの画面を表示するために赤枠(ソース)の+から,「ウィンドウキャプチャ」を選択します

スクリーンショット 2020-04-10 18.34.53

⑤「新規作成」を選択し,適当な名前をつけておきます

⑥「ウィンドウ」からQuick Time Player を選択し,決定します

スクリーンショット 2020-04-10 18.37.26

⑦iPhoneの画面がOBS上に表示されました!
あともうちょっと微調整と設定を行えば配信できるようになります.

スクリーンショット 2020-04-10 18.41.30


---

3. OBSでBGM・キャプションを作成する

ここでは,配信っぽくするためにBGMやキャプションをつけていきます.
このようにおまけをつけていくことができるのはPCで配信する大きな意味の一つです.気合いを入れてやっていきます!

①まずは適当なサイトで,生配信で使用可能なフリーの音源を見つけてDLしてきましょう.ここではしっかり利用規約を確認し,商用利用の可否などを確認する必要があります.

②OBSの赤い枠(シーン)の+から「メディアソース」を選択し,先ほどと同じように新規作成していきます.もしBGMをループしたいときは「繰り返し」にチェックを入れましょう.

スクリーンショット 2020-04-10 19.00.03

③これでBGMが聞こえるはずです.音量が大きい場合などは,緑枠(音声ミキサー)で調整します.

スクリーンショット 2020-04-10 19.04.30

---

④次に,キャプションを用意していきましょう.Adobe illustlator などで適当に画像ファイルを作成します.

スクリーンショット 2020-04-10 18.56.59

⑤OBSの赤い枠(シーン)の+から「画像」を選択し,先ほどと同じように新規作成します.これだけで画像を表示することができたと思います.

スクリーンショット 2020-04-10 19.21.57

これでBGMとキャプションの設定ができたので,早速配信を行いましょう!


---


4. Periscopeで生配信する

ここでは先ほど完成したOBSの画面を,Periscopeの配信プラットフォームにのせるための設定を行なっていきます.

⓪ このページからPeriscopeのProducer登録を行います.その後,「新しいソースを追加」をクリックし,リンクとストリームキーをメモします.

スクリーンショット 2020-04-10 19.43.34

①OBSに戻り,右端にある青枠の中から,「設定」を選択します

スクリーンショット 2020-04-10 19.25.18

②このウィンドウでは,配信の設定,出力先の映像のサイズや音声(マイクなど)の詳細な設定を行なっていきます

③まず,「配信」をクリックし,先ほどメモしたリンク・キーを貼り付けましょう.この際に「カスタム」にしておきます.

スクリーンショット 2020-04-10 19.40.43

④次に出力関係の設定を行います.「出力」を選択し,赤枠内の設定を以下のように変更します.ビットレートは800以上の数値も設定できますがそれだけ遅延が大きくなるのでほどほどにしておきます.

ビットレート:500~800ぐらいに設定
キーフレーム間隔:2秒に設定
音声ビットレート:64に設定

スクリーンショット 2020-04-10 19.30.42

スクリーンショット 2020-04-10 19.35.03

⑤配信に使用する音声を選択するため,「音声」タブのデバイスを出力・入力したいデバイスになるように設定します.

スクリーンショット 2020-04-10 19.34.07

⑥次に,映像サイズを決めます.「映像」を選択し,以下の設定に変更します.縦型配信の場合は出力スケールを縦横批反転しましょう.

出力解像度:960×540に設定
FPS共通値:30に設定

より詳しい配信設定を行いたい場合は,こちらの記事が丁寧に解説してくれています.

⑦設定を保存してウィンドウを閉じ,「配信開始」をクリックします.ここをクリックしても,まだPeriscopeでは配信されていないので安心してください.

スクリーンショット 2020-04-10 19.49.07

⑧もう一度,Periscope Producer にもどると,プレビューを確認できるようになっていると思います.「Twitterでこのライブ放送を共有」をチェックしてしまうと,ライブ放送ができないのでチェックを外します!

スクリーンショット 2020-04-10 19.52.34

⑨問題がなければ,「ライブ放送する」をクリックし,生放送を始めましょう!!!

---

今回紹介した方法を使うことで,iPhoneとMacのみでもそれっぽい生配信ができるようになりました.これよりもさらにリッチな放送を行うためには,一眼レフやキャプチャボード,オーディオインターフェースなどが必要になってきます.僕はまだその領域にいっていないのですが,生配信にハマったらさらに環境を整備していくnoteも書きたいと思います.

ここまで長文を読んでくれてありがとうございました!良い配信ライフを!

---

5. 参考


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
note.user.nickname || note.user.urlname

noteで公開しているレシピを研究するための食材費,フィラメント代が足りなくて困ってます......

いっぱいちゅき♡
16
東京大学大学院 学際情報学府 M1 | ヒトの知覚感覚とテクノロジーの関係・未来の食体験について考えながら, 『一夜限りの料理人』として活動しています.
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。