WordCamp Osaka 2019 でライブストリーミングやってみた

この記事は「WordCamp Osaka 2019 ひとつき遅れのアドベントカレンダー」10日目の記事です。

今回の WordCamp Osaka 2019 では 1 部屋のセッションのみ YouTube Live を使って生配信に挑戦しました。
当日の映像は以下アーカイブで見れます。

ライブストリーミングをした目的

単純に当日会場に来れない方もリアルタイムでセッションがみれたらいいなーと思ってやってみたかっただけです。

コメント機能もあるので質疑応答とか答えれたらなーとも思ってましたが今回はそういった余裕がなかったですｗ
いろいろとコメントくださった皆様ありがとうございました。この場を借りて御礼申し上げます。

実現したかったこと

まんまこれです。インスパイアさせていただきました。

何年か前にみた JSConf の生中継でいつか WordCamp でも配信やりたいなと思っていたのでキックオフミーティングの際に今回やらせてくださいって言ってみました。

使った機材

実際に自分が購入したものは購入ページのリンクを張っておきます。（アフィリンクではないです）

羅列するとけっこう少ない機材でできてんだなと感じました。

今回、配信で使用した機材で重要なのはビデオキャプチャ デバイスとアナログミキサーになります。

ビデオキャプチャは HDMI 端子から出力される（ビデオカメラやデジタル一眼、ミラーレスカメラ等）映像をビデオキャプチャを通すことで USB で入力できる web カメラのような入力ソースに変換し、USB から PC に 取り込むことができます。

ビデオキャプチャを使用した箇所は登壇者の PC から出力されるスライドの映像を HDMI 分配器を使ってプロジェクター側と配信する PC 側に分配し、

登壇者の PC → HDMI 分配器 → ビデオキャプチャ → 配信する PC

といった形で使用し配信アプリケーションにスライドの映像の入力ができました。

登壇者本人の映像についてもビデオキャプチャを使ってデジタル一眼カメラから映像をもってくるつもりではいてましたが、ビデオキャプチャをもう一つ買う予算の都合とデジタル一眼カメラを設置する場所（配信 PC から離れすぎていた※）の関係で USB 入力の web カメラを使用し配信アプリケーションに入力することになりました。

※ HDMI ケーブルが 10-15m 以上離れていると伝送速度が弱くなるらしいので諦めました。（音ズレの訪れの対応が面倒）
光ファイバー HDMI ケーブルや USB3.0 アクティブリピーターケーブルといった聞いたことなかったよくわからんケーブルを使えばいいかもといった助言もいただいたので今後試していこうと思います。

これ以外にも念の為 USB-C 入力の有線 LAN 変換アダプター やデジタル一眼カメラ ＋ DC カプラーといった実際には使用してない機材も準備しておりました。

アナログミキサーについては音響オペレーション担当の Toro_Unit さんが配信についての記事を書くとのことなので詳細は省きます。

配信アプリケーション

配信するためのアプリケーションは OBS を使用しました。OBS を使った理由は、

  • 無料で使えるオープンソースのソフトウェア
  • 配信方法についての情報が多い
  • 配信画面のカスタマイズが容易

といったところです。
ビデオスイッチャーの導入も考えましたが後述する配信画面のレイアウト作成が希望するものができるのか不明だったので見送りました。
Blackmagic Design さんの ATEM Mini とか発売のタイミング的によかったんですが、いかんせんお金もなく。。

あと使用した web カメラにフォーカスを固定する機能がなかったのでサードパーティーのアプリケーションを使って対応しました。

Webカメラ設定 (Webcam Settings) 
https://apps.apple.com/jp/app/id533696630

配信方法について

当日まで不安だったのがネットワークのアップロード速度です。

インターネットの速度の基準については Google 検索で「インターネット速度」とキーワード検索して検索結果内で表示される（以下ページ）速度を目安として配信の画質をどの程度にするかを決めてました。

インターネットの速度をテストする
https://support.google.com/websearch/answer/6283840

配信にはアップロード速度が必要なのですが、今回の会場の Wi-Fi だと 50Mbps 前後でてました。
配信時の OBS の各項目は以下です。

  • 出力解像度は 852×480
  • FPS 30
  • ビットレート 500Kbps
  • 最大ビットレート 2000Kbps

ビットレートの値については YouTube のヘルプにかかれていた値を参考に設定しました。
https://support.google.com/youtube/answer/2853702?hl=ja

正直キレイな画質で配信ができたとは言えませんが、配信が途切れることなく行えたのでよかったとします。

欲を言えば、何度かテスト配信を行っていた感触だとアップロード速度がもう少しあれば出力解像度かビットレートをあげれたのではないかなーと思いますが、こればっかりは会場都合ということもあり多少の妥協をせざるを得ませんでした。

まあカンファレンスの配信だとスライドの文字が読めれば OK という感じではあるのでこれはこれでいけたという感想です。

ネットワークの問題は今後もどうしようもないのかなと思ってましたが以下のような仕組みもあるので試してみたいですね。

