OBSのブラウザソースからJavaScript扱う時の豆知識

概要

javascript(html+css等)を使って、OBSにブラウザソースを読み込ませるタイプの何かを開発している時のメモ

※ ほぼ殴り書きの雑記状態

OBSのデバッグ用サーバー機能

これ知っているのと知らないのとでは天地の差があります。 ありました(体験談)

OBS起動時(ショートカット)に --remote-debugging-port=1234 オプションをつけるだけ。
1234 部分は、好きな(他と被らない)ポート番号でもOK

OBSブラウザ(CEF)のローカルサーバーが起動するので、
http://localhost:1234/ にアクセスすれば、OBSに組み込んだブラウザソース上で DevTools が使えるようになる。

その他、レアケースだと思うけど、家庭内LAN同士で繋がっているホームネットワークであれば、
OBSを起動させたPCのアドレスへアクセスして、文字通りのリモートデバッグができるのかも？
http://192.168.xx.xx:1234/ みたいな感じで。
( ファイアーウォールとかはどうなんだろう。未確認です )

OBS内部のブラウザバージョン

window.navigatorを展開
window.navigator.appVersion で UserAgent文字列が得られる。

• OBS v27.1.3

  5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 OBS/27.1.3 Safari/537.36

• OBS v27.2.1

  5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 OBS/27.2.1 Safari/537.36

OBS専用のグローバルオブジェクトなどがあるらしい

例えば window.obsstudio とか。
window.obsstudio.pluginVersion で OBSバージョンを取得可能

https://github.com/obsproject/obs-browser#obs-browser

https://github.com/obsproject/obs-browser#js-bindings

Webページの操作権限などを確認。
ブラウザソースのプロパティにてOBSの操作権限を指定する項目がある

ソースプロパティの権限レベルを手動で弄れば、javascript側からでもOBSをいくらか操作できる...のかもしれない？
( うわさに聞く obs-webSocket のほうが強そうだけど )

window.obsstudio.getControlLevel(function (level) {
    console.log(level)
})

window.obsstudio.getStatus(function (status) {
    console.log(status)
})

余談

最近まで特定のECMAScript記法が(Windows版で)使えなかった

OBS内蔵のブラウザ、ことECMAScriptの記述法に関しては、
CEF(Chromium Embedded Framework) と呼ばれるものに依存している模様。

https://github.com/obsproject/obs-studio/discussions/3853
このディスカッションを眺めていると、そんな雰囲気を感じます。

OBS 27.1 時点で
mac版 26.1.2 では CEF4183 (Chromium 85)
Linux版 27.0 では CEF4280 (Chromium 87)
が、それぞれ組み込まれているものの、
Windows版 27.1 だと CEF3770 (Chromium 75) ← 上記OSと比べて古い
というのがクセモノ(だった)。

2021/10/21 のアナウンスでも

CEFアップデートをOBS27.1に詰め込むことができませんでした。

との事。

ただ、現在 OBS 27.2.1 (執筆時)では windows版でも CEF が更新され、
もう少しイケイケな記法が使えるようになった👍