ライブコーディングに挑戦してみた
先日LINE Developer Communityのイベント「LIVE CODING SHOW」でライブコーディングに挑戦しました。
linedevelopercommunity.connpass.com
今までハンズオンやライブデモをやることはありましたが、ライブコーディングは未知の領域でした。
何が起こるか分からないこの感覚を久々に味わってみたいと思い、挑戦してみました。
リハーサル
ライブコーディングの生配信はあまりイメージが無かったので、じっくりリハーサルをするところからはじめました。
用意した機材
基本構成
ライブコーディングの配信に用意した機材として以下のものです。
- 手元のキーボードが映すカメラ
- 斜めからの顔のアップを映すカメラ
- 声とキーボードのタイピング音が拾えるマイク
つまりカメラ2台と外付けマイクを用意しました。
カメラは2台ともLogicoolのC920nを使いました(1台しかなかったので1台は貸してもらいました)
そして、マイクはマランツのUSBコンデンサーマイクを用意しました。スタンドとセット買えるのでそれっぽい雰囲気になりますｗ。
もちろん音声は申し分ありません。
これらを合わせたセッティングがこんな感じです。
それっぽいですねｗ。顔を写すカメラは三脚を使っていて、手元を写すカメラはモニターの上に乗せて最大限下向きになるように調節しました。
スマホのキャプチャ
あとは作ったLINE botをスマホ上で動かすデモをするためにスマホの画面をキャプチャするために、Chrome Castを使いました。
これはGoogle Homeが最初に発売された時におまけでついてもので、つい最近まで封を開けていませんでした。
しかしオンラインイベントとかでスマホの画面を使ってデモを見せる機会が増えたのをきっかけに出番が増えるようになりました。
画面を映したいスマホにGoogle Homeアプリをインストールしておき、Chrome Castと接続をしてミラーリングを行うとHDMIで画面を出力できるようになります。
あとはUSB接続できるHDMIキャプチャ(中国の通販で手に入るやすいやつ)にChrome Castを接続してパソコン上でスマホ画面を出力するための機材のセッティングは完了です。
パソコンの画面上に投影するときにはWindowsにデフォルトで入ってるカメラアプリでChrome Castを接続したキャプチャを選べば簡単に共有できます。
おそらく入力ソースはUSB VIDEOだと思います。
配信ソフト
配信はGoogle meetからのカメラ画像、画面共有をOBSで合成してYoutubeライブでやってました。
OBSの配信設定はLINE Developer Community事務局の方にやっていただいたので特にここで話すことはありませんｗ。
Google Meetの接続は当然ライブコーディングをしているパソコンで顔を映していますが、もう1台パソコンを用意して手元を写すようにしました。
なので先程のセッティングに追加でサブPCを用意して2台のPCでGoogle Meetに参加しました。
台座は以前イベントで手に入れたブラウンくんのぬいぐるみの箱がちょうど良かったので活用しましたｗ。
また、OBSで顔だけ切り出せるようにするために、顔を映している映像にはグリーンバックの仮想背景をいれています。
これらを合成させた配信イメージがこうなりました。
モノクロだとなんかかっこいいですよねｗ。
リハを終えて出てきた課題
さて、リハを終えていくつか課題が出てきました。
モニターの上のカメラからキーボード映しても角度的にキーボードと手元がきれいに映らない
モニターの上にカメラを載せているのは普段そこから顔を映すのにはちょうどいいのですが、手元を映すのには微妙なアングルです。
というわけでキーボードの真上から移せるスタンドを追加でいくつか用意してもらいました。
ブラウザの動作が重い
Google Meetはブラウザ上で動作しているせいかブラウザで検索するだけでも地味に動作が重かったです。
IoTLTで登壇するときもGoogle Meet使っていますが、そのときは仮想背景を使ってなくてブラウザの動作が重くならないのでおそらく背景の切り取り部分でかなり処理が持っていかれているのでしょう。
その割にはZoomより背景の切り取り精度が悪いですねw。
メインPCが配線地獄
これはもうしょうがないですねｗ。
普段キーボードとトラックボールが有線でそこにカメラ、キャプチャー、マイクを接続してメインPCのUSBが配線地獄でしたw。
パソコンには2つしかUSB端子が無いので、USBハブを2つ接続しました。
本番
いざ本番、思ってたよりも視聴者数が少ない中でしたが逆に気は楽でしたｗ。
そして前回の課題を多少解消する形で機材配置を変えました。
画面が見づらくなりましたが、顔は斜めから映してますし手元は前よりもキーボードが見やすくなったので、絵面的には良くなりました。
配線＆機材地獄で世の中のYouTuberの人たちの配信の苦労を味わいましたｗ。
作業に関しては序盤はいつもの調子でできたのでよかったのですが、だんだん処理が重くなって待つ時間が長くなって結構焦りました。
ネットもそうだしCPUもかなり消費していて辛かったですね…
途中でWifiの接続を確認したらよりによって2.4GHz帯で接続していたことに気づきました。
いつも5GHz帯で接続してたのでどうりで遅かったわけです。
で、接続を変更したらネットワークの問題は解決しました。
でも結局全体の処理の重さの解決には繋がりませんでした。
3年以上使っていたPCなのでそろそろオンライン配信とかで耐えれるPCに買い替えた方がいいのかな…
とはいえ初の試みにしては結構楽しめましたし、見ていただいた方にも「トラブルがあっても動じなくてすごい！」と好評いただき一安心しましたｗ。
内心はトラブルで焦りましたが、いざ動画を見返すと割と普段の僕をそのまま映しているので変に気張ってないのは良かったかなと思いました(もちろん普段はここまでべらべら喋りながら仕事してるわけじゃないですよｗ)。
ぜひ次回も挑戦したいです！
編集された完全版
後日、ライブコーディングの様子をきれいに編集してもらい、いい感じにかっこいい動画に仕上がりましたｗ。
いいところで画面をアップしていたり当日にあった長く待たされたところは切ってもらえたので、かなり見やすいと思います。
(この動画がいいなと思ったら高評価お願いしますｗ)
おまけ
今回のライブコーディングではAzure Functionsを使って実装しましたが、こんな感じのbotを実装(したかった)という記事を以下で公開しているのこちらもよかったらぜひチェックお願いします。