BOND:ライブ映像配信システム｜株式会社キャムキャスト7
http://www.camcast7.co.jp/products/bond/

その他、配信方法についてはググればたくさん情報がでてきますが、今回の配信では PC を Mac でおこなったことで OBS 側でとあるバグを踏みました。
macOS のバージョン 1.15.X 系で OBS を立ち上げ、映像入力ソースを選ぶと OBS がアプリごと落ちるといった内容でした。幸い OBS のフォーラムでは既知のバグでコマンドラインから OBS を立ち上げると大丈夫って書かれてたので実際に問題はなかったのですが、少し面倒な操作を強要される時期ではありました。
（2019 年 12 月末に OBS のアプデで解決した模様）

配信画面のカスタマイズ

配信画面の全体のレイアウトについては JSConf のものを丸パクリ インスパイアしようと当初から決めてあったので特に迷いはなかったのですが、登壇者情報については OBS での映像入力ソースに「ブラウザ」を選択できることから以下GOUTEN さんのブログにあるアイデアで素晴らしい背景映像を実現することができました。圧倒的感謝です。

WordCamp Osaka 2019 リアルタイム配信ができるまで：チーム／コード編
2020年、明けてましたおめでとうございます。今年は変化の多い年になる予感しかしないです。どうぞよろしくお願い致します。 この記事は「WordCamp Osaka 2019 ひとつき遅…
dotlinesquare.com
動画・撮影チームリーダー GOUTEN さんの記事

少し内容を追加すると OBS のシーンでスピーカーさんのスライドの画角は 16:9 で統一されているはずではありましたが、念の為 4:3 で作られていた場合のシーンも用意しておりました。

配信についてはこんな感じです。

なにもわからん状態からはじまって実際にやってみるといろいろと問題にぶち当たってましたが、だいたいのことはお金で解決できることがわかったので次回は配信スポンサーさんとかついてくれないですかねｗ

参考にさせていただいた記事をはっておきます。

イベントのライブ配信環境を整え（てもらっ）た話 〜機材紹介&セッティング編〜｜Ryo Yoshitake | THE GUILD｜note
https://note.com/ryopan/n/nf81755f840f3

MacBook Pro + OBS Studioの構成でよりよい配信を目指して映像機材を検証してみた 〜失敗編〜 ｜ Developers.IO
https://dev.classmethod.jp/etc/macbook-pro-and-obs-studio-check-blackmagic-recorder-converter/

この記事についても誰かの役にたつといいですね。

今後の課題とチームについて

今回のメンバーの GOUTEN さんと Toro_Unit さんと自分を含む 3 人は 2018 年のときに結成されたようなもんで 2018 年の WordCamp 終わりの反省会で次回はこれやろうあれやろうと言っていて 2019 年は動画チームを作ろうから始まってあれやこれやで生配信が実現しました。

動画チームを作成したことで、動画作成や配信を生業？にしている学生でもあるがっきーさんが実行委員に加わってくれたり、普段ゲーム配信をしているささぴよさんがアドバイスをくれたりといつのまにやらなかなか強いチームができてました。

他にも WordPress.tv の日本語翻訳音声をのっけた映像やアクセス動画についても専用のチームがあったからやれましたね。

とはいえ動画作成や配信に関する知見をもった人というのはまだまだ少ないので、アクセス動画や YouTube の配信などをみて自分でもなんかできるなーって思った方がいたらぜひ一緒にやりましょう。

そして今回も反省会を行って次回に向けて盛り上がったのは配信にリアルタイムで字幕表示でしょうか。

リアルタイムで字幕の表示が可能になればよりたくさんの方へ内容をお届けできますし、例えば今回やったキッズルームにモニターを設置して YouTube の配信を流してそこで子どもたちと一緒にセッションがみれるような空間が当日できれば素敵だなあといった感じです。

東京の WordCamp では会場内に設置されたディスプレイにリアルタイムで字幕を表示させたと聞いたのでその辺の技術とうまく組み合わせて配信に乗っけられへんかなとアタリをつけておりますので詳しい方ぜひなんかやりましょう。

あと外せない話としてあるのがお金にまつわる話で、静止画を含む撮影・動画チームに関しては私財の投入ってのがごく当たり前にありまして、GOUTEN さんのブログにも書かれてましたが例にも漏れずいろいろ理由があって今回の配信に関しても機材はすべて私財投入でやってのけました。

配信に関わる機材に関しては主に自分と Toro_Unit さんで購入しましたが、ぶっちゃけた話をすると昨年 WordPress 本の出版をしたこともあり多少なりともお金が入ったのでそのへんをやりくりして機材の購入ができました（でもぜんぜん足りてないからみんな本買って！笑）

なのでまあそれなりのお金を使いましたがコミュニティのおかげで自分は本の執筆に参加できたのでこういった形でコミュニティに還元ができたのではないかなと思った次第です。

お後がよろしい感じになったので、以上レポっした。