YoutubeとTwitterで同時配信しながらLTイベントを支える技術


##　背景
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">初の試み、年越しLT大会を無事終えました!! ダブル配信でとても緊張した中での開催でしたが、無事成功して良かったです！！また登壇者/視聴者ともに沢山の参加していただけて本当に嬉しかったです✨<br>2021年も定期的にイベントを行っていきますのでよろしくです！<a href="https://twitter.com/hashtag/%E3%81%99%E3%81%94%E3%81%8F%E3%81%AA%E3%82%8A%E3%81%9F%E3%81%84%E3%81%8C%E3%81%8F%E3%81%9B%E3%81%84%E3%81%90%E3%82%8B%E3%83%BC%E3%81%B7?src=hash&amp;ref_src=twsrc%5Etfw">#すごくなりたいがくせいぐるーぷ</a> <a href="https://t.co/MvO0OaOR2N">pic.twitter.com/MvO0OaOR2N</a></p>&mdash; すごくなりたいがくせいぐるーぷ@年越しLT大会開催✨ (@sggorg) <a href="https://twitter.com/sggorg/status/1344674148413366273?ref_src=twsrc%5Etfw">December 31, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

オンラインイベントを年越しに開催したのですが、外部の人にも楽しんでもらいたく、配信ツールを使ったイベントを開催しました。

## 概要
▼構成
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/25d4555c-f195-b5f1-e71d-217ce8f611db.png' width=80%>
こんな感じで構成がごちゃごちゃになっていたので次やるとき用の備忘録として記録することにしました。


##環境

