見出し画像

CLS高知 2020初鰹編オンライン 舞台裏（Live中継技術編）

地方でマルチワークするIT屋の記録

5月23日に開催した「コミュニティリーダーズサミットin高知 2020初鰹編オンライン」は、参加申込みが160名を超え、Twitterでのツイートが1500を超えてトレンド入りするなど、予想以上の盛況で終えることができました。

私はCLS高知実行委員会のLive中継担当スタッフとして参加しましたので、その視点からの技術面についてこちらでご紹介したいと思います。

当日のアーカイブ YouTube 動画
https://youtu.be/q0LvZABn73M

Live中継運用編は先日公開した以下を参照ください。
https://note.com/yukataoka/n/nc9369f77827c

配信スタッフ

スライド33

技術説明の前に、先ずは今回の配信に携わったスタッフの皆さんをご紹介します。

・高知会場の映像制作担当：NPO法人SOMA ITディレクター 杉尾 亮 さん
　（円囲み中央）　https://www.nposoma.org/
・映像配信当日スタッフ：CLS高知実行委員会スタッフ 杉本 憲昭 さん
　（円囲み右端）　https://twitter.com/candypop0124
・映像配信担当：CLS高知実行委員会スタッフ 私
　https://www.facebook.com/yukihito.kataoka 

・東京会場の映像制作担当：株式会社ビッグビート の皆さん
　https://www.bigbeat.co.jp/

以上の皆さんのご協力により、各会場の映像作成とLive配信を実現することができました。感謝！

配信機器と構成（レンタルとあるもの主体）

先ずは利用機器、ソフトを以下にご紹介します。

PC1　HP Spectre x360（普段使いのPC）
・OS Windows 10 Pro
・CPU Intel Core i7-8550U 1.8GHz　メモリ 16GB
・GPU Intel UHD Graphics 620 8.0GB

PC2　Microsoft Surfac3 Pro（サブPC）
・OS Windows 10 Pro
・CPU Intel Core i5-4300U 1.9GHz　メモリ 8GB
・GPU Intel HD Graphics Family 2.2GB

PC3　MacBook Air 13インチ 2013年モデル（サブPC）
・OS macOS Catalina 10.15.3
・CPU Intel Core i5-4300U 1.9GHz　メモリ 4GB
・GPU 無し

映像スイッチャー　Roland VP-42H VIDEO SWITCHER（レンタル）
・機器情報　https://proav.roland.com/jp/products/vp-42h/
・レンタル先　https://rental.pandastudio.tv/list/roland-vp-42h/
　購入すると高いので10日程度のレンタルがお勧め。

映像キャプチャー（購入）
・ezcap269 USB3.0 HDMI　https://www.amazon.co.jp/dp/B07Z48YTG4/
・BOSTIN USB 3.0 HDMI　https://www.amazon.co.jp/dp/B07VD7QK81/ 
　とりあえずスペックが問題なく、Amazonで在庫があるものを購入。
　2品とも当たりだったので良かったが、事前に準備できている方が良い。

ディスプレイアタプター（普段使い）
・Mini DisplayPort-HDMI 変換　https://www.amazon.co.jp/dp/B07313HSY8/
・USB Type c HDMI 交換　https://www.amazon.co.jp/dp/B07RXQRZTL/

利用サービス・ソフトウェア（zoom のみ有償）
・TweetDeck　https://tweetdeck.twitter.com/
・OBS Studio　https://obsproject.com/ja
・zoom　https://zoom.us/
・YouTube Live　https://www.youtube.com/

上記に買い足したHDMIケーブルなどを含め、購入とレンタルで支出した金額は約6万円程度でした。

スライド7

上図は配信構成を簡易に表したものです。以下にそれぞれの機器が担当した内容をご説明します。

PC1の担当
製作いただいた会場の映像と音声を PC1 に取込み、zoom に中継しました。PC1 では同時に Youtube Live 配信用の Twitter 表示や、プレゼン資料をはめ込んだ画面フレームを OBS Studio で作成、スイッチャーに映像出力しました。PC1から見て、スイッチャーはマルチモニタの１つになります。

