Vtuberが進行するZoom使った超多元中継ライブ番組の作り方

2020年11月8日 01:52

本記事ではATEM Mini Proを使ってFacebook LiveやYouTube Liveへライブ配信をする一例を紹介しています。OBS、Zoom、3tene(VRoidアバター)等のソフトを連携させて実際にライブ番組を配信した時のメモになります。

ライブ番組「花火でつなぐ100人リレー・オンライン」とは?

やあ、みんな、今年の夏はコロナくんの影響で全国の花火大会も中止になっちゃったよね … 残念。
実はおいら「おやまサマーフェスティバル(栃木県小山市)」の花火大会を毎年、公式ライブ中継しているんだ。今年はもちろんそれも中止になっちゃって…。いや、こんな時だからこそ「ライブ中継だよ」「オンラインだよ」ってことでイベントをブチ上げてみたよ。
その名も「花火でつなぐ100人リレー・オンライン」うぇーい。どんなイベントなのか、まずは紹介動画を観てよ。
※ 本番動画のリンクは記事の最後にあるよ。動画の終盤にはドローンでの超近距離映像特典もあるからぜひ観てみて。

花火でつなぐ100人リレー・オンライン
- みんなで作るオンライン花火大会 2020 - YouTube

簡単にいうと「ご家庭とかグループで花火をしてもらって、それをZoomでつないで、オンライン配信するという企画。MCはアバターのクーコちゃん」ってな感じ。今回はこれを実現するためにどうやったのかって話を書いていくよ。

2019年までの番組構成とシステム構成

2019年までの番組構成は屋上特設スタジオでMCとゲストがトークをするという形式だったんだ。トークのみの時にはスタジオの全画面映像、花火が打ち上がっている時には花火の全画面映像にスタジオ映像を小さくワイプで入れるといった画面構成としてた。
下図の例では、花火の全画面映像の右下にMCのスタジオワイプ映像、左上にはスポンサー用のロールテロップを常時表示しておいて、場面に応じてさらに字幕スーパーを重ねるといった感じ。

この頃は花火のライブ中継は建物の屋上でやっていたから、コンクリートの照返しのキツイ真夏の炎天下で準備をしてた。で、夜になっても気温が下がらず、その中でリアルタイムにガツガツと動画エンコードしてライブ配信するというPCには過酷な環境。PCの下に保冷剤を敷いて扇風機で風を当てて熱暴走しないように気を遣ってた。そしてさらなる問題は現地の回線が貧弱すぎて、泣く泣く映像を低品質に落としてもそれでも配信が途切れる始末。
回線品質低下の一つの要因としては、花火大会の当日って43万人もの人出があるから、携帯キャリア各社は移動基地局車を出してくるけどそれでも間に合わないくらいの状況になる。なんてそんなことも絡んでだと思うけど、有線のネットワークもツラい状況になるという劣悪環境。それで毎年、安定性を求めていろいろ試してきたわけ。
とはいえ現地での組立準備などを考えて、最終的には下図のようなシンプルな構成になっていた。

あからさまにPCに負担が集中しているのが一目で判るでしょ。MacBook Pro 2017を使っていたので(動画配信という重めのタスクとはいえ)ノートPCとしては性能が低すぎることはないと思うが熱の問題を解決できないでいたんだ。

配信を途切らせないシステム構成

今年は番組構成もガラッと違うし、話題で品薄だったATEM Mini Proを入手できたので新たなシステム構成で組んでみた。