```
Mac OS Catalina 10.15.7
```
###配信プラットフォーム
配信を視聴者に届ける部分です。
今回は`youtubeLive`と`twitterLive`を利用しました。
▼`youtubeLive`の管理画面
※youtubeLiveを利用するには利用する！っていう申請から約１日ほどかかるようです。早めにみておきましょう。
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/e3247ca5-2162-dc83-3bfc-ee897a417b3e.png' width=80%>
予め配信前にライブ配信をスケジュールしておくとスムーズに当日操作することができます。
`ストリームキー`と`ストリームURL`は後ほど連携の際に使います。
▼`twitterLive`の管理画面(iphoneAPP)
今回は[periscope.tv](https://www.periscope.tv/)という配信ツールを使いました。
2021/3末でサービスを終了するようなのでここはあまり参考にならないかもしれません(2021/1時点)
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/56bf006c-1632-c222-e162-73942f2a0296.png' width=60%>
ここで確認できる`サーバーのリンク`と`ストリームキー`は後ほど利用します

###RtmpRelayer
OBS単体ですと同時に配信できるプラットフォームは一つだけのようです。
そこでプラグインとして[RtmpRelayer](https://tokaisodachi.com/archives/1902)を利用しました。ソースコードは[こちら](https://github.com/tokjin/RtmpRelayer/releases/tag/v1.1.2)
▼起動&設定
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/e01cf7e9-6843-9e4f-0a1c-0cdff94f7605.png' width=60%>
下の欄に先ほど各プラットフォームで取得した`ストリームURL`と`ストリームキー`を設定していきます。
一つの入力欄にストリームURLとストリームキーを"/"を挟んで入力するだけでOKです。
設定が反映されないこともあったもで左下の`Refresh`を押しておくと良いかと思います。
上記蘭にある`Stream URL`と`Stream Key`を次使います。

### OBS
いよいよ配信ソフトであるOBSを利用します。
まずは先ほどのURLとキーを使って`RtmpRelayer`と連携します。
OBSの設定画面から`配信`の項目の変更します

| サービス | カスタム |
|:-:|:-:|
|  サーバー |  rtmp://localhost/live1/ |
| ストリームキー  | tokaisodachi  |
▼設定の様子
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/5f3242d0-4424-4e1d-a335-1d2e0e2593f2.png' width=60%>

続いて出力周り、画質とかの設定です。`出力`タブに移動します。
二つのプラットフォームに同時配信を行うとお互いの推奨値が異なるのでいろいろとエラーがでまくりました。配信が落ちるのも嫌だったので最小限の画質で配信を行いました。
▼参考程度に。
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/26e2f53a-5cd6-f792-2322-55e270233e8f.png' width=80%>
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/e8d165ea-55cb-ac9a-f5e3-49645346dbc9.png' width=80%>

それらの設定を終えたら、早速配信開始!!
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/7a47f605-4121-8a6b-cc03-67fd86c03777.png' width=40%>

### プラットフォームから配信を公開する
▼youtube
映像が正常に来ていたら右上の`ライブ配信を開始`をクリックすることで配信を開始できます。
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/d62f8156-0b8f-e7b6-e44d-66d0f4448e7e.png' width=60%>


▼periscope
最初は案の定エラーがでるのですが、`エラーを修正`を一度押して戻ると`ライブ放送をプレビュー`のボタンが表示されます。これを押すと配信開始のボタンが現れます。
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/8bd3d2c1-0f1a-3f9d-dfe0-8f73c090dacb.png' width=60%>

###無事配信できた!!!!
と言いたいですが、ここからが大変です。コンテンツのレイアウトを考えたり、音声を分けたり、シーンを切り替えたりするハックをしていきます。

###OBSのシーンを作り、コンテンツのレイアウトをつくる
生配信ではいろいろなシーンに分けて画面を作っておくことが必要になります。
例としては`イベント前`/`発表中`/`イベント終了後`などです。
視聴者を飽きさせないようにより細くシーンを分けておくことがいいのかなと思います。

▼イベント前
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/005edf02-cd7b-aa29-367b-259482ebc2aa.png' width=40%>
▼発表中
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/14496474-e942-5ba4-37b0-efd06ee1bacd.png' width=40%>

▼イベント終了後
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/abeee8e6-eb59-e684-7644-da23880393ed.png' width=40%>

次はレイアウトを編集していきます。
▼Zoomのウィンドウキャプチャをデフォルトで追加すると以下のようになります
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/444adb9d-cf21-4a4d-a8c6-f96adce1b255.png' width=40%>

```
⌘+⌥  //コマンドキーとオプションキーを押しながら画面サイズをいじるとトリミングできる
```

この機能を使って画面を整え、表示したい部分だけが表示されるようにします。
▼結果 見せたいものを大画面で見せることに成功しました。
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/244c33cf-7f4b-7a47-d624-88181372986b.png' width=40%>

###配信中のシーン切り替えをスムーズにやる
たくさんのシーンを作ってしまい、切り替えが大変だったのでわかりやすいボタンを作ってみました。
過去に私が書いた記事[obsのシーン切替をLINEBotで操作できるようになるまで](https://qiita.com/inoue2002/items/30eec143185699c3ebc5)を参考にしながら、少しアレンジを加えました。ソースコードは[こちら](https://github.com/inoue2002/obs-linebot)
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">OBSのシーン切り替えをLINEBotでやるやつ、昨日実際に使ってみたんだけど、わざわざパソコン触らなくていいしめっちゃ便利ですよ <a href="https://t.co/xkKFr79lur">pic.twitter.com/xkKFr79lur</a></p>&mdash; ようかん / Yosuke Inoue (@inoue2002) <a href="https://twitter.com/inoue2002/status/1344875685932744712?ref_src=twsrc%5Etfw">January 1, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 配信にだけBGMを載せたい
登壇者はZoomに集まったのですが、配信にだけ待ち時間や休憩時間にBGMを流したいなと思いました。
そこで、BGMとZoomの音声と自分のマイクを別々にしちゃって、音声ミキサーで操作すれば配信の音声をいじることができる事を知りました。
▼最終的な音声ミキサー(BGMだけが流れている状態)
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/dcaec53b-26d7-7247-1796-c6b56f6856c7.png' width=80%>
この状態だと、聞いている側は音楽が流れているだけでZoomの会話は聞こえないようにすることができます。いいですね。

導入には[Mac OBS Studioでデスクトップ音声を出力する](https://www.yamamanx.com/mac-obs-studio-desktop/)なんかが参考になりました。

▼SoundFlowerのインストール
上記記事のSoundFlowerはうまくインストールできなかったので私は[こちら](https://github.com/kawauso/Soundflower-2x4/releases/)からインストールしました。
↓インストールに権限の許可がいるらしいのでこの辺を確認すると何かあるかもです。
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/8469c07b-fd73-619d-5ea8-94b2b37dca6e.png' width=50%>



▼LadioCast　（設定の写真,自信ないので参考程度に）
appleStoreにある。[こちらからインストールページへ](https://apps.apple.com/jp/app/ladiocast/id411213048?mt=12)
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/0594762b-bcc8-96ed-c9bf-73594ccf04a6.png' width=80%>

▼Zoomの設定をいじいじ
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/e9b00b57-9523-6466-c3b7-cd781eacf9bd.png' width=60%>

▼Zoomの音声設定をいじいじ
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/20f411c4-da8d-a216-99bd-3dfa44cd419e.png' width=60%>


#特に事故ることもなく無事配信を終えた
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">初の試み、年越しLT大会を無事終えました!! ダブル配信でとても緊張した中での開催でしたが、無事成功して良かったです！！また登壇者/視聴者ともに沢山の参加していただけて本当に嬉しかったです✨<br>2021年も定期的にイベントを行っていきますのでよろしくです！<a href="https://twitter.com/hashtag/%E3%81%99%E3%81%94%E3%81%8F%E3%81%AA%E3%82%8A%E3%81%9F%E3%81%84%E3%81%8C%E3%81%8F%E3%81%9B%E3%81%84%E3%81%90%E3%82%8B%E3%83%BC%E3%81%B7?src=hash&amp;ref_src=twsrc%5Etfw">#すごくなりたいがくせいぐるーぷ</a> <a href="https://t.co/MvO0OaOR2N">pic.twitter.com/MvO0OaOR2N</a></p>&mdash; すごくなりたいがくせいぐるーぷ@年越しLT大会終了✨ (@sggorg) <a href="https://twitter.com/sggorg/status/1344674148413366273?ref_src=twsrc%5Etfw">December 31, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

この記事は二日間の練習期間と当日配信の三日間の知見が詰まっています。誰かの役に立てたら幸いです。


# おまけ
僕のイベントで登壇した資料を置いておきます。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">本日の登壇資料です!!<br>「LINEで年賀状作成&amp;送信」してみました<a href="https://twitter.com/hashtag/lineapi?src=hash&amp;ref_src=twsrc%5Etfw">#lineapi</a> <a href="https://twitter.com/hashtag/%E3%81%99%E3%81%94%E3%81%8F%E3%81%AA%E3%82%8A%E3%81%9F%E3%81%84%E3%81%8C%E3%81%8F%E3%81%9B%E3%81%84%E3%81%90%E3%82%8B%E3%83%BC%E3%81%B7?src=hash&amp;ref_src=twsrc%5Etfw">#すごくなりたいがくせいぐるーぷ</a> <a href="https://t.co/hcNAvecu5l">https://t.co/hcNAvecu5l</a></p>&mdash; ようかん / Yosuke Inoue (@inoue2002) <a href="https://twitter.com/inoue2002/status/1344679873508327424?ref_src=twsrc%5Etfw">December 31, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>