# 场景介绍在线抓娃娃是一种让用户通过手机 App 或网站，实时观看视频并远程操控真实物理娃娃机的新型线上娱乐，让用户能足不出户远程操控真实娃娃机，体验抓取的刺激与乐趣。在线抓娃娃的核心是实现娃娃机端与用户端之间的实时交互，其主要角色构成如下： |角色 |描述 | |---|---| |娃娃机 |作为推流端，采集娃娃机内的内容信息并向远端发流，根据用户操作，实时响应机械臂的移动和抓放。 | |玩家 |作为订阅端，实时观看娃娃机内的情况，同时通过信令消息，在手机上远程控制机械爪。 | |观众 |作为订阅端，观看娃娃机内的情况和其他玩家操作。 | ## 方案优势火山引擎在线抓娃娃解决方案，依托先进的实时音视频（RTC）技术，为企业提供了快速搭建低延迟、高沉浸感在线抓娃娃场景的全链路能力。具备以下核心优势： * **超低延迟操控体验** 通过端到端低于 300ms 的超低延迟技术，结合 720P@30fps 高清视频流，以及置先进的网络自适应算法，在弱网环境下仍能保持流畅体验，实现了画面与操作的极致同步。 * **精准可靠的远程控制** 提供独立的高可靠信令通道，用于发送标准化控制指令（如移动、下抓）并接收设备执行反馈。内置的优先级处理机制，确保了远程操控的指令必达与实时响应。 * **多视角（多流）支持** 支持娃娃机端发布多路视频流，客户端可实现自由的视角切换、画中画（PiP）同显功能。通过视角同步确保所有观众与玩家画面一致，为用户打造沉浸式、可自主选择最佳角度的游戏体验。 * **开箱即用的游戏会话管理** 内置完整的游戏会话管理逻辑，覆盖了玩家排队、观众/玩家角色无缝切换、自定义游戏时长等核心功能。同时包含了完善的异常中断处理机制，可保障业务在用户退出等情况下的稳定性。 ## 核心功能 |主要功能 |描述 | |---|---| |设备管理 |支持摄像头与麦克风打开和关闭、摄像头的切换。 | |实时音视频 |玩家在进行抓娃娃过程中，通过实时音视频流，准确判断机械臂和娃娃的位置，观众也可以实时查看玩家的操作 | |实时消息 |玩家在操作娃娃机时，通过实时消息，实时控制机械臂的移动和抓取 | |网络状况检测 |网络质量检测，在用户网络状况不佳的时候给出提示 | |云端录制 |对操作娃娃机的过程进行录制，便于用户分享和商家留存判定及推广分享 | # 方案实现 ## 选择实现方案我们提供了 **全链路 RTC 方案**和 **WTN 方案**，适合不同阶段、不同诉求的开发者。 |方案 |全链路 RTC 方案 |WTN 方案 | |---|---|---| |适合场景 |网络摄像头/视频推流盒支持火山 RTC 协议推流 |网络摄像头/视频推流盒支持 RTMP 协议推流，无需硬件改造 | |开发成本 |中 |低 | |实现方式 |推流网络摄像头/视频推流盒和应用都集成 RTC SDK，娃娃机侧使用 RTC 推流，应用侧使用 RTC 拉流。 |网络摄像头/视频推流盒无需改造，直接使用 RTMP 协议推流，应用侧可直接通过 WebRTC 协议实现超低延时播放。

> 如希望更好的浏览器兼容表现，可选集成火山RTC SDK | |延时 |100\-300ms |300\-400ms | ## 准备工作 1. 获取 AppId： * RTC 方案：具体操作，请参见[开通服务](https://www.volcengine.com/docs/6348/69865)。 * WTN 方案：具体操作，请参见 [准备工作](https://www.volcengine.com/docs/6752/132441)。 2. 在服务端生成鉴权 Token： * RTC 方案：具体操作，请参见 [使用 Token 鉴权](https://www.volcengine.com/docs/6348/70121)。 * WTN 方案：具体操作，请参见 [接口鉴权](https://www.volcengine.com/docs/6752/132442)。 3. 准备推流端和观看端环境： |端 |要求 | |---|---| |**推流端** |* **开启格式支持**：需前往 [RTC 控制台_功能配置](https://console.volcengine.com/rtc/cloudRTC) 手动开启 G711A / AACLC / ByteVC1。

> 仅支持以下音视频格式：音频（OPUS、G722、AAC、G711a）、视频（H264、ByteVC1）

* **硬件要求**：嵌入式设备（如全志、瑞芯微芯片等）。

* **获取 SDK**：先明确平台、编译工具链等信息，联系火山技术支持获取 `VolcEngineRTCLite SDK`。 | |**观看端** |* 仅支持以下音视频格式：音频（OPUS、G722、G711a、AAC）、视频（H264、ByteVC1、VP8）

