YouTubeのリアクションを配信画面に表示させる「Miterun」というアプリを作った
こんにちは。
私は、VTuber事務所StarryCherryという事務所を運営しているんですが、その中で、YouTubeのリアクションを配信画面に表示させたいという希望がありました。
ちなみにリアクションとは、これのことです。
そこで、私はウェブエンジニアでもあるため、ぜひこれを叶えようと思いアプリケーションを制作しました。
それが今回制作したアプリケーション、Miterunです。
サーバーから切断されているとOBS上でオーバーレイとしてこんな画面が出て、素敵です
ソフトウェアの命名については、視聴者が配信を「見ている」ことをより実感できるという意味の見てる、と、開発者の私 巳波みなと と、フロント周りの開発者である tererun の名前をあわせた、という感じです。
我ながら良い命名だと思っています
なお、実際に動いている様子はここから見れます
さて、前置きが長くなってしまいましたが、今回はこのソフトウェアを制作するにあたって考えたことや、使用したアーキテクチャなどをご紹介しようと思います。
全体像
まずは全体像からです。
このようになっています。
特筆すべき点は、アプリケーション部分にDenoを使っていることでしょうか。
これについては後述します。
流れとしては、Puppeteerで制御しているChromeから、YouTubeのコメント情報をインターセプトして、その情報を元に、ブラウザソースにWebSocketでデータを送っています。
おそらくYouTubeのコメントビューアではありがちな構成かなと思います。
技術選定
今回は技術選定するにあたって、以下の条件を満たすようにしました。
- このソフトウェア以外の追加のソフトウェアのインストールを必要としないこと
- ライバーが使うので、なるべく簡単に使えること
- exeファイルで配布すること
- (使い慣れたTypescriptを使いたい)
その結果、先の全体像のような構成になりました。
Puppeteer
実は、Puppeteerを使わなくても、YouTubeのコメントを取得する方法はあります。
このエンドポイントは現在においても生きていて、そのまま使うことができます。
ただし、なんかめっちゃ不安定です。検証中、なんども取り逃すことがありました。
その上、このリアクション機能は実はまだ実験段階です。なので、未ログイン状態でエンドポイントを叩くと、そもそもリアクションの情報が落ちてこないことがあります。未ログインユーザーに対してこのリアクションが表示されるかどうかについては確率のようで、一貫した条件はないようです。
そこで、Puppeteerを利用して、ログインユーザーでデータを取得するようにしたのですが、今度はHeadless状態だとたまにコメントが取得できないという状況になりました。
これについては解決できず、結局Headless設定はなしで運用することにしました。
まとめると、こうなります
- 未ログイン状態で使用できるエンドポイントでは、リアクションが取得できない（ことがある）
- PuppeteerのHeadlessモードだと、リアクションが取得できない（ことがある）
- Puppeteerで未ログインでも、リアクションが取得できない（ことがある）
つまり、ログインユーザーかつ（テストモードであっても）ブラウザで開いている場合は、取得できるということになります。
その他、Electronを使ってインターセプトするという手段もあるにはあるのですが、そこまで大掛かりにはしたくなかったので、今回はPuppeteerを使用することにしました。
Deno
最初から、開発言語はTypescriptでいこうという気持ちでいました。
しかしながら、exeファイルで配布したいと思っていたので、なんとかNode.jsでexeファイルを生成できないかなと調べました。
そしたらなんと、Node.js 19.7には、実験的にSingle Executable Applicationsのサポートがされているらしい！
ただ、やはり実験的機能かつ、まだNode.js 19に対応したパッケージが少ないことを考慮し、まだ時期ではないと見送りました。
次に目をつけたのはnexeとpkgです。
nexeはサポートバージョンが古すぎて使えませんでしたが、pkgはvercelですし、最新のNode.jsまでサポートしてそうでした。
ただ、Typescriptを使うためには少々面倒くさそうな印象があったので、どうしようかなと決めあぐねていました。
そこで登場したのがBunです。
BunはExecutable Fileをサポートしています。
ですが、これも見送りました。
なぜかというと、ライバーさんたちのPCはWindowsなのに対し、BunはまだWindowsをサポートしていないからです。
そして、新しいJSランタイム繋がりで、一応Denoも見てみました。
なぜ今までチェックしていなかったかというと、どちらかというとAPIとかWeb向けのランタイムだと思っていたからです。
でもありました！マジか！
しかもDenoはTypescriptをネイティブサポートしています。
これはDenoしかないと思い、コア部分をDenoで作ることに決めました。
幸い、PuppeteerのDeno向けフォークもありました。
ありがとう.....
ブラウザソース
ブラウザソース部分は、私が適当に作ったのをtererunがいい感じにしてくれました。
基本的にsocket.ioを使用してるところ以外は普通のhtmlファイルです。
フレームワークも特に使用しませんでした。
配信用のローカルサーバーもなく、index.htmlファイルをドラッグアンドドロップすればOBS上で動くようになっています。
適当に作ったので動くか心配でしたが、特に問題なくローカルサーバーと通信してくれていたようでした。
実際の様子です。いい感じですね。
その他困った点
Puppeteer起動にダウンロードが必要
ドキュメントを見てもらえばわかりますが、puppeteerを起動するのに、Choromiumのダウンロードが必要でした。
ですが、コマンドを実行する必要があり、これではexeファイルを実行するだけでは起動できません。
いろいろ調べた結果、PCにChrome系ブラウザがインストールされていれば、Puppeteerからテストモードで起動できると知り、一先ずはPCに入っているChrome系ブラウザを使用するようにしています。
テストモードだとGoogleにログインできない
このように、テストモードだとGoogleにログインできません。
どうやって検出してるのかは知りませんが、UserAgentを変えたくらいでは突破はできないようです。
一応こちらのプラグインを使えば突破できるようですが、このpuppeteer-extraはDenoには対応していません。
頑張ればできないこともなさそうですが、時間も技術もないので見送りました。
今回は、以下のようなCookie抽出拡張を使用することにしました。
ここだけは今回きれいに作りきれず、すこし悔しい感じになってしまいました。
おわり
ここまで見ていただいてありがとうございました。
こんな感じの便利ツールをいっぱい作っているので、よかったら何かほしいツールがあればご依頼ください。Twitterは常時DM開けてますし、会社に問い合わせてもらっても大丈夫です。
それでは
Discussion