8/21(金)～8/25(火)に、エンジニアカフェでは開設1周年イベントをオンラインで行いました。

スタッフブログ第7回は、その際に使用したオンライン配信の設定について細かく解説します。

 

イベントの概要や完成した姿については前回の記事を参照して下さい。

1周年イベント・オンライン配信【完成編】 – エンジニアカフェスタッフブログ vol.006

https://engineercafe.jp/ja/topics/1753

 

課題のおさらいと、その解決策

 

• 登壇者が遠隔で音声・映像の条件が揃わない
• 登壇者の慣れない操作をなるべく減らしたい

→操作に慣れている人が多いZoomを採用

→登壇者の操作をなるべく増やさない

→Zoomの音量レベル自動調整、エコー除去に頼る

 

• 登壇者の数がセッションごとに増減する

→配信用と控え室を別々のブレイクアウトセッションとして準備、配信スタッフが移動操作を行う

→ダミーアカウントを複数準備、配信用のブレイクアウトセッションの人数を常に一定に保つ

→OBSで切り抜き設定がしやすい

 

• 登壇者の顔などを資料に重ねたくない
• 小さなスマホ画面でも見えるサイズで演目などを表示したい

→OBSで資料とカメラ映像を再配置

→フォントはなるべく大きいものを使う

→背景と資料との明暗差を大きくしないように調整

 

• 画質・フレームレートはプレゼン資料が確実に読めるラインを目指す

→OBSで細かく画質を調整

→フレームレートを落としても音質と画質を高く保つ

 

以下、細かく設定を解説していきます。

 

配信構成図

 

実際の配信の様子を表した模式図が以下です。

登壇の流れ

1. 主催者側で準備したZoomミーティングに登壇者の方々に参加してもらう
2. 登壇者に挨拶して「メイン」→A「登壇前控え室」へ登壇者&MC移動
3. 登壇者&MCをA「登壇前 控え室」→B「ON AIR」へ移動
4. Zoom&OBSで画面を準備(後述)
   →ダミーを移動させて人数を調整(今回は6人にする)
   →画面に表示している名前と顔の表示をあわせる
   →登壇者にZoomでプレゼン資料の画面共有をお願いする
   →資料&登壇者の画面に切り替えてセッションスタート
5. セッション終了後、登壇者をB「ON AIR」→C「登壇後 控え室」へ移動させる
   →登壇後控え室にスタッフも同席できれば「お疲れ様でしたー」と挨拶
6. メインへ移動した後に退席

 

という操作を繰り返します。それぞれ上記の図の中の①～⑥の番号に対応しています。

実際には前のセッションの終了後の操作と次のセッションの開始前の操作がセッション転換の数分間で同時進行するので、操作はかなり複雑です。

この構成を実現するために、次の章では細かい設定をしていきます。

 

準備・設定

【Zoom】

環境設定

• 一般>「デュアルモニターの使用」のチェックをON
  • 画面共有された資料ウィンドウとカメラ一覧ウィンドウが別々に表示される
• 画面の共有>「参加者が画面を共有した場合、全画面に移行」をOFF
• 画面の共有>「参加者が画面の共有した場合、Zoomウィンドウを最大化」をOFF
  • 登壇者が画面共有をON/OFFしたときに画面が乱れるのを防止

 

ブレイクアウトセッションの準備

• A「登壇前 控え室」、B「ON AIR」、C「登壇後 控え室」、D「ダミー控え室」の4つのブレイクアウトセッションを作成
• 配信担当者は2つの端末から別々のアカウントで接続し、メインミーティング(ブレイクアウトセッション外)とB「ON AIR」(ブレイクアウトセッション)に配置する
  • 「メイン」(Zoomミーティングに入ってすぐのところ)に配置する配信担当ユーザはブレイクアウトセッションの移動操作を担当(ホスト権限が必要)
  • B「ON AIR」に配置する「配信&タイマー」ユーザはホスト権限不要
  • メインに配置する配信担当ユーザは最低限Zoonが動作するスペックのPCでOK
  • B「ON AIR」に配置する「配信&タイマー」の端末は配信エンコード用の高スペックPC
• ダミー参加者を作成して参加させる
  • 招待リンクをブラウザのシークレットタブで開き、「ブラウザで参加」させてマイクやカメラをONにせず画面の端で起動しておく