PC2の担当
PC2 では zoom の映像・音声をスイッチャーに出力し、PC1から出力した画面フレームに合成しました。PC2でも、スイッチャーはマルチモニタの１つになります。

スイッチャーとPC3の担当
PC1 の画面フレーム と PC2 の映像をスイッチャーで合体し、会場用に映像を出力するとともに、YouTube Live 用の映像と音声を PC3 に出力しました。PC３では、スイッチャーから受け取った映像と音声を OBS Studio からインターネット経由で YouTube Live に配信しました。後はWebの管理画面から YouTube Live を開始して、皆さんにライブ映像が届き、自動でアーカイブが作成されました。

スイッチャーの出力は2つまででしたので、映像出力の HDMI 分配機を利用しました。（図には記載できていません。）会場に予備がありお借りしましたが、分配器を事前に用意しておくべきでした。

各機器はそれぞれ相性問題がありますので、必ず事前の動作確認を行い、可能なら代替え機を用意しておくのが良いです。

配信機器と構成のトラブル

スライド8

上図はより詳しく配信構成を記載したものです。以下に準備中に発生したトラブルについてご説明します。

PC1の負荷と発熱問題
「PCで負荷をかけた際の発熱」はLive配信で異常終了するなどの懸念される問題でした。PC1では以下の作業を並行して行うため、最も負荷をかけていました。
・zoomへの映像・音声出力
・zoomの登壇者管理
・Twitter表示
・プレゼン資料表示
・OBSでフレーム合成し、スイッチャーに出力
上記で3時間以上の運用試験を行うと、CPUは60%以上、GPUはほぼ100%の稼働率が続き発熱がすさまじい状態でした。さらに、上記構成以外に動画を再生するなどの過負荷試験中を行うと、OBS Studio の異常停止や、試験後に OBS Studio を閉じると異常終了するなどのトラブルがありました。
この熱対策として、本体がアルミである PC1 の特性を利用して、ホームセンターで厚さ 1mm のアルミ板を購入し、PCと机の間に挟みました。少しの効果かもしれませんが、運用編で説明したような長時間負荷が続く場合は有効だったのではと推察します。

zoom 音声出力の問題
機器構成を設計した際に「会場の音声提供は、会場の映像・音声を出力した PC1 の zoom から行う」という原則をすっかり忘れていました。
会場へ映像を提供するスイッチャーから音声を出力すると、入力系統が違うため、当然ハウリングが発生します。会場でアンプ付きスピーカーをお借りできたからよかったのですが、今回のように構成が複雑になるとあたり前のことを忘れてしまいがちで、注意が必要です。

PC2 からスイッチャーへの音声提供
PC2 からスイッチャーへ zoom の音声提供は HDMI で問題なさそうに考えていましたが、実際は「スイッチャーへの音声出力は PC2 の音声出力から行う」必要がありました。zoom は PC に HDMI 出力を差し込んでもスピーカーとして認識できないのが原因だと思います。再生した動画などは HDMI で問題なく音声を出力できているので、うっかりしがちですが、、、。

オーディオケーブル不良の問題
機材は自宅から会場まで車で運びましたが、オーディオは「ケーブルの予備」を準備できていませんでした。長年使ってたもので、壊れないだろうとの思い込みがありました。
今回はステレオ音声の右のみが故障していたため、気づくのが遅れて予備を手配するまで時間がかかり、リハーサルを15分遅れさせてしまう結果となりました。音声への拘りが以外に思われるかもしれませんが、オンライン開催を成立させるのに最も重要なのは音声です。オーディオケーブルの予備を持っていなかったのは大きなミスでした。

以上が映像配信機器周りで発生したトラブルでした。私のドタバタとは裏腹に、東京会場で粛々と準備を進めたビックビートの皆さん、流石でした！

