OBS浏览器插件技术文档

OBS浏览器插件技术文档

obs-browser CEF-based OBS Studio browser plugin 项目地址: https://gitcode.com/gh_mirrors/ob/obs-browser

欢迎来到OBS浏览器插件的世界，一个为OBS Studio量身定制的强大工具，它通过集成Chromium Embedded Framework（CEF）为您提供跨平台的Web源功能。这个插件让您可以无缝地将基于Web的内容融入您的直播场景，并利用现代Web API的全部力量。

安装指南

预打包版本

对于大多数用户，最简便的安装方法是通过官方包。在Windows和macOS上，此插件已经包含在默认的OBS Studio安装中。对于Linux用户，确保从Ubuntu PPA或者Flatpak获取带有该插件的OBS Studio版本。

手动编译

若需手动构建以确保最新特性或进行自定义，遵循以下步骤：

• Windows: 按照OBS Studio的Windows构建指南，并设置CEF_ROOT_DIR指向下载好的CEF Wrapper路径。

• macOS: 利用macOS全构建脚本，该脚本会自动处理依赖项，包括启用OBS浏览器插件。

• Linux: 跟随OBS Studio的Linux构建指导，选择“如果要构建带浏览器源”的选项，并正确配置CEF Wrapper的相关CMake变量。

使用说明

OBS浏览器插件允许您创建内嵌网页的场景元素。只需在OBS Studio中添加一个新的“Browser”源，即可开始整合HTML/CSS/JavaScript内容。

TypeScript类型定义

对于TypeScript开发者，可通过npm或yarn安装@types/obs-studio来获得插件绑定的类型定义：

npm install --save-dev @types/obs-studio
# 或者，如果您使用yarn
yarn add --dev @types/obs-studio

项目API使用文档

插件向JavaScript提供了一个全局对象，允许访问一些特定于OBS的功能，使您的网页可以动态响应OBS状态的变化。

获取插件版本

示例代码展示如何获取插件当前版本：

console.log(window.obsstudio.pluginVersion); // 输出版本号，例如："2.17.0"

监听事件

您可以监听如obsSceneChanged等核心前端事件，这些事件提供了强大的场景控制能力。例如，监听场景变化事件并作出反应：

window.addEventListener('obsSceneChanged', function(event) {
    var textNode = document.createTextNode(event.detail.name);
    document.body.appendChild(textNode);
});

控制OBS Studio行为

插件允许通过JavaScript接口直接控制OBS的行为，比如开始/停止录制、切换场景等，但需要相应的权限级别。

• 检查控制权限

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

• 获取当前场景

  window.obsstudio.getCurrentScene(function(scene) {
      console.log(scene.name);
  });
  

• 开始流式传输

  window.obsstudio.startStreaming();
  

更多API详情，包括获取输出状态、场景列表等，可参考上述文档片段或直接查阅OBS Studio前端API文档。

总结

OBS浏览器插件极大地扩展了OBS Studio的功能，让开发者能够深度结合Web技术和直播制作，实现高度自定义的交互体验。无论是通过简单的场景切换通知，还是到复杂的、动态交互的直播界面，OBS浏览器插件都是不可多得的工具。记得遵循正确的安装步骤，并充分利用提供的API，探索无限可能。

obs-browser CEF-based OBS Studio browser plugin 项目地址: https://gitcode.com/gh_mirrors/ob/obs-browser