根据本文指导快速集成 TTT Web SDK 并在你自己的 app 里实现音视频互动直播。
阅读本文档需要有es6、npm基础, 以及node环境
本地调试仅localhost / 127.0.0.1可以正常使用,如需IP访问,请使用HTTPS部署本地环境
线上生产环境请确保使用HTTPS部署,以保证功能正常使用
DEMO 体验
我们在 GitHub 上提供一个开源的基础视频互动直播示例项目,在开始开发之前你可以通过该示例项目体验互动直播效果。
名词解释
在使用tttwebsdk时,你主要操作两种对象:
- Client: 一个客户端。Client类的方法提供了加入房间、发布Stream、接收房间事件等方法。
- Stream: 本地音视频流以及远端音视频流。Stream类的方法提供了调用本地音视频设备、播放远端音视频等方法。
集成 SDK
- 安装tttwebsdk
npm install tttwebsdk --save
- 在你的项目中引入websdk
;
加入直播房间
下图展示了加入直播房间的基本流程(图中的方法是对不同的对象调用的)
本文为快速入门指导,介绍 TTTWebSDK 基本用法。完整的 API 方法和回调详见 WebSDK API 参考
下面是代码具体实现
- 加入房间
; let TTTRtc = ; const APP_ID = 'xxxxxxxxxxxxxxxxxxx'; const USER_ID = 91619846; const ROOM_ID = 31819684; const token = ''; // 如果无需认证,则该参数取值为 '' /*创建本地客户端,并设置加入房间的角色为主播 * role : 1 主播 | 2 副播 | 3 观众) * rtmpUrl : 设置 cdn 推流地址 */ let client = TTTRtc; /*初始化客户端*/ client
注: APP_ID: 类型为字符串,请联系三体云获取; USER_ID: 类型为整型,大于0且小于2^32,用户在该房间内的唯一标识; ROOM_ID: 类型为整型,大于0且小于2^32,要加入的房间号,如果该房间不存在,则会创建该房间。
- 监听房间相关事件
这些事件是服务器收到其他用户的加入/离开房间、发布流等事件后,推送到client的事件。
client // 有用户加入 client // 有用户离开 // 有音频流加入 -- 可通过 client.subscribe 订阅该流播放 client client // 某路流订阅成功,将执行 play client client // 已取消订阅的流 client // 已经和服务器断开链接 //... 更多事件请参考三体云websdk文档
注:我们建议在 createClient 成功后就监听这些事件。
- 发布本地音视频流
在加入房间(client.join)成功后,创建一个本地音视频流。
let localStream = TTTRtc
调用 Stream.init 方法初始化创建的流,成功后用client.publish发布这个流。
localStream
- 离开房间
localStream; client; client;