配信画面構成（OBSとスイッチャーの活用）

スライド11

今回のLive中継の画面構成は、OBS Studio とスイッチャーの合わせ技で実現しました。この辺りは素人ですので、天神放送局の松井さんが公開された「Backlog World 配信構成」を参考に、構成を組み立てました。

４つの基本レイアウト作成
先ずは以下の4つの OBS Studio で利用する背景レイアウトを準備しました。デザイン心のない私でも、数少ない CLS高知 の画像素材と、パワーポイントの活用で簡単にデザインができました。

スライド34

１~３の黒背景は、スイッチャーの「ルミナンスキー・合成」機能を利用して、登壇者の zoom 画像を組み込むために用意しました。

ルミナンスキー・合成
「ルミナンスキー・合成」とは、ある色の映像だけ、別の映像を合成してはめ込む手法です。普段は緑色が良く使われますが、今回のスイッチャーは黒（ #000000 ）と白（ #FFFFFF ）の2択でしたので、利用しやすい黒にしました。

Twitterのタイムライン表示
この背景画像を OBS Studio に取込み、Tweet を表示する画面と結合しました。
１~３の右端白背景は、Chrome で TweetDeck のタイムライン表示をする枠として用意しました。下図のように OBS Studio で Tweet 表示を合成した背景を、スイッチャー側でルミナンスキー合成で 別の zoom 画面を黒背景に結合することで、今回の構成を実現しました。

スライド6

登壇者用スライド表示
また、今回は登壇用のスライドを表示する画面も必要でした。
スライドの大画面でもなるべく登壇者の表情までお伝えしたいですし、登壇者の大画面でも、資料の文字が読めるようにしたい。これを実現するレイアウトを色々試して、最終的に落ち着いたのが以下です。

スライド23

上図の１,２の部分に登壇者を表示しますが、小さい画面を少し重ねました。重なった部分は欠落しますが、小さい画面をこの大きさで顔の表情や、資料の字が伝わりやすくなりました。
スライドは OBS Studio で PDF のフル画面表示を結合しています。無論パワーポイントでも可能ですが、発表ツールの影響などで表示トラブルを懸念したため、表示と操作がシンプルな Acrobat Reader を利用しました。

スライド13

実際にLive配信に流れた映像ですが、ぎりぎり小さい文字も確認できました。

なお、突如 zoom から登壇資料を表示する事態にも備えて、PC1 の zoom は「デュアルモニタ設の使用」に設定し、「画面共有の画面」を OBS Studio で結合できるように準備していました。当日のLive配信でこの構成を利用することはありませんでしたが。

OBS Studio の設定
OBS Studio はネットに詳しい情報がありましたが、たまにドローン空撮映像の編集などで感覚が慣れているためか、直観的に操作できました。もし全くわからないという方は、以下の情報が参考になると思います。

　OBS Studioの詳しい使い方・設定方法
　https://vip-jikkyo.net/how-to-use-obs-studio

スイッチャーの設定
初めて操作するスイッチャーでしたが、設定などの情報はネットに少なくて、取り扱い説明書を読みながら実際の設定した結果を確認して操作を覚えました。説明書は専門知識がないのでわかりづらいです。また、Webで設定はできたのですが、肝心な映像を組み立てる Composition の設定 UI が悪くて苦戦しました。

　Roland VP-42H VIDEO SWITCHER 取扱説明書
　https://proav.roland.com/jp/support/by_product/vp-42h/owners_manuals/

登壇画面は zoom にお任せ
今回は最大4か所から zoom で同時中継を行いました。実際 zoom 内には複数の方が入室していましたが、「ビデオ以外の参加者を非表示に設定」することで、ビデオを開始していない方が表示されないように設定しました。
この設定で zoom のギャラリービュー表示 状態で、登壇者にビデオを開始をコントロールしてもらい、zoom 任せで何もせず以下の表示になりました。

スライド21

zoom の画面は見せ方を変えることもできますので、以下などの情報を参考にイベントに合った表示を検討しておくと良いです。