• B「ON AIR」の人数を調整
  • B「ON AIR」に在室している画面の数が常に同じ数(今回は6人)になるように「ダミー控え室」との間でダミー参加者を移動させて調整する

 

画面の準備

 

• 表示のサイズと位置を固定し、大きなディスプレイに表示する
  • プレゼン資料ウィンドウ(登壇者が画面共有)
  • 各登壇者のカメラ一覧ウィンドウ
  • 上の2つのウィンドウをそれそれ1920×1080で表示してOBSでキャプチャしたい
  • 4Kディスプレイを使用した(後のOBSのところで図解します)
• iPadにLTタイマーアプリを表示させて、USB-C → HDMIアダプタ → HDMIキャプチャ経由で「配信&タイマー」担当のカメラ部分に入力すると、登壇者だけに見えるタイマーになって便利

 

【OBS】

 

資料ウィンドウと顔の映ったカメラ画像の切り取り処理

• OBSの「ウィンドウキャプチャ」ではなく「画面キャプチャ」でウィンドウが表示された領域を切り抜く
  • 画面共有の切り替えやZoomの再起動などで設定が外れるのを防ぐため
  • 表示しているウィンドウの解像度に影響されるので、なるべく解像度の高いサブディスプレイに表示したものを切り抜く
  • 「フィルター>クロップ/パッド」で数値入力して切り抜く(数値をメモしておくとバックアップになる)
  • 他のウィンドウがその領域に表示されてもキャプチャされてしまうので、ポップアップ通知など表示されないように注意
• 「イメージ マスク/ブレンド」フィルタで黒地に白で図形を描いた画像フィルタを読み込むと白部分の形状で切り取られる(今回は黒地に白丸のため、カメラ映像が丸く切り取られる)

↑マスク画像の例

 

シーンの作成(画面配置)

前章で切り抜いた要素を配置して、セッションごとにシーンを作成する。

• プレゼン資料部分は16:9を基本として配置
  • 4:3の場合黒帯が左右に出る
  • 特殊なアスペクト比(超横長ワイドディスプレイなど)の画面に表示した登壇者が資料を共有しているとその特殊な解像度に変更され周囲に黒帯が出るので、手動で切り取りして対応
• 背景はキービジュアル画像(半透明)とその画像の背景色を重ねて淡色に調整
  • 黒文字と白文字どちらも見やすくした
• セッションタイトルなどの文字はなるべく大きく太く
  • 参加登録用QRコードなどの位置は登壇者数などに応じて変更

 

【その他】

• 映像ストリームを複数サイトへ配信するために「RTMP Relayer」を利用
  https://github.com/tokjin/RtmpRelayer

• Facebookライブはプレビュー配信と本番配信でストリーミングの負荷が違うので、かならず「テスト配信(管理者しか見えない)」を利用してビットレートや画質などの設定を決める
• この構成はPCへの負荷がとても高いので、高性能なGPUが搭載されているPCを配信専用として準備
  • NVIDIA製のグラフィックボードを積んでいると最適化されたNVENCが使えて高画質

 

改善できそうな点

• 操作が複雑かつ属人的だったため、端末を増やしてHDMIスイッチャなどで操作できるような体制にしてミスを減らしたい
• WiFiで通信する必要があり配信画質を下げたので、有線LANを配線するなどして高画質で配信したい
• オンライン登壇者分の配信作業はAzure上のWindows10のVM内で処理すれば回線環境が向上するかも?

 

その他検討したツール

• Microsoft Teams(→Zoomと比較)
  • 複数の部屋の行き来がスムーズとの噂を聞いてテスト
  • 未実装だった……
  • ライセンスとそれに関するドキュメント、そのドキュメントの日本語訳が難解かつ古い情報が公式情報としてヒットするのでだいぶ混乱した
• Restream(→RTMP Relayerと比較)
  • オンライン上でRTMPストリームを分配してくれる
  • カスタムRTMP設定が有料
  • テストしたときに配信ONOFFのレスポンスが遅くトラブル時に不安が残った

 

まとめ

オンラインならではの難しさ、面白さもたくさん見えてきた一周年イベントでした。オンライン・オフライン共にこの知見を生かしていきたいですね。