导语 | 腾讯云 Web 直播互动组件——TWebLive，是腾讯云终端研发团队推出的一个新的 SDK，开发者只需简单接入，就能快速实现 Web推/拉流、实时互动等功能。本文就将为大家揭开这款 SDK 的神秘面纱，希望与大家一同交流。文章作者：杨桥，腾讯云 Web 研发工程师。
一、TWebLive 简介
TWebLive [1] 集成了腾讯云实时音视频 TRTC [2]、腾讯云即时通信 TIM [3]、腾讯云超级播放器 TCPlayer [4]，覆盖了 Web 直播互动场景常见的功能（推流、开/关麦，开/关摄像头，微信分享观看、聊天点赞等等），并封装了简单易用的 API [5]，接入后可快速实现 Web 端推流、拉流以及实时聊天互动功能。
效果展示
TWebLive 架构设计如下图所示：
二、TWebLive 的优势
开发者接入此 SDK，可彻底替代 flash 推流方案，大大降低 Web 推流、Web 低延时观看、CDN 观看以及实时聊天互动（或弹幕）的实现复杂度和时间成本，下面我们通过举例来进行说明。
1. 推流
当需要推流时，创建 Pusher（推流）对象，最简单的推流仅需3步：
<div id="pusherView" style="width:100%; height:auto;"></div><script>// 1、创建 Pusher（推流）对象let pusher = TWebLive.createPusher({ userID: 'your userID' });
// 2、设置渲染界面，且从麦克风采集音频，从摄像头采集视频（默认720p）pusher.setRenderView({ elementID: 'pusherView', audio: true, video: true}).then(() => { // 3、填入 sdkappid roomid 等信息，推流 // url 必须以 `room://` 开头 let url = `room://sdkappid=${SDKAppID}&roomid=${roomID}&userid=${userID}&usersig=${userSig}&livedomainname=${liveDomainName}&streamid=${streamID}`; pusher.startPush(url).then(() => { console.log('pusher | startPush | ok'); });}).catch(error => { console.error('pusher | setRenderView | failed', error);});</script>
2. 拉流
当需要拉流播放时，创建 Player（播放器）对象，最简单的拉流仅需3步：
<div id="playerView" style="width:100%; height:auto;"></div><script>// 1、创建 Player（播放器）对象let player = TWebLive.createPlayer();
// 2、设置渲染界面player.setRenderView({ elementID: 'playerView' });
// 3、填入 flv hls 地址等信息，拉 CDN 流播放，此时 url 必须以 `https://` 开头// 或 填入 sdkappid roomid 等信息，拉 WebRTC 低延时流播放，此时 url 必须以 `room://` 开头let url = 'https://' + 'flv=https://200002949.vod.myqcloud.com/200002949_b6ffc.f0.flv' + '&' // 请替换成实际可用的播放地址 + 'hls=https://200002949.vod.myqcloud.com/200002949_b6ffc.f0.m3u8' // 请替换成实际可用的播放地址
// let url = `room://sdkappid=${SDKAppID}&roomid=${roomID}&userid=${userID}&usersig=${userSig}`;player.startPlay(url).then(() => { console.log('player | startPlay | ok');}).catch((error) => { console.error('player | startPlay | failed', error);});</script>
3. 直播互动
当主播和观众需要聊天互动时，创建 IM（即时通信）对象，最简单的消息收发仅需3步：
// 1、创建 IM（即时通信）对象并监听事件let im = TWebLive.createIM({ SDKAppID: 0 // 接入时需要将0替换为您的云通信应用的 SDKAppID});// 监听 IM_READY IM_TEXT_MESSAGE_RECEIVED 等事件let onIMReady = function(event) { im.sendTextMessage({ roomID: 'your roomID', text: 'hello from TWebLive' });};let onTextMessageReceived = function(event) { event.data.forEach(function(message) { console.log((message.from || message.nick) + ' : ', message.payload.text); });};// 接入侧监听此事件，然后可调用 SDK 发送消息等im.on(TWebLive.EVENT.IM_READY, onIMReady);// 收到文本消息，上屏im.on(TWebLive.EVENT.IM_TEXT_MESSAGE_RECEIVED, onTextMessageReceived);
// 2、登录im.login({userID: 'your userID', userSig: 'your userSig'}).then((imResponse) => { console.log(imResponse.data); // 登录成功 if (imResponse.data.repeatLogin === true) { // 标识账号已登录，本次登录操作为重复登录 console.log(imResponse.data.errorInfo); }}).catch((imError) => { console.warn('im | login | failed', imError); // 登录失败的相关信息});
// 3、加入直播间im.enterRoom('your roomID').then((imResponse) => { switch (imResponse.data.status) { case TWebLive.TYPES.ENTER_ROOM_SUCCESS: // 加入直播间成功 break; case TWebLive.TYPES.ALREADY_IN_ROOM: // 已经在直播间内 break; default: break; }}).catch((imError) => { console.warn('im | enterRoom | failed', imError); // 加入直播间失败的相关信息});</script>
为了进一步降低开发者的开发和人力成本，我们在 TWebLive SDK 的基础上，提供了同时适配 PC 和移动端浏览器的 Demo [6]，并开源到了 github 。开发者 fork&clone 项目到本地，稍作修改即可把 Demo 跑起来，或者集成到自己的项目部署上线。
同样，文末也为大家提供了在线 Demo [7] 和本地一分钟跑通的介绍文档 [8]，欢迎查阅和运行体验。
三、接入使用
接入前，需要在腾讯云实时音视频 TRTC 控制台中创建一个实时音视频应用（此时会自动创建一个 SDKAppID 相同的 IM 应用），取得 SDKAPPID。
然后点击应用管理 -> 功能配置 -> 开启自动旁路推流。开启旁路推流功能后，TRTC 房间里的每一路画面都配备一路对应的播放地址（如果不需要 CDN 直播观看，可略过开启旁路推流的步骤）。
接着在腾讯云直播控制台配置播放域名并完成 CNAME 配置，详细操作指引请参见《CDN 直播观看》[9]（如果不需要 CDN 直播观看，此步骤可略过）。
最后通过 npm 下载 TWebLive：
npm i tweblive --save
四、平台支持
Web 推流和 Web 低延时观看用到了 WebRTC 技术。目前主要在桌面版 Chrome 浏览器、桌面版 Safari 浏览器以及移动版 Safari 浏览器上有较为完整的支持，其他平台（例如 Android 平台的浏览器）支持情况均比较差，具体如下：
在移动端推荐使用小程序解决方案 [10]，微信和手机 QQ 小程序均已支持，都是由各平台的 Native 技术实现，音视频性能更好，且针对主流手机品牌进行了定向适配。
如果你的应用场景主要为教育场景，那么教师端推荐使用稳定性更好的 Electron 解决方案 [11]，支持大小双路画面，更灵活的屏幕分享方案以及更强大的弱网络恢复能力。
五、注意事项
第一，实时音视频应用与 IM 应用的 SDKAppID 一致，才能复用账号与鉴权。
第二，IM 应用针对文本消息，提供基础版本的安全打击能力，如果希望使用自定义不雅词功能，可以点击升级或在购买页购买安全打击-专业版服务。
第三，本地计算 UserSig 的方式仅用于本地开发调试，请勿直接发布到线上，一旦 SECRETKEY 泄露，攻击者就可以盗用你的腾讯云流量。正确的 UserSig 签发方式是将 UserSig 的计算代码集成到你的服务端，并提供面向 App 的接口，在需要 UserSig 时由你的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见服务端生成 UserSig [12]。
第四，由于 H.264 版权限制，华为系统的 Chrome 浏览器和以 Chrome WebView 为内核的浏览器均不支持 TRTC 桌面浏览器端 SDK 的正常运行。
六、结语
本文为大家介绍了腾讯云新的 Web 直播互动组件——TWebLive，通过接入此 SDK，开发者可以快速轻便地实现Web 推流、Web 低延时观看、CDN 观看以及实时聊天互动（或弹幕）等功能，能够很好替换传统的 flash 推流方案。
同时，提供有详细的接入方案和在线 Demo，欢迎大家前来体验。目前 TWebLive 在主流的桌面浏览器上也有较好的支持，在移动端支持小程序的解决方案。
后续，我们也会继续深化研究，提供更全方位的直播功能服务，比如：推流端支持屏幕分享、图片消息互动、观众端多线路观看（WebRTC 低延时线路和 CDN 线路）、主播观众连麦互动等功能，敬请大家期待。
参考资料：
[1] TWebLive详情：
https://www.npmjs.com/package/tweblive
[2] 腾讯云实时音视频 TRTC：
https://cloud.tencent.com/product/trtc/
[3]腾讯云即时通信 TIM：
https://cloud.tencent.com/product/im
[4] 腾讯云超级播放器 TCPlayer：
https://cloud.tencent.com/document/product/454/7503
[5] TWebLive 接口手册：
https://webim-1252463788.cos.ap-shanghai.myqcloud.com/tweblive/TWebLive.html
[6] 开源 Demo:
https://github.com/tencentyun/TWebLive
[7] 在线 Demo 地址：
https://webim-1252463788.cos.ap-shanghai.myqcloud.com/tweblivedemo/index.html
[8] 本地一分钟跑通体验文档说明：
https://cloud.tencent.com/document/product/269/47959
[9] 实现 CDN 直播观看：
https://cloud.tencent.com/document/product/647/16826
[10] 小程序解决方案：
https://cloud.tencent.com/document/product/647/17018
[11] Electron 解决方案：
https://cloud.tencent.com/document/product/647/38549
[12] 服务端生成 UserSig：
https://cloud.tencent.com/document/product/269/32688#GeneratingdynamicUserSig
文章推荐