　参加者のビデオレイアウトの変更方法を教えてください。
　https://zoom-support.nissho-ele.co.jp/hc/ja/articles/360021814531

準備期間は長めに
以上の配信画面構成は、何回も試行錯誤して採取的にはLive配信の前日に完成しました。イベントの特色を生かそうとすると、簡単にイメージどおりのフレームは作成できませんでした。準備期間を9日間確保できていたので、結果オーライでした。

配信画面構成のトラブル

今回のLive中継の画面構成は、全く問題がなかったわけではありません。実際に大きなミスが２点ありました。

登壇者2名で画像が切れてしまう
これは登壇者フレームサイズの調整ミスですが、zoom は1名、2名、3・4名で映像のあるフレームサイズが変わります。以下は振り返りのための実験画像ですが、zoom 登壇者が3名の場合は以下のサイズになります。

スライド4

このサイズは、1名で登壇した場合より小さ目ですが、1名登壇画面の端が少し切れる程度ですので、このサイズを基本に設計、設定しました。

ですが、このサイズを2名で登壇した場合にあてはめると、端が以下のように切れてしまいます。

スライド5

実際に切れてしまったシーンが以下です。

スライド15

折角素晴らしい映像を作っていただいたのに、本当に申し訳なかったです。

スイッチャーのチャンネルは余っていたので、先にご説明した「ルミナンスキー・合成」をする画面を小さくしたレイアウトを追加しておくだけで回避できました。事前に十分試験したつもりでしたが、全表示パターンを試すことができてなかったことがトラブルにつながりました。これを読まれた皆さんは同じ失敗をしないように、可能なら事前に全表示パターンを試験しておくのが良いです。

登壇資料の一部が表示できなかった
これは登壇資料を集めるのが開催前のぎりぎりだったことも影響していますが、登壇資料と登壇者表示が重なる部分に記載があり、資料の一部が表示できませんでした。今回のように変則レイアウトを使う場合は、予め登壇者に連絡しておくか、修正可能なタイミングで事前に資料を確認しておく必要がありました。

特に、以下の場合はQR コードが重なりました。QR コードの欠落情報を補正できる特性に助けられ、スマホのカメラで認識できて良かったのですが。（汗）

スライド37

zoom のトラブルを想定した準備

今回のLive中継は zoom にはトラブルがなく、本当に助かりました。
実は、直前の実行委員スタッフの zoom ミーティングで zoom に障害が発生したため、急遽 Google Meet に切り替えるトラブルが発生していました。

この経験から、zoom のダウンに備えて Google Meet バックアップ環境も用意していました。もし zoom にトラブルが発生した場合は、先の「4つの基本レイアウト」の１のみで、Meet を使った Live中継を行う準備もしていました。幸いなことに、今回利用することはありませんでした。

YouTube Live について

今回のLive中継は、先にご紹介したように YouTube Live を利用しました。

バックアップ環境
こちらもですが、配信試験中にトラブルを経験してバックアップ環境を準備していました。この件は映像プロの三浦さんが気づいて Tweet していただきました。

今回の YouTube Live の URL を Google スライドでご紹介した理由は、このトラブル対策の一環でした。

YouTube Live の URL は固定できない
YouTube Live の問題で最も大きかったのが、トラブルで一旦配信が停止すると別の配信設定を利用しなければならず、URLが変わってしまうことです。通知したURLが使えなくなり、連絡できないのは致命傷です。
この対策のため、予備配信環境の準備と、YouTube Live の URL を Google スライドで通知する方法を採用しました。トラブルがあった場合は、Google スライドで変更後の URL を確認いただくことで、Live中継に復帰いただけます。

YouTube Live ではうっかり写ったが許されない
これは YouTube Live で事前テスト中の事ですが、うっかり公開設定の試験環境にPCのエバンゲリオンの壁紙が映っると、ライブ中継が強制終了しました。このようなうっかりミスは本番でもあり得ますので、事前に注意することは無論ですが、代替えの配信環境と URL 変更通知ができることは重要です。

