みず。さんが主催するイベント、「青風亭全員合わせの会」で配信をお願いされまして、久しぶりにライブ配信に手を付けてみることにしました。十代の頃にゲーム配信していた思い出が蘇ってきて、やる気が火山のように噴火したわけです。
会場設備の確認
今回実施した場所は板橋区文化会館でした。
音声ソースの確認
会場にはワイヤレスマイクが用意されているのですが、当初は機材が触れないという状態でした。これでは音源を取ることができません。そのため機材を触れるようにできるオプションを追加で申し込みました。これで、会場に音源を流したりマイクの音源を取ることができるようになりました。
ですが、具体的に何の機材を使っているかがわからないので、何のケーブルを用意するべきかがわかりません。申込書にも詳細が書かれていなかったので、直接会場に問い合わせて、ワイヤレスマイクの型番を把握しました。
ケーブル足りない問題
ワイヤレスマイクの無線機から配線できるかの問題があります。家にXLRケーブルはあったのですが10mしかなくて足りないので、追加で10mのケーブルを購入しました。
次は電源です。10mで足りるかな？と思ったのですが、今回は壁にあったためなんとかなりました。
養生テープが使用できるかの確認
どうしても会場側の設備と配信制御側のテーブルはある程度の距離があるため、長いケーブルが床に垂れているわけですが、足を引っ掛けて怪我をする危険があります。そのためケーブルの養生は実質必須ともいえます。とはいっても、実質床を汚すことになってしまうため問題がないかを確認する必要がありました。
またタイミングが悪いことに、台風が襲来したこともあって近所のホームセンターから養生テープが全部なくなっていました。手元に一応あったので良かったのですが。
（蛇足ですが、Twitterでは雨戸があるにも関わらず窓ガラスを養生テープ補強する方がいて困惑しました。雨戸閉めたらいいじゃん。）
機材調達
配信には当たり前ですが音声と映像が必要です。それぞれどうやってPCに取り込むか考えました。
音声どうする
今回の場合は会場マイクなどの音源を取り込む装置が必要です。オーディオインターフェースと呼ばれるやつですね。いつか欲しいと思っていたので勢いで購入しました。
この機材は、RCA(赤白のやつ)と標準ジャックとXLR端子が装備されているので大抵の音源は入力させることができます。これで安心ですね。
普通にマイクをもう一つ用意するのも選択肢にありましたが、予算が大きく変わります。確実に自分の財布が火を吹くので、自前でマイクは用意せずに会場の設備を使う手段を使用しました。
映像どうする
カメラに関しては、次の２通りの方法があります。
- ビデオカメラとHDMIキャプチャを使用する方法
- Webカメラを使用する方法
ビデオカメラを使う場合は、（当たり前ですが）画質が物凄く向上します。また、高画質のまま録画ができるため、後からダイジェスト動画などを制作する場合はとても便利です。
しかし、ビデオカメラは単体でPCに映像を入力できないためHDMIキャプチャという機材が必要になります。これがそこそこ高いのです。
Webカメラを使用した場合は、画質は犠牲になりますが必要なコストを最小限に抑えることができます。今回は画質よりも音声を正確に取り込めるかが重要なので、こちらの手段を選択しました。手元にすぐ使えるWebカメラがなかったため、みず。さんに借りました。
ここに関しては下手すると予算が大きく変わるので慎重に判断しました。
アーキテクチャ
これが今回の配信システムの全容になります。
マイクの音声は、一度施設側のミキサーに収容されてから自分のミキサーに取り込んでいます。これは会場にもマイクの音声を鳴らしつつ、配信でも使えるようにするための対処です。文化会館の舞台スタッフの方と相談しつつ行いました。
BGMは、iTunesから直接AirPlayを使ってRaspberry Piに伝送しています。ラズパイオーディオ用LinuxディストリビューションであるVolumioはAirplayを受け取ることができるためこの方法を使いました。詳しい仕組みは後述します。
映像は、Webカメラの映像にPhotoshopで作成したPNGを何枚も重ねた上にOpenBroadCaster Softwareの「ブラウザソース」機能で動的なテロップを実現しました。今回のいちばんのこだわりポイントです。こちらも後述します。
ここでユニークなのは、BGMが配信に乗っていないという点です。これは、そもそも配信にBGMを載せなくていいという前提があるためです。これにより、配信に余計な音源が乗らないという安心感がありますし、BGMの再生とマイクのミックスは分離して制御できました。
実際はトラブルに備えてThinkPad X220がホットスタンバイ状態で待機しています。何かMacBook Pro側で配信ができなくなった場合に切り替えれるわけですね。
AirPlayについて
AirPlayというのはAppleが開発したストリーミング機能です。音声をすべてApple Losslessへエンコードをかけてネットワーク内に流します。音楽のストリーミングだけであれば一見Bluetoothで音を流すのと変わりませんが、AirplayはLANを使用します。そのため、ネットワークが同じであればいくらでも距離を伸ばせますし、有線LANや5GHzの無線LANも使用できるため、混信の心配もありません。そのため今回はBluetoothではなくてAirPlayで施設側のミキサーまでBGMを伝送しました。
もともとAirPlayはAppleのプロプライエタリな仕様ですが、どこかの好奇心旺盛なエンジニアがAirPlayが暗号化を施す時に使う仕組みをクラックしたため、公然の秘密同等になってしまいました。それらはShairportという名前でOSSで公開されています。
Raspberry Pi用ディストリビューションの一つであるVolumioにはShairPort-Syncが初期状態で動いています。
Raspberry Pi + Volumioについて
Volumioは、Raspberry Piをミュージックサーバーとして稼働することができるディストリビューションです。音源の制御はもちろんのこと、ネットワークドライブへの接続やネットワーク設定がすべてWebから制御することができます。
最大の特長は、Raspberry Piのカスタマイズ性の高さと合わさって好きなDAC（デジタルアナログコンバーター）を装備することができることです。自分の好みにあったDACチップを使うこともできますし、端子に関しても同軸デジタルやミニプラグまで様々な種類に対応したのHAT（拡張モジュール）があります。つまり、HATの数だけ選択肢がありますし、なければ自作することができます。
詳しい情報が知りたいですか？ラズパイオーディオの会へどうぞ（宣伝）
会場側の設備に臨機応変に対応できるのとAirPlayが使用できることが踏まえて、今回はVolumioをインストールしたRaspberry Piを用意しました。
映像の謎テロップ送出システムについて
Open Broadcaster Softwareには入力ソースのひとつに「ブラウザ」があります。これは、事前に指定したURLを常時表示させることができる機能です。
このブラウザソース機能は大変優秀で、内部でChrome相当になるブラウザのレンダリングエンジンをを直接呼び出します。そのため画面キャプチャが不要になります。また、CSSやJavascriptでダイナミックな描画が直接できるようになります。
次に、透過処理が不要な点です。画面キャプチャでは基本的にクロマキー処理(映画のメイキングとかにある、緑色の背景が透けるやつ)が不要になります。
それらを活用して作ってみたのが、今回のダイナミックなテロップシステムです。
内部はVue.JSとCSS3とPHPが使われています。
Vue.JSは同じディレクトリにあるJSONファイルを一定時間ごとに確認をして変化があればJSONに記述されている内容に置き換えます。またtransformシステムを使っているのでCSSを使ったアニメーション表示ができます。
そして、外部からJSONファイルを操作できるように、PHPで簡単なフォームを作りました。フォームに入れたらPHPがJSONファイルを操作するわけですね。作りは簡素ですが、操作性を重視して開発をしました。ページを開いた瞬間チェックボックスにフォーカスが当たっているので、マウスの操作を必要とせず、最小限のキーボード操作で制御できるようになっています。
ソースコードはGitHubに上げているのでライセンスの範囲内で好き勝手に活用してください。Pull Requestも待っています。
実際の様子
本番当日、マイクの入力が使えないというトラブルがあり慌てていました。会場のスタッフの方に相談したところ、ミキサー等の電源が入っていないことが発覚し、会場のミキサー側にも調整をお願いしました。
そんなわけで、会場の音声をTRI-CAPTUREで入力することができました。
次にBGM周りです。会場へ音源を流す時に使うコネクタがミニプラグだということが、セッティング中に発覚しました。そのため、RCA端子のHifiberry DACを外してpHAT DACを装着しました。これだけで対応できるのは本当に楽ですね。
会場の養生には、ふぁんとむさんなど他の方にも手伝っていただきました。なんか設営って感じが出てる！すごい！！ありがとうございます！！！
ネットワーク周りですが、家庭用ルータを持ち込みました。極力有線LANで端末を接続することによってトラブルを減らすためです。
モバイルWi-Fiルーターの一つであるW04はSIMロックがかかっていないため、手持ちのSoftbankのSIMが使用できました。また、W04にはクレードルから有線LANが出せます。これを活用して家庭用ルータのWAN端子に繋げるわけです。
配信のほうは問題なく行うことができました。ツイキャス側のビットレート制限が厳しくてこちらも最初は慌てていました。
ホットスタンバイ用に用意していたThinkPad X220ですが、トラブルなく送出できたため配信の確認用モニターとして活躍していました。トラブルがないことは良いことです。
実はこの時、何故かThinkPadの有線LANが認識されないというトラブルが発生していたため、無線LANで接続していました。後日調査したところ、Windows10 version1903にアップデートした際にVLANとIPアドレスの設定が消えてしまっていたことが原因だということが分かりました。一度電源投入して確認するべきでした。
あと、作業する度にちょっかい入れられていました。最高に楽しかったです。
反省点
「あー、やってしまったなあ」と思ったことをちらほら。
進行表完全に理解したい
配信だけ任されていたので、BGMを流すことなどは当初考慮していませんでした。なので途中の場面に合わせてBGMを変更したりする際は相当慌てていました。
もっと早く設備スタッフと相談するべきだった
当初マイクの音源が取れないというトラブルに見舞われましたが、正直一人で触るよりも、設備の方と話し合ったほうが早く解決でき、無用なトラブルも解決できます。先述した「音響セット」の電源が入っていない問題もあったので、そこに時間を使ってしまったのが個人的なミスかなと思っています。一人で数十分間考えるより、舞台スタッフの方と話し合ったほうが賢明だということがわかりました。
通信回線にも冗長性を持たせるべきだった
会場ではMVNOではないSoftbankの回線を使用していたのですが、たまに不安定になる場面がありました。ツイキャスの配信が途切れたり、BGMがちょっと止まったりしたのはこれが原因です。現在Softbank系の回線しか持っていないので別のキャリアの回線も確り用意するべきでした。
また、音源に関してもAirplayではなくてVolumio本体から送出するようにして、ネットワークの影響を受けにくい設計にしたいところです。
テロップ改良したい
一定時間出したら自動的に引っ込むとかそういうやつです。自動的に引っ込む機能は間に合わず実装できませんでした。
確認用モニターが欲しい
遅延なく確認できるモニターが手元のPCしか無かったのが個人的に心残りでもありました。カメラに映る側もどのように写っているか確認したいですよね。ええ、わかります。
これには理由がありまして、諸般の事情でRVBOX（別名：面箱）が使用できませんでした。これにより機材の運搬がとても難しく、小さい液晶ディスプレイしか入れることができませんでした。
しかも辛いことに、使っていた小型の液晶ディスプレイはTN方式の液晶ディスプレイです。この方式の液晶ディスプレイは視野角が狭いという欠点があります。たまに、正面から見ないと見づらいディスプレイを見たことはないでしょうか？あの方式です。
自宅には視野角が広いIPS方式の液晶ディスプレイもあるのですが、23型なので今回持ち出せませんでした。専用のケースでも用意して運搬できるようにしたいと思いました。
まあ、面倒くさくなったらプロジェクター使えばいいんですけどね！
運搬が超しんどい
20m超のケーブルを使用したこともあってか、ボストンバッグがとても重かったです。RVBOXとかにキャリーカートつけて引いたほうが明らかに楽だと思いました。
さいごに
ネットワークやバックエンド、そしてフロントまで一通り触っている私ですが、ここまで技術力を結集させたシステムを構築できたので大変気分が良いです。また、こういう貴重な機会をいただいて有り難く思います。本当にありがとうございました！