一、步骤一：开通服务
在线娃娃机场景通常需要依赖腾讯云 实时音视频 TRTC 付费 PaaS 服务构建。其中，TRTC 负责提供实时音视频互动能力。你可根据实际业务需求自由选择开通上述服务。
1. 首先，你需要登录 实时音视频 TRTC 控制台 > 应用管理 创建应用，你可根据需要选择升级 TRTC 应用版本，例如旗舰版可解锁更多增值功能服务。
注意：说明：
2. 应用创建完毕之后，你可以在 应用管理 > 应用概览中看到该应用的基本信息，其中需要你保管好 SDKAppID、SDKSecretKey 便于后续使用，同时应避免密钥泄露造成流量盗刷。
二、NPM 集成
1. 你可以在项目中使用 npm 安装 trtc-sdk-v5。
npm install trtc-sdk-v5 –save
2. 在项目脚本里导入模块。
import TRTC from 'trtc-sdk-v5';
三、Script 集成
在你的 Web 页面中添加如下代码即可：
<script src="trtc.js"></script>
注意：说明：
注意：trtc.js 需要下载至你项目本地进行集成，对应的 SDK 下载链接与 Demo 地址。
四、步骤三：鉴权与许可
UserSig 是腾讯云设计的一种安全保护签名，目的是为了阻止恶意攻击者盗用你的云服务使用权，TRTC 在进房时校验该鉴权凭证。
·调试跑通阶段：可以通过 客户端示例代码 或 控制台 计算生成 UserSig，仅用于调试测试。
·正式运行阶段：推荐安全等级更高的服务端计算 UserSig 方案，防止客户端被逆向破解泄露密钥。
具体实现流程如下：
1. 你的 App 在调用 SDK 的初始化函数之前，首先要向你的服务器请求 UserSig。
2. 你的服务器根据 SDKAppID 和 UserID 计算 UserSig。
3. 服务器将计算好的 UserSig 返回给你的 App。
4. 你的 App 将获得的 UserSig 通过特定 API 传递给 SDK。
5. SDK 将 SDKAppID + UserID + UserSig 提交给腾讯云服务器进行校验。
6. 腾讯云校验 UserSig，确认合法性。
7. 校验通过后，会向 TRTC SDK 提供实时音视频服务。
五、步骤五：初始化 SDK 与监听
TRTC SDK 创建实例与设置事件监听器。
const trtc = TRTC.create();trtc.on('error', err => { console.error(err);});
注意：说明：
注意：建议监听 SDK 事件通知，对一些常见错误进行日志打印和处理，详请请参见 错误码表。
六、步骤六：生成 RTMP 推流地址（RTMP推流）
1. 进入 实时音视频 > 应用管理，在应用的功能配置 > 增值功能页面开启输入媒体流进房功能。
2. 生成 RTMP 推流地址。
rtmp://rtmp.rtc.qq.com/push/房间号?sdkappid=应用&userid=用户名&usersig=签名
·RTMP appName 是 push。
·地址中的房间号、应用、用户名、签名需要换成业务的。
·为简化参数，只支持字符串房间号，不超过64个字符，字符只能是数字、字母、下划线。
·usersig 的生成规则，请参见 UserSig 相关 （请注意签名要在有效期内）。
示例：
rtmp://rtmp.rtc.qq.com/push/hello-string-room?sdkappid=140*****66&userid=******rtmp2&usersig=eJw1jdE********RBZ8qKGRj8Yp-wVbv*mGMVZqS7w-mMDQL
七、TRTC 推流
1. 通过 客户端示例代码 或 控制台 计算生成 UserSig。
2. 将 SdkAppid、UserId、Usersig、RoomId 等信息配置到 TRTC 网络摄像头或推流盒上开启推流。
八、RTMP 推流
1. 通过 RTMP 推流生成器 生成 RTMP 推流地址。
2. 将 RTMP 推流地址配置到 RTMP 网络摄像头或推流盒上开启推流。
九、步骤二：用户进房拉流
1. 用户进入 TRTC 房间。
const trtc = TRTC.create();// 进入房间try { await trtc.enterRoom({ strRoomId, scene:'rtc', sdkAppId, userId, userSig}); console.log('进房成功');} catch (error) { console.error('进房失败' + error);}
2. 用户订阅主播音视频流。
trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => { // 为了播放视频画面，你需在 DOM 中放置一个 HTMLElement，可以是一个 div 标签，假设其 id 为 ${userId}_${streamType} const view = ${userId}_${streamType}; trtc.startRemoteVideo({ userId, streamType, view });});trtc.on(TRTC.EVENT.FIRST_VIDEO_FRAME, event => { // event.height: 视频高度 // event.width: 视频宽度 // event.streamType: 视频流类型. // event.userId: 用户 ID，若是空串，则代表是本地视频。})
十、步骤三：用户退出房间
1. 用户退出房间。
await trtc.exitRoom(); // 退房成功后，若后续无需使用 trtc 实例，则可以调用 trtc.destroy 方法销毁实例，及时释放相关资源。// 销毁后的 trtc 实例无法继续使用，需要重新创建新的实例。trtc.destroy();
2. 解散房间。
·服务端解散房间
TRTC 提供了服务端解散数字类型房间 API DismissRoom，以及解散字符串类型房间 API DismissRoomByStrRoomId，你可以通过调用服务端解散房间接口把房间内所有用户从房间移出，并解散房间。
·客户端解散房间
客户端没有直接解散房间的 API，需要各个客户端调用 exitRoom 退出房间，当房间内的所有主播和观众完成退房后，根据 TRTC 房间生命周期规则，房间将会自动解散，详情请参见 TRTC 退出房间。
十一、自动播放策略限制
在 Web 端拉流的场景中，为了提升用户进入房间的体验，默认设置为进入房间后自动播放。但是，在 Android 和 iOS 的 Webview 中，默认的自动播放策略可能与浏览器中的不同。你可以参考以下文档，在你的 App 中关闭自动播放限制。
·Android Webview 关闭自动播放限制：调用 setMediaPlaybackRequiresUserGesture(false) 关闭自动播放限制。
·iOS Webview 关闭自动播放限制：设置 mediaTypesRequiringUserActionForPlayback 为 WKAudiovisualMediaTypeNone。
注意：说明：