YouTube Live ではうっかり流れたが許されない
先ほどのトラブルとほぼ同じですが、自宅で試験中に Alexa から流れてた音楽（ドリカム Love Love Love）を感知し、限定公開設定でしたが警告メールが届き、実行委員のメンバーと試験結果の映像が共有できなくなりました。とにかく、YouTube Live では著作物が紛れ込まないようにチェックしましょう！

YouTube Live の設定
なお、YouTube Live の設定はわりと楽でした。今回利用した OBS Studio から YouTube Live に映像を配信するのは、OBS Studio に YouTube Live のキーを設定し配信開始ボタンをクリックするだけです。
以下に YouTube Live の設定のポイントを列挙します。
・ライブ配信の遅延は「通常の遅延」（遅延30秒程度なので動画品質優先）
・ストリームキービットレートは「可変」（ネットワーク状況に合わせる）
・チャット機能はOFF（Twitterを併用）
YouTube Live の設定については、以下の情報が大変わかりやすく、参考になりました。

　Youtube LIVEの配信設定（2019.10月）
　https://www.juns.jp/info/support/20191024

ライブ配信結果（まとめ）

スライド10

今回のLive映像配信の技術ポイントを以下にまとめました。今後に少しでも活用いただけると幸いです。

・持ち寄りの機器環境でも Live 配信は可能（但し、PC のスペックに注意）
・できる限り1つの PC に複数の作業を割り当てない
・負荷がかかるPCは熱対策を行う
・可能ならスイッチャー、配信エンコーダーなどは専用の機器を利用
・会場の zoom 音声は、zoom に接続したPCから出力（ハウリング対策）
・zoom 音声をスイッチャーに出力するには、PC のアナログ出力を利用
・ケーブルは予備を準備（特に音回り）
・基本レイアウトの設計と背景画像作成には PPT が活用できる
・基本レイアウトは4つの構成で運用した
・登壇者映像のはめ込みは、スイッチャーのルミナンスキー・合成を活用
・Twitter のタイムライン表示の合成は OBS Studio を活用
・資料スライドは PPT より PDF ファイルの利用が楽
・zoom の画面は「ビデオ以外の参加者を非表示」で設定
・zoom の画面は参加人数で登壇者の表示範囲が変わるので注意
・登壇者の資料は事前にレイアウトに表示して確認
・zoom のトラブルを想定した代替えサービスを準備
・YouTube Live の設定は予備を準備
・YouTube Live のURL通知は、変更できる方法で実施
・YouTube Live でうっかり著作物が入らないように注意

今回は本来なら以下のように「配信エンコーダー」を利用するか、もう1台配信エンコーダー用のPCを準備した構成にして、PC1 に集約した作業を PC3に分割したかったのですが、事前に機器を手配できなくてギリギリに近い状態でLive中継を行いました。

スライド9

Live配信ではトラブルもありましたが、最終的には途中で停止するこもなく予定の最後まで終えることができました。休日と夜間にLive配信の試験を繰り返すのは大変でしたが、事前に準備した成果は出たと思います。ま、こういうの好きですから楽しいのですが。（笑）

スライド32

謝辞（参考情報）

今回のLive中継は、天神放送局の松井さんの情報を参考に構成させていただきました。このような貴重な情報をオープンな場で提供いただき、ありがとうございました。

特に「Backlog World 配信構成 解説」は、私を含め Live中継 を考えている皆さんの素晴らしい参考書だと思います。

そして、今回の配信について教授いただきました、大泉さん、西馬さんをはじめとしたJBUGの皆さん、ありがとうございました。皆さんからの教授があてってこそ、今回の #CLS高知 の配信を成功させ、好評をいただくことができました。

そして最後に、Live配信に尽力いただいた皆さん、視聴いただいた皆さん。ありがとうございました！


この記事が気に入ったらサポートをしてみませんか？