https://amatsuzero.github.io/LastStand/tags/obs/Recent content in OBS on Last StandHugozh-cnMon, 01 Jun 2026 12:00:21 +0800https://amatsuzero.github.io/LastStand/posts/pchelper/Mon, 01 Jun 2026 12:00:21 +0800https://amatsuzero.github.io/LastStand/posts/pchelper/<h2 id="背景介绍">背景介绍</h2> <p>腾讯体育的个人直播业务中，主播开启比赛陪看直播一直仅支持移动端开播。然而，移动端开播存在屏幕尺寸过小、摄像头拍摄角度受限等问题，严重影响了主播的解说体验。为了提升主播在比赛解说场景下的使用体验，同时降低使用 OBS 进行运营的人力成本，我们决定在腾讯视频 PC 开播助手的基础上进行迭代开发，新增对腾讯体育比赛陪看功能的支持。</p> <p>选择陪看比赛界面： <img alt="select_match.png" loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/pchelper/select_match.webp"></p> <p>陪看解说画面： <img alt="on-air.png" loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/pchelper/place_holder.png"></p> <p>从零开发一款 PC 开播软件的成本较高。幸运的是，腾讯视频已经拥有一款成熟的 PC 开播助手，用于支持主播或艺人在 PC 端进行直播。虽然当时该产品尚不支持陪看直播功能，但我们可以在其基础上进行二次开发：接入腾讯体育的账号体系，并新增比赛陪看能力，从而以最小的开发成本实现业务需求。</p> <h2 id="整体架构概览">整体架构概览</h2> <p>腾讯视频 PC 开播助手基于 Electron 框架开发，推流等核心功能则依赖 OBS Node（obs-studio-node）实现，前端部分采用 Vue.js 技术栈。</p> <p>OBS Studio 是一款知名的开源直播与录屏工具，其客户端使用 Qt 框架绘制界面。OBS Node 是将 OBS Studio 的核心功能模块进行封装，使其能够被 Node.js 直接调用的扩展库。</p> <p>OBS 原生支持多种推流协议，但腾讯视频直播中台采用的是 TRTC（Tencent Real-Time Communication）协议。在此基础上，视频 PC 开播助手对 OBS Node 进行了以下扩展：</p> <ol> <li><strong>TRTC 协议支持</strong>：实现基于 TRTC 的推流和连麦功能；</li> <li><strong>移动设备开播支持</strong>：支持使用手机等移动设备作为视频源进行开播。</li> </ol> <p>整体技术架构如下图所示：</p> <div style="border:1px solid #334155;border-radius:12px;padding:14px 16px;background:rgba(15,23,42,0.35);margin:12px auto;max-width:920px;color:#e2e8f0;"> <div style="font-weight:700;font-size:15px;margin-bottom:10px;color:#e2e8f0;">图 1｜整体技术架构</div> <div style="display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;"> <div style="border:1px solid #60a5fa;border-radius:8px;padding:6px 10px;min-width:150px;text-align:center;background:rgba(96,165,250,0.12);color:#dbeafe;">Renderer 进程<br/>Vue UI</div> <div style="font-weight:700;color:#60a5fa;">⇄ IPC ⇄</div> <div style="border:1px solid #60a5fa;border-radius:8px;padding:6px 10px;min-width:150px;text-align:center;background:rgba(96,165,250,0.12);color:#dbeafe;">Main 进程<br/>Node + Native</div> <div style="font-weight:700;color:#60a5fa;">→</div> <div style="border:1px solid #60a5fa;border-radius:8px;padding:6px 10px;min-width:120px;text-align:center;background:rgba(96,165,250,0.12);color:#dbeafe;">OBS Node</div> <div style="font-weight:700;color:#60a5fa;">+</div> <div style="border:1px solid #60a5fa;border-radius:8px;padding:6px 10px;min-width:120px;text-align:center;background:rgba(96,165,250,0.12);color:#dbeafe;">TRTC SDK</div> </div> <div style="display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;"> <div style="border:1px dashed #94a3b8;border-radius:8px;padding:6px 10px;background:rgba(148,163,184,0.10);color:#cbd5e1;">腾讯体育后台服务（账号/房间/陪看控制）</div> <div style="color:#94a3b8;">→ Main 进程</div> <div style="border:1px dashed #94a3b8;border-radius:8px;padding:6px 10px;background:rgba(148,163,184,0.10);color:#cbd5e1;">虚拟主播（比赛点播转直播）</div> <div style="color:#94a3b8;">→ TRTC SDK</div> </div> <div style="display:flex;flex-wrap:wrap;align-items:center;gap:8px;"> <div style="border:1px solid #22d3ee;border-radius:8px;padding:6px 10px;background:rgba(34,211,238,0.12);color:#cffafe;">主播推流</div> <div style="color:#22d3ee;font-weight:700;">→</div> <div style="border:1px solid #22d3ee;border-radius:8px;padding:6px 10px;background:rgba(34,211,238,0.12);color:#cffafe;">TRTC 云端混流</div> <div style="color:#22d3ee;font-weight:700;">→</div> <div style="border:1px solid #22d3ee;border-radius:8px;padding:6px 10px;background:rgba(34,211,238,0.12);color:#cffafe;">观众端</div> </div> </div> <h3 id="多房间架构设计subroom">多房间架构设计（SubRoom）</h3> <p>陪看场景最大的技术约束是：主播需要同时处于<strong>主直播间</strong>和<strong>虚拟陪看房间</strong>。为此我们在 TRTC 单房间模型之上封装了 <code>ITRTCSubRoom</code>，并通过 <code>SubRoomService</code> 统一管理子房间生命周期。</p>