OBS Browser 插件使用教程

1. 项目介绍

OBS Browser 是一个基于 CEF（Chromium Embedded Framework）的 OBS Studio 浏览器插件。它允许用户将基于 Web 的覆盖层集成到 OBS Studio 的场景中，并完全访问现代 Web API。此外，OBS Browser 还支持服务集成（链接第三方服务）和浏览器停靠（将网页加载到界面本身），除了 Wayland（Linux）之外，所有支持的平台都可以使用这些功能。

该插件默认包含在 Windows、macOS、Ubuntu PPA 和官方 Flatpak（大多数 Linux 发行版）的官方包中。

2. 项目快速启动

2.1 安装 OBS Browser 插件

OBS Browser 插件通常包含在 OBS Studio 的官方包中，因此您只需安装 OBS Studio 即可。如果您需要手动安装，可以按照以下步骤操作：

1. 克隆项目仓库：

   git clone https://github.com/kc5nra/obs-browser.git
   

2. 进入项目目录：

   cd obs-browser
   

3. 构建项目（假设您已经安装了 CMake 和必要的构建工具）：

   mkdir build
   cd build
   cmake ..
   make
   

4. 将生成的插件文件复制到 OBS Studio 的插件目录中。

2.2 使用 OBS Browser 插件

1. 启动 OBS Studio。
2. 在“来源”面板中，点击“+”按钮，选择“浏览器”。
3. 输入您想要加载的网页 URL，并设置其他参数（如宽度、高度等）。
4. 点击“确定”，网页将作为覆盖层加载到您的场景中。

3. 应用案例和最佳实践

3.1 动态覆盖层

OBS Browser 插件允许您创建动态覆盖层，这些覆盖层可以根据 OBS 中的变化动态调整。例如，您可以创建一个显示当前场景名称的覆盖层：

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

3.2 服务集成

您可以使用 OBS Browser 插件将第三方服务集成到 OBS Studio 中。例如，您可以将 Twitch 聊天窗口加载到 OBS 中，以便在直播时显示聊天内容。

3.3 浏览器停靠

OBS Browser 还支持将网页加载到 OBS Studio 的界面中，作为停靠窗口。这对于需要频繁访问的网页（如控制面板或设置页面）非常有用。

4. 典型生态项目

4.1 OBS Studio

OBS Studio 是一个开源的流媒体和录制软件，广泛用于直播和视频制作。OBS Browser 插件是其生态系统中的一个重要组成部分，提供了强大的 Web 集成功能。

4.2 CEF（Chromium Embedded Framework）

CEF 是一个开源项目，允许将 Chromium 浏览器嵌入到其他应用程序中。OBS Browser 插件基于 CEF 构建，提供了高性能的 Web 渲染能力。

4.3 OBS WebSocket

OBS WebSocket 是一个插件，允许通过 WebSocket 协议远程控制 OBS Studio。结合 OBS Browser 插件，您可以创建更加复杂的自动化和集成解决方案。

通过以上教程，您应该能够快速上手并充分利用 OBS Browser 插件的功能。