* Web 端不支持 AAC 音频格式。 | ## 方案集成：全链路 RTC 方案 ### 技术架构 ![图片](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_dd9bc7dcd88532556971d69a7306490b.png) ### 推流端集成（Booka SDK） > 详情见集成文档： [【外部】VolcEngineRTCLite SDK集成说明](https://bytedance.larkoffice.com/docx/TEMCdrJ3VouilPxSpjbc6CyUnAh) #### 1. SDK初始化 ```c #include "VolcEngineRTCLite.h" // 创建实例 byte_rtc_engine_t engine = byte_rtc_create(); // 设置工作目录和日志（需在init前调用） byte_rtc_set_params(engine, "{\"rtc\":{\"root_path\":\"/path/to/workdir\"}}"); byte_rtc_config_log(engine, "/path/to/logs", 1010241024, 10); // 初始化SDK byte_rtc_init(engine); ``` #### 2. 音视频配置 ```c // 设置编码格式（需在init后调用） byte_rtc_set_audio_codec(engine, "opus"); // 或 "aaclc"、"g711a" byte_rtc_set_video_codec(engine, "h264"); // 或 "bytevc1" // 视频参数建议：720P@30fps，码率2-4Mbps byte_rtc_set_video_encoder_config(engine, 1280, 720, 30, 4000); ``` #### 3. 加入房间并推流 ```c // 房间ID格式：RTC_{视频编码}_{音频编码}_{自定义后缀}（如RTC_H264_OPUS_room1） byte_rtc_room_options_t options = {true, false, true, true}; // 自动发布音视频 byte_rtc_join_room(engine, "房间ID", "用户ID", "Token", &options, on_join_room_success); // 回调处理 void on_join_room_success(byte_rtc_engine_t engine, const char* room_id) { // 开始推送摄像头数据 byte_rtc_send_video_data(engine, video_frame_data, frame_size); } ``` ### 观看端集成（以 Web 为例） > * 详情见 [Web 集成文档](https://www.volcengine.com/docs/6348/106914)。 > * 其他端的集成操作，请参见 [实现音视频通话](https://www.volcengine.com/docs/6348/70123)。 #### 1. 集成 SDK * **方式一：使用 npm (推荐)** 1. 安装 SDK：`npm install @volcengine/rtc`。 2. 引入 SDK：在实现功能的 `js` 文件中添加 `import VERTC from '@volcengine/rtc';`。 * **方式二：通过 CDN 地址引入**此方式无需下载安装，可直接在 html 文件中添加 CDN 地址引入。[如何获取最新 CDN 地址？](https://www.volcengine.com/docs/6348/75707#%E4%B8%8B%E8%BD%BD-sdk) #### 2. 加入房间并订阅流 ```javascript const client = RTC.createClient({ mode: "live", codec: "h264" }); client.join("APPID", "房间ID", "Token", "用户ID"); // 订阅娃娃机流 client.on("stream-added", (event) => { const stream = event.stream; if (stream.getUserId() === "娃娃机用户ID") { client.subscribe(stream); } }); // 渲染视频 client.on("stream-subscribed", (event) => { const stream = event.stream; stream.play("video-element-id"); }); // 发送控制信令 function sendControlCommand(action) { client.sendMessage("娃娃机用户ID", JSON.stringify({ action })); } ``` **核心接口** |**接口名称** |**功能描述** |**主要参数及说明** | |---|---|---| |createEngine(appId) |创建本地 RTC 引擎实例 |appId：应用唯一标识符 | |joinRoom(token, roomId, user, options) |加入指定房间 |token：鉴权token；roomId：房间号；user：用户信息；options：是否自动发布/订阅等配置 | |on(event, callback) |监听事件，如远端用户发布流 |event：事件名；callback：事件回调函数 | |setRemoteVideoPlayer(streamIndex, config) |设置远端视频流渲染容器 |streamIndex：远端流索引；config：渲染容器配置信息 | |leaveRoom() |离开当前房间，停止所有流的发布和订阅 |无 | ## 方案集成：WTN 方案 ### 技术架构 ![图片](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_f039a5a851d1b3436926dec91acfb09e.png) ### 推流端集成通过接口 [RtmpAccessInfo](https://bytedance.larkoffice.com/docx/UROwdGmjXoiX2cx4RFvc9nmBnCc) 获取 RTMP 推流地址，配置到娃娃机侧的网络摄像头、视频推流盒上，即可实现低延时 RTMP 音视频推流。 ### 观看端集成你可以使用你填入的 StreamID 实现播放 WTN 流，你可以使用以下两种方式： * 自研 WebRTC 协议： 1. 调用[创建订阅资源](https://www.volcengine.com/docs/6752/132484)接口，传入 StreamID 创建订阅资源。 2. 参看[订阅端：订阅和播放音视频流](https://www.volcengine.com/docs/6752/132450)，实现播放 WTN 流。 * 使用 RTC SDK：如果希望 H5 浏览器兼容性，快速实现自动启播等效果，建议接入 RTC SDK，通过 [subscribeWTNVideoStream](https://www.volcengine.com/docs/6348/70080#subscribewtnvideostream)/[subscribeWTNAudioStream](https://www.volcengine.com/docs/6348/70080#subscribewtnaudiostream)（Natvie）/[startPlayWTN](https://www.volcengine.com/docs/6348/104478#wtnstream-startplaywtn)（Web）接口填入 StreamID 实现播放 WTN 流。 ## 注意事项 * **音视频格式匹配**：硬件推流端的音视频编码格式，需与用户拉流端的格式匹配，否则可能导致播放失败。 * **Web 端自动播放策略**：主流浏览器对视频自动播放有严格限制，通常需要用户与页面有交互后才能播放。详情可参考 [Web 端自动播放策略说明](https://www.volcengine.com/docs/6348/130302)。