こんにちは、SORACOM UG運営スタッフの木澤です。
皆さん、SORACOM UG Explorer 2021へご参加ありがとうございました。
私は最近、業務多忙なこともあって本イベントの企画・運営へはあまり協力できなかったのですが、それでも可能なところを、ということでYouTube配信の絵作りと当日オペレーションを担当させていただきました。
昨年コロナ禍に巻き込まれて以来、SORACOM UGのイベント配信を多数担当させていただきました。
今回は細かいミスはありましたが、概ねイメージ通りの配信ができたかと思っています。
忘れないうちに、ということで今回の配信ノウハウをお伝えできればと思います。
アーカイブ動画はこちら
配信の流れ
今回はオンラインのみのイベントということもあり、オーソドックスにzoomから映像を仕入れてOBS Studioで合成し、YouTube Liveに配信という流れを採用しました。
運営メンバーのやりとりはSlackで十分で、楽屋zoomを作る必要はありませんでした。
また今回は運営スタッフ間でバックアップ体制が敷けるよう、Amazon Workspaces上に配信環境を設けました。
OBS Studioでの画面合成を行うため、Workspacesは比較的強力なPowerProのタイプを採用しましたが、下記AWS沼口さんの記事のように、概ね60～80%のCPU使用率で随時推移しておりました。
参考になりました。ありがとうございました。
当日の様子
こんな感じでした。
（もう少し片付けてから撮影すれば良かったと反省・・・お目汚し失礼致しました）
左のモニターは自分が配信用zoomにログインしている画面、中央のモニターはWorkspacesにログインしているモニターです。zoomとOBS Studioが動作している様子が見えるかと思います。
右の小さなPCではYouTube Studioでの配信イメージと視聴者数をモニターしておりました。
つまりYouTube Studioの常時確認を外せばPC 1台でオペレーション可能だったということです。
配信画面デザインの検討
さて、画面デザインの話に入りたいと思います。
今回のイベントでは、プログラム情報より以下のような構成を想定しました。
| プログラム | zoom設定 | 作成するシーン |
|---|---|---|
| オープニング パネルディスカッション エンディング |
ギャラリービュー | ギャラリービュー用シーン |
| 事例セッション ライトニングトーク |
スピーカービュー（登壇中） | カメラ映像ありパターン カメラ映像なしパターン |
| ギャラリービュー（質疑応答） | ギャラリービュー用シーン | |
| 開始前 休憩中 ワークショップ中 |
※zoomの画面・音声は入れない | 幕間スライドの動画再生シーン |
各シーンにおいて、OBS Studio上で以下をハメコミ合成し、配信していたというわけです。
- zoomのウィンドウ
- ギャラリービューでは全体を1枚で切り抜き
- スピーカービュー表示では、スライド部分とカメラ部分を別々に切り抜き
- TweetDeckを表示したブラウザ(Firefox)
zoomギャラリービュー用シーン（オープニング・パネルディスカッションなど）
パネルディスカッションは画面投影無しが基本スタイルとなりますので、zoomギャラリービュー用シーンを1枚作成するだけで大丈夫です。
画面投影無しであれば、こんな感じになりますし
画面投影を行えば、スライドとカメラ映像が並んで綺麗に収まります。
zoomスピーカービュー用シーン（事例セッション・ライトニングトーク）
上述のギャラリービューの設定でも良いのですが、隙間が大きくなりますしスライド表示が小さくなりスライド中の小さな文字が読み取りにくくなるというデメリットが発生するため スライドを極力拡大表示し、登壇者のカメラ映像を右下にずらす画面デザインとしました。
そのため、zoomのウィンドウからはスライド表示部分と登壇者カメラ映像部分を別々に切り抜き、ハメコミ合成する対応を行っています。
またその場合、スライド右下部分がカメラ映像と重なり見えなくなる可能性があるため、即座に切り替えできるよう、カメラ映像ありのシーンと無しのシーンの２パターン用意しました。
カメラ映像ありの場合（文字が重なって欠けています）
カメラ映像なしの場合
また、事例セッションでは登壇後に質疑応答の時間が用意される予定でしたので、ギャラリービュー用のシーンも用意しました。
よって事例セッションでは各プログラムごとに３シーン、ライトニングトークでは各登壇者ごとに２シーンを予め準備していたということになります。
開始前・休憩中・ワークショップ中の幕間スライド
今回初めて採用したテクニックなのですが、何とPowerPointにはmp4動画を出力する機能がありますので、画面切り替えを自動化したPowerPointファイルを予め作成しておき、OBS Studio上で埋め込みました。
これで自動的に画面が順次切り替わる幕間スライドが配信できるようになりました。
作成した配信デザイン
ということで、これもPowerPointで作成した配信画面イメージはこちらになります。
これをキャプチャした画像をOBS Studio上で背景として設定して利用しました。
注意すべき設定
ウィンドウサイズの固定
zoomやTweetDeck(Firefox)のウィンドウサイズが変わるとハメコミ合成の位置がズレてしまいます。
予め設定したウィンドウサイズを記憶するために、ウィンドウ位置記憶プログラム(VBWinPos)を常駐させウィンドウサイズを固定化しておりました。
zoomの設定
zoomの設定で最低限注意すべき設定は以下２つのみでした。
カメラON以外の参加者を非表示
zoom設定(ビデオ)の「ビデオ以外の参加者を非表示にする」
これで登壇者以外は非表示にできますので、スピーカービュー表示の時に待機している参加者を表示することを防ぐことができます。
スライド共有時の画面最大化を抑止
zoom設定(画面の共有)で「画面を共有している場合のウィンドウサイズ」を「現在のサイズを使用する」に変更
zoomの標準設定では、他の参加者で画面共有を最大化した際に最大化されてしまいますので、画面ハメコミにズレが発生してしまいます。
本設定を行うことで、ウィンドウサイズの変更を抑止することができます。
Workspaces内での音声接続
Workspaces内においてzoom音声を標準のオーディオデバイスに出力すると、ローカルPC側から音声が再生されてしまいループしてしまいます。
そこで、仮想オーディオデバイスを作成しzoom音声をそこに出力、これをOBS Studio側でモニターすることでローカル側からの音声出力を回避、zoom⇒OBS接続のみ接続されるように設定しました。
zoom側で出力デバイスをVBAudioに設定
OBS Studio側でデスクトップ音声のモニターデバイスをVBAudioに変更
当日オペレーション
ということで、OBS Studio上で合計33個のシーンを予め作成しておき、当日に臨みました。
昨年の反省から随時テキストファイルの埋め込みでプログラムタイトル等を書き換えることは諦め、確実を期するため全セッション分のシーンを予め用意した次第です。
そのため、当日のオペレーションは単純で
- プログラム進行に合わせてシーンを切り替えたり
- 必要に応じて「キュー！」を出したり （※最初、放送に乗ってしまって恥ずかしいww）
- 登壇者カメラ画像がスライドと被っていた場合はカメラ映像無しのシーンに切り替えたり
この程度のオペレーションで済み、焦ることなく当日の作業を行うことができました。
最後に
来年のSORACOM UG Explorerはオフライン開催できるのか現時点では確定できませんが、ニューノーマルの時勢において、今後オンラインとのハイブリッド開催は必須となると思います。
来年の配信担当が私になるかどうか判りませんが、備忘録としてブログ記事としてまとめさせていただきました。
他のコミュニティイベントにおいても参考にしていただければ幸いです。