OBS-Browserは、CEF(Chromium Embedded Framework)を搭載したクロスプラットフォームブラウザーソースをOBS Studioに導入します。ブラウザソースを使用すると、ユーザーは最新のWeb APIに完全にアクセスできるように、Webベースのオーバーレイをシーンに統合できます。
さらに、OBS-Browserは、Wayland(Linux)を除くすべてのサポートされているプラットフォームで、サービス統合(サードパーティサービスのリンク)とブラウザードック(インターフェイス自体にロードされたWebページ)を有効にします。
このプラグインは、Windows、MacOS、Ubuntu PPA、および公式フラットパック(ほとんどのLinuxディストリビューション)の公式パッケージにデフォルトで含まれています。
OBS-Browserは、JavaScriptからのobs固有の機能へのアクセスを可能にするグローバルオブジェクトを提供します。これを使用して、OBSの変化に動的に適応するオーバーレイを作成できます。
TypeScriptを使用している場合、OBS-Browserバインディングのタイプ定義はNPMとYARNを通じて利用できます。
# npm
npm install --save-dev @types/obs-studio
# yarn
yarn add --dev @types/obs-studio
/**
* @returns {string} OBS Browser plugin version
*/
window . obsstudio . pluginVersion
// => 2.17.0
/**
* @callback EventListener
* @param {CustomEvent} event
*/
/**
* @param {string} type
* @param {EventListener} listener
*/
window . addEventListener ( 'obsSceneChanged' , function ( event ) {
var t = document . createTextNode ( event . detail . name )
document . body . appendChild ( t )
} )
これらのイベントの説明はここにあります。
必要な権限:なし
/**
* @typedef {number} Level - The level of permissions. 0 for NONE, 1 for READ_OBS (OBS data), 2 for READ_USER (User data), 3 for BASIC, 4 for ADVANCED and 5 for ALL
*/
/**
* @callback LevelCallback
* @param {Level} level
*/
/**
* @param {LevelCallback} cb - The callback that receives the current control level.
*/
window . obsstudio . getControlLevel ( function ( level ) {
console . log ( level )
} )
必要な権限:read_obs
/**
* @typedef {Object} Status
* @property {boolean} recording - not affected by pause state
* @property {boolean} recordingPaused
* @property {boolean} streaming
* @property {boolean} replaybuffer
* @property {boolean} virtualcam
*/
/**
* @callback StatusCallback
* @param {Status} status
*/
/**
* @param {StatusCallback} cb - The callback that receives the current output status of OBS.
*/
window . obsstudio . getStatus ( function ( status ) {
console . log ( status )
} )
必要な権限:read_user
/**
* @typedef {Object} Scene
* @property {string} name - name of the scene
* @property {number} width - width of the scene
* @property {number} height - height of the scene
*/
/**
* @callback SceneCallback
* @param {Scene} scene
*/
/**
* @param {SceneCallback} cb - The callback that receives the current scene in OBS.
*/
window . obsstudio . getCurrentScene ( function ( scene ) {
console . log ( scene )
} )
必要な権限:read_user
/**
* @callback ScenesCallback
* @param {string[]} scenes
*/
/**
* @param {ScenesCallback} cb - The callback that receives the scenes.
*/
window . obsstudio . getScenes ( function ( scenes ) {
console . log ( scenes )
} )
必要な権限:read_user
/**
* @callback TransitionsCallback
* @param {string[]} transitions
*/
/**
* @param {TransitionsCallback} cb - The callback that receives the transitions.
*/
window . obsstudio . getTransitions ( function ( transitions ) {
console . log ( transitions )
} )
必要な権限:read_user
/**
* @callback TransitionCallback
* @param {string} transition
*/
/**
* @param {TransitionCallback} cb - The callback that receives the transition currently set.
*/
window . obsstudio . getCurrentTransition ( function ( transition ) {
console . log ( transition )
} )
必要な権限:基本
/**
* Does not accept any parameters and does not return anything
*/
window . obsstudio . saveReplayBuffer ( )
必要な権限:Advanced
/**
* Does not accept any parameters and does not return anything
*/
window . obsstudio . startReplayBuffer ( )
必要な権限:Advanced
/**
* Does not accept any parameters and does not return anything
*/
window . obsstudio . stopReplayBuffer ( )
必要な権限:Advanced
/**
* @param {string} name - Name of the scene
*/
window . obsstudio . setCurrentScene ( name )
必要な権限:Advanced
/**
* @param {string} name - Name of the transition
*/
window . obsstudio . setCurrentTransition ( name )
必要な権限:すべて
/**
* Does not accept any parameters and does not return anything
*/
window . obsstudio . startStreaming ( )
必要な権限:すべて
/**
* Does not accept any parameters and does not return anything
*/
window . obsstudio . stopStreaming ( )
必要な権限:すべて
/**
* Does not accept any parameters and does not return anything
*/
window . obsstudio . startRecording ( )
必要な権限:すべて
/**
* Does not accept any parameters and does not return anything
*/
window . obsstudio . stopRecording ( )
必要な権限:すべて
/**
* Does not accept any parameters and does not return anything
*/
window . obsstudio . pauseRecording ( )
必要な権限:すべて
/**
* Does not accept any parameters and does not return anything
*/
window . obsstudio . unpauseRecording ( )
必要な権限:すべて
/**
* Does not accept any parameters and does not return anything
*/
window . obsstudio . startVirtualcam ( )
必要な権限:すべて
/**
* Does not accept any parameters and does not return anything
*/
window . obsstudio . stopVirtualcam ( )
この方法はレガシーです。代わりにイベントリスナーを登録します。
/**
* onVisibilityChange gets callbacks when the visibility of the browser source changes in OBS
*
* @deprecated
* @see obsSourceVisibleChanged
* @param {boolean} visibility - True -> visible, False -> hidden
*/
window . obsstudio . onVisibilityChange = function ( visibility ) {
} ;
この方法はレガシーです。代わりにイベントリスナーを登録します。
/**
* onActiveChange gets callbacks when the active/inactive state of the browser source changes in OBS
*
* @deprecated
* @see obsSourceActiveChanged
* @param {bool} True -> active, False -> inactive
*/
window . obsstudio . onActiveChange = function ( active ) {
} ;
Obs-Browserには、Obs-Websocketのベンダーリクエストとの統合が含まれています。使用するベンダー名はobs-browser
であり、利用可能なリクエストは次のとおりです。
emit_event
event_name
取りますか? event_data
パラメーター。すべてのブラウザソースにカスタムイベントを発します。イベントを購読するには、こちらをご覧ください現時点では、利用可能なベンダーイベントはありません。
OBSブラウザはスタンドアロンを構築することはできません。 OBS Studioの一部として構築されています。
手順に従うことにより、3つのプラットフォームすべてでブラウザソースとカスタムブラウザドックが可能になります。 BUILD_BROWSER
とCEF_ROOT_DIR
の両方が必要です。
ビルドの指示に従って、 CEFラッパーをダウンロードし、cmakeでCEF_ROOT_DIR
設定して、抽出されたラッパーを指すようにしてください。
MacOSフルビルドスクリプトを使用します。これにより、OBSブラウザを自動的にダウンロードして有効にします。
ビルドの指示に従って、[ブラウザソース付きの構築]オプションを選択します。これには、CEFラッパーをダウンロード/抽出し、必要なcmake変数を設定する手順が含まれます。