今までPCからOBSを使って最終エンコードして配信をしてきたわけだけど、熱や回線の状況で不安定になりがちなPCの負担を減らすために、それらの処理を専用機であるATEM Mini Proにやらせようというのが今回のシステム構成のキモ。ATEM Mini Proが熱にどれだけ強いのかは分からないんだけどさ。映像機器大手のBlackmagic Designが(電源スイッチすら付けずに)稼働し続ける前提で送り出してきた製品に期待せずにはいられない。頑張ってくれ〜と願いも込めて。(笑

・ATEM Mini Pro
　映像・音声切替、映像配信、映像録画
・MacBook Pro
　多元中継(Zoom)、字幕など画面構成(OBS)
・Windows(Mac mini)
　アバター表示・制御(3tene)
・AppleTV + iPadなど
　動画・音楽再生

ここに挙げた4つの機器のそれぞれに処理を分散させて各負荷を軽くしていこうという作戦。このような構成であれば、メインPC(MacBook Pro)が動作不安定になっても、最低限ATEM Mini Proに保存された静止画(例えば「しばらくお待ち下さい」的な)を表示してマイクからの音声を配信し続けることができる。MC(進行役)が語りかけて場をつないでいるうちに機器の復旧ができるから、視聴者への不安が減るんじゃないかと思う。また、同じくメインPCの負担を減らすために分離したアバター用PC(Windows - Mac mini)が動いていればMCは音声だけでなくアバターのまま語りかけられるからエンターテイメント性を維持しながら待ってもらうこともできるんじゃないかな。

映像配信 - ATEM Mini Pro -

今回はFacebookライブでリアルタイムに番組配信をして、録画したその映像を編集・調整してからYouTubeにアップロードするということにした。

【打上げ花火特典映像付き】花火でつなぐ100人リレー・オンライン
- Fireworks Relay 2020 - YouTube

Facebookでライブ配信をするには、撮影している映像をリアルタイムでH.264形式にエンコードしながらFacebookサーバにストリーミングしてあげないといけない。(このあたりはYouTubeライブ配信でも同じ)
このエンコード処理は一般にCPUパワーをメッチャ使うから配信用PCは不安定になりがちなんだよね。最近のMacBook ProはCPUとは別にハードウェアエンコーダが使えるからCPUには余裕が出来るけど、機体としての熱の影響はやっぱり心配が残っちゃう。
というわけで、今回はライブ配信(と映像切替)専用ガジェットを用意したわけ。その名もATEM Mini Pro ! ど〜んっ。

ATEM Miniシリーズ
https://www.blackmagicdesign.com/jp/products/atemmini

ATEM Miniシリーズには2020年11月現在で3つのモデルがある。このうち最下位モデルのATEM Miniでは配信や録画の機能がないから注意してね。
・ATEM Mini
・ATEM Mini Pro
・ATEM Mini Pro ISO

写真では分かりにくいかと思うけど、左から音声×2、HDMI入力×4、HDMI出力、USB type-C、LAN、電源がつながっている。
この項ではまず配信について説明するね。

今回は配信した映像と全く同じものをYouTube用に録画したかったので、上の図のような接続になる。配信用にはLANケーブルでネットへ接続、録画用にはUSB(Type-C)ケーブルでSSDへ接続した。(もちろん、HDDやUSBメモリでも録画できる)

線をつないだら、あとON AIRボタン、RECボタンを押すだけ。配信も録画もATEM Mini Proが元々持っている機能だから楽ちん。あ、配信先の指定とか、録画ファイル名の指定などはMac(またはWindows)専用アプリからやるよ。

詳しい説明はBlackmagic design公式記事のリンクを貼っておく。YouTubeでの配信例なんだけど、ATEM Mini Proの設定より、YouTube側の設定のほうが面倒なくらい。

ATEM Mini & ATEM Mini Proを使ってYouTube Liveで生配信をする方法
(ATEM Mini Proでイーサネット経由の直接配信)
https://vook.vc/n/2164

映像切替 - ATEM Mini Pro -

前項でATEM Mini Proでの配信について説明したわけだけど、この子は本来、映像切替のためのスイッチャーとしての機能がメイン。下位機種のATEM Miniは映像切替は出来るけど配信機能はない、といった具合いだしね。

今回は以下の映像と音声を切り替えている。

・Zoom - OBS映像 ( MacBook Pro [HDMI] )
・BGM、ビデオ再生 ( AppleTV [HDMI] )
・MCアバター ( WindowsPC [HDMI] )
・MC音声 ( コンデンサマイク [ステレオミニジャック] )

ATEM Mini Proへの映像入力はHDMIしか受け付けない。今回は使っていないけど、カメラ映像などが必要ならUSBウェブカムを使いたいってところだけど、そういうわけにはいかずにビデオカメラや一眼レフカメラなどからのHDMI出力を使う必要がある。ちなみにこれらのカメラの中には、HDMIでは動画再生出力のみでライブビューが出せなかったり、出せたとしてもバッテリー表示とか画質設定表示などの画面表示情報が消せないモデルも少なくないから、購入する時には注意が必要だったりする。話が脱線したけど、今回の構成ではカメラ映像はZoom経由で集めた映像のみで直接接続されたカメラは無い。

MacBook ProとWindowsPCはATEM Mini Proへの出力が外部モニターの一部となるようにしている。要はパソコン側からみたらマルチモニタ状態ってこと。そしてAppleTVはそのままHDMIで接続して、BGM用楽曲や再生用ビデオはiPadからAirPlayで飛ばしている。AppleTVをひとつつないでおくことは非常に便利で、状況に応じてiPadでもiPhoneでもMacでも映像・音声をAirPlayで飛ばせるので普通に使う分にもトラブルが起きた場合にも柔軟に対応しやすい。
MCアバターに充てる音声は別途マイクから入れている。ATEM Mini ProはHDMIからの音声4入力の他に音声入力用のマイク端子を2つ備えており、合計6つのステレオ音声をミキシングできる。

そのように接続した機器の映像を切り替えるのもボタン一発で出来るのが専用機器の良いところ。単純にズバズバ切り替えるだけなら、図中左枠の1〜4のボタンを押すだけで該当するHDMI入力を出力することが出来る。この操作は分かりやすいし切り替わり具合も心地よい。各HDMI入力の映像が決まっている場合はこちらの方法が良いだろう。カメラ1は司会、カメラ2はゲスト、カメラ3は両者が映っているなんていう時ね。

ATEM Mini Proにはもう一つのモードがあって、次に切り替わる画面の様子をプレビューとして確認してから切り替えることも出来る。今回のように「HDMI2のMacBook Proの映像は基本はZoom映像だけど、OBSでシーンを切り替えることもある」なんていう時には事前にプレビュー映像を確認した方が安心だよね。
また今回のように、アバターを表示するのかしないのか、表示する時には全画面サイズなのかワイプサイズなのか、なんてこともプレビューを確認しないことには絶対安心できない。(笑

そのモードの時には番号ボタンを押しただけではプレビューが表示されるだけで、図中右枠のCUTあるいはAUTOを押して初めて選択した映像が出力される。で、CUTでは即時表示されて、AUTOではトランジションを加えた切替ができる。ジワジワ変えたり、クルリンと変えたりイイ感じに切り替えられる。まあ、これも動画編集と同じで使いすぎるとダサくなるから気を付けないといけないけどね。

超多元中継 - Zoom編 -

冒頭にも紹介したとおり、今回の企画は「32組108人の参加者を結ぶ超多元中継」による花火映像がキモになる。その超多元中継ってどうやったの? って話をするね。

まずはみんな大好きオンライン会議アプリのZoom。32組のグループをA、B、Cと3つのターンに分けて、それぞれのターン毎に11組ずつZoomで参加してもらった。

Zoom
https://zoom.us

参加者には事前に順番を知らせておいて、ミーティングルームに入る前に必ず名前の前に自分の番号を振ってもらうというお約束にした。

スマホは持っているけどZoomは使ったことないって参加者も少なからずいたので事前にリハーサル、というかZoomの実践練習の日程を組んだ。そのおかげもあって当日は参加者に関わるトラブルはほぼ起きなかった。実はここが一番懸念されていたところで、「参加者が接続できなかったり、そもそもドタキャンしたりという時どうするの?」って。コレが要因でこの企画をやるか諦めるかってことをギリギリまで判断を迷ったというのは今だから言える話。
そしてドタキャン対策の裏話をしちゃうと、実はスタッフで構成されたグループをこっそり(?)配置して、参加者がドタキャンで抜けてしまったところ(抜けたかどうかは名前に付けた番号で判断)はそのスタッフグループで穴埋めをするということをした。まあ、悪い言い方をすれば「ヤラセ」と言うことになるのかもしれないけど、リスキーな番組を構成する上でどうしても必要だったんだ、スマンね。

1組1分の持ち時間で1ターン11分でまわす構成にしたのは全部一気に30分オーバーだと、番組としてダレてしまって視聴者も飽きてしまうと思ったから。あと、画面切替をするスタッフの緊張感から来るプレッシャーがデカすぎてミスを起こしそうってのもあった。結果として、途中で地元ケーブルテレビ局の協力で作ってもらった子ども達の描いた絵花火というコンテンツを挟んだりと良い番組構成になったと思う。

そしてこの各グループのZoom映像を切り替えるというのが今回のイベントのキモで、Zoomにはミーティングを始めたホストが参加者の映像を選んで最大化表示するという「スポットライト」という機能がある。これを名前の前に付けてもらった番号の順に切り替えていくというわけ。

ただ参加者リストの順番が必ずしもアルファベット順でなかったり、番号付けの半角全角が入り交じってフィルタリングが上手く出来なかったりで見落としなく次に表示する参加者を探すだけでもひと苦労だった。「ホント、よく途中で進行が途切れなかったな」と思うほどにギリギリで上手くいったという印象。(笑
技術的にはZoomで多元中継なんて「スポットライト機能」でポチッとな、ではあるんだけど「その下準備と方針検討は念入りにやった方が良い」という話ね。

超多元中継 - OBS編 -

今回は映像切替やアバターのPinP表示、音声のミキシングにATEM Mini Proを使ったわけだけど、似たような機能を持つOBSも使う必要があった。

OBS Studio - Open Broadcaster Software
https://obsproject.com/ja

いろいろ違いはあるんだけど大雑把にいうと、ATEM Mini Proは人間がタイミングを合わせて操作することがメイン。テレビ局の裏方ドキュメント番組なんかで「サブコン」と呼ばれるスタジオ裏で映像をスイッチングしているイメージ。まあ、元々そういった現場から派生した装置だしね。

OBSはFinal Cut Proみたいな動画編集ソフトやPhotoshopのようなレイヤーベースの描画アプリの使い勝手をリアルタイム配信用にしたイメージ。なので「動画再生が終わったら」とか「何秒間だけスポンサー表示をして」とかタイミングを取って映像を切り替えることが得意であらかじめそういう動作を仕込みやすい。実は今回は動画配信といいながら、最後に打上げ花火を上げる時刻にキッカリ合わせる番組進行が求められたのでOBSの組合せには助けられたように思う。
また、Zoom画面ではメイン映像の周りにミュートボタンなどの機能アイコンや配信したくないメインでない参加者の小ウィンドウなどが表示されるけど、そういったものの除去(トリミング)にもOBSを使っている。

アバター操作 - 3tene -

今年は密を避けなくちゃいけないコロナの影響やスケジュールの都合で例年通りのMCを置いての撮影が厳しくなったという事情もあって、今回の番組のもう一つの目玉であるアバター(VTuber)を導入することになった。正直言うと、家庭用花火の映像を流すということが「地味なコンテンツ」になりゃしないか、という懸念があったのも1つの要因ではある。(結果として参加者の皆さんが工夫を凝らして花火映像を盛り上げてくれたので全く「地味なコンテンツ」ではなかったのだけど)

アバターの操作には「3tene PRO」というアプリを使っている。Mac版もあるのだけど、一部機能が制限されているためにWindows版を使った。余談だけど、手元にそこそこのグラフィック性能を持つWindowsPCがなかったので、Mac miniをBoot CampでWindows化してる。

3tene
https://3tene.com

3teneはVRM形式(後述)の3Dモデルを読み込んで、Webカメラによる顔認識やマイクによる音声認識でアバターを動かすことが出来るアプリ。それくらいなら他にもいくつものアプリが出ているのだけど、手の動きを検知できるLeap Motion(後述)に対応しているのも特徴的。
またiPhone X以降を子機として使うことによって、Face IDで読み取った表情をアバターに反映することもできるというのも面白い試みだと思う。

3teneの最大の問題点はアバターを表示するウィンドウとメニューアイコンが分離できないので、メニューアイコンが隠れるようにOBSなどで上手くトリミングするとか地道で馬鹿らしい作業が必要だったこと。ただそれもNDI出力ができるようになったのでイイ感じに回避できるようになった。NDIは説明すると長くなるんだけど簡単にいうと、3teneからアバター映像をローカルネットワーク上にブロードキャストできるようになり、その映像を受けとれるNDI準拠の受信表示アプリで別ウィンドウに表示することが可能になった。(最近のバージョンではウェブカムとしても使える機能も追加されたみたい)

アバター映像は背景をグリーンバックにしておくことで、ATEM Mini Pro上でクロマキー合成ができるので、今回の番組のようにいろいろなシーンで登場させられるというわけ。

Leap Motionは手の動きを検知できる優れもので、比較的安価に手指を含めた腕の動きまで表現できるのが特徴。これで上半身はほぼアバターの中の人の動きに追従できる。

Leap Motion
https://www.ultraleap.com

アバター制作 - Vroid Studio -

ここからは準備編ともいうべき内容を紹介するよ。
「アバターは3teneで操作できるよ」とは説明したけど、アバター(3Dモデル)自体はどうすんのさ? ってなるよね。3teneではVRM形式とLive2D形式の2種のアバターを読み込むことができる。どちらファイル形式もそれぞれの多くの対応ソフトで読み込むことができて、VTuber配信やVR空間、ゲームキャラなどのアバターとして利用できるんだ。

・VRM
　3Dモデリングされたデータ。
・Live2D
　イラストベースの2次元画像を擬似的に3D化しているデータ。

今回はVRM形式のデータを使っている。このデータはVroid Studioというアプリで制作することができるんだけど、ベースとなるプリセットモデルが提供されるので初心者でも割と簡単に3Dモデルが作れる。

ちなみに今回登場しているアバターは「cooco.b.stone(クーコ・B・ストーン)」という名前が付いていて通称「クーコちゃん」。顔のパーツの位置や大きさ、ボディラインなどはスライダーを調整して指定する簡易な方法でプリセットモデルから変更を加えている。

ただ、キャラのオリジナリティを出したかったので、髪型や服のデザイン、細かいところでは瞳の模様などは一から描いている。このあたりはちょっとした頑張りが必要だけど、お絵かきが好きな人は楽しみながらオリジナルキャラが掛けるんじゃないかな。

タイマー制作 - Processing -

もう一つ準備編。
この番組を時間通りにスムーズに進めることに一役買ったに違いないアイテムがある。それはリレー切替の時に右上に表示されているタイマー。コレがあるおかげでMCは絶対に時間をオーバーすることがないってわけ。各参加者はMCの「○番のチームいきますよ。5秒前、4、3、2、1、ゼロ!」の掛け声で自分に順番が来たタイミングが分かるという仕掛けで対応してもらっていたので、このカウントダウンは実はなにげに重要だったんだよ。

そこでMCがとっさに分かりやすいようにと、過ぎた秒数部分は文字盤が赤くなり、5秒前の場所にはドットが打ってあり、5秒前から1秒ごとに音が流れるという仕掛けを作っておいた。そして呼び出す参加者の番号が分かりやすいように下部に現在の番号を表示したり、合成しやすいようにグリーンバックにしたり。これだけでMCの負担や不安感は相当に減ったと思う。というか、メチャ感謝されたよね、MCのコに。

ところでこういう単純な映像ってわりとどう作ろうか悩むところだと思う。正確に針を刻む映像をアニメーション制作として作るには面倒そうだし、しっかりとタイマーアプリ作るのも利用シーンの割に手間を掛けすぎな気もするし。

Processing
https://processing.org

で、今回はJavaのプログラミング環境なんだけど図形ベースのモーションも作りやすいProcessingを使うことにした。時計針の動きをProcessingでつくり、それにカウントダウン音を付けて動画に仕上げた。こういう利用シーンではリアルタイムでプログラムを動かすより動画に落とし込んだ方が扱いやすいだろうという判断ね。

終わりに

まだYouTubeでのライブ配信機能が提供される前の時代(!)にUSTREAMを使って「おやまの花火」のライブ配信を始めていて、そのちょい前から地元の映画祭宣伝番組を配信していたりなので、もう8年くらいライブ配信をやっているわけだけど、毎回毎回、機材が変わったり、ネット環境が変わったり、中継場所が変わったり、いろんなプレッシャーが高まったり(笑)と常に変化してきたと思う。しかし、このコロナ禍の中でそんな変化は些細なことに思えるくらい、まぁったく違った形になってプロジェクト自体をイチから構築する事になったよね。企画をブチ上げてから2ヶ月以上「できる」「できない」の判断を繰り返してようやく道筋を付けられたのは周り多くの人の協力のおかげ。改めて感謝を申し上げるっ。

短い準備期間で全てがチャレンジングな要素しかない内容を備忘録として書き散らしたのがこの記事なわけだけど、その内容の一部でも誰かの役に立ってくれたら嬉しい。

備忘録としてはこの記事の一つ一つの項目を深掘りした記事を書いた方が(未来の自分にとっても)良いのだろうけど…もし皆さんからの要望があれば…別記事に書き出すモチベーションが上がるかも?
(そもそも1万字も書き散らかしてないで個別の記事として構成しろよ、という話なんだけども)

あ、最後に配信した番組のリンクをもう一度貼っておくからぜひ観てね。

【打上げ花火特典映像付き】花火でつなぐ100人リレー・オンライン
- Fireworks Relay 2020 - YouTube

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