最佳实践丨基于 TRTC 和 IM 实现 Web 群直播

腾讯即时通信IM

发布于 2021-04-19 09:43:58

3.4K0

发布于 2021-04-19 09:43:58

导语

本文主要通过介绍网页版群直播基础功能和实现流程来告诉大家 TWebLive 能用来做什么，如何把 TWebLive集成到项目中。

Web 群直播和微信群直播功能类似，不需要下载专业的直播 App 就可以直播。在网页即时通信工具中集成群直播功能后，群组内的任何成员都可以发起直播，多个成员可以同时发起直播，其他成员通过群组内开播消息进入自己喜欢的直播间。直播间内不仅可以发送普通文本消息、还可以通过自定义消息实现弹幕、礼物、抽奖等多种互动消息。针对这样一款群直播产品功能，可以通过集成 Web 直播互动 SDK—TWebLive[1]来实现。

一、网页版群直播效果

二、网页版群直播实现框架

三、网页版群直播基础功能介绍

1、在腾讯云即时通信 IM Demo[2]中可以通过2种方式体验群直播功能。

（1）通过全局群直播入口进入，此时不会向任何群组发送群直播开播/停播消息通知。

（2）在 Demo 中创建 Public、Work、Meeting 任意一个群组类型（不支持在 AVChatRoom 中开启群直播），打开会话窗口，点击群直播按钮开启群直播。

2、进入群直播界面后可以输入直播名称，底部操作区设置有开始直播/结束直播，摄像头和麦克风开关按钮。

3、开播时会给群组内所有成员推送开播通知，群组成员可以通过点击消息卡片进入直播间观看直播。

4、直播过程中主播端可以查看主播个人信息、直播在人数、直播时长，主播可以发送普通文本消息进行互动。

5、观众进入直播间可发送普通文本和礼物消息，暂停观看不影响与主播进行消息互动。

6、主播结束直播时会给群组内推送结束直播通知，直播结束后再点击卡片会提示直播已结束，不能再进入直播间。

7、网页版群直播与云通信 IM App 群直播互通体验。

四、实现群直播的核心技术—TWebLive

网页版群直播功能的实现依赖 TWebLive SDK。TWebLive 集成了腾讯云实时音视频 TRTC[3]、腾讯云即时通信 IM[4] 、腾讯云超级播放器 TcPlayer[5]，覆盖了 Web 直播互动场景常见的功能，封装了简单易用的API[6]。

TWebLive 主要提供了三大核心功能：主播端推流，观众端观看，直播互动。主播端推流基于实时音视频 TRTC 实现，观众端 CDN 观看基于TcPlayer 实现，直播互动基于即时通信 IM 实现。

五、如何利用TWebLive实现群直播功能

1、接入 TWebLive

在 TRTC 应用或者 IM 应用中均可接入 TWebLive。这里主要介绍在 IM 应用中接入TWeblive 的流程。接入前，需要在腾讯云即时通信 IM 控制台创建的 IM 应用中开通腾讯云实时音视频服务,开通音视频服务后，还需要在腾讯云直播控制台配置直播域名且域名需要配置 HTTPs。

在项目中通过 npm 安装最新版本的 tim-js-SDK、trtc-js-SDK、tweblive。如果项目已经集成有 tim-js-SDK 或 trtc-js-SDK，直接将其升级到最新版本即可。

在项目中引入 tweblive

如果需要通过 script 标签外链的方式引入，需要将 tim-js.js、trtc.js、tweblive.js 拷贝至项目中，按顺序引入。

2、群直播主播端主要功能实现如下

3、群直播观众端主要功能实现如下

4、群直播互动功能实现

由于腾讯云即时通信 IM Demo 中已经集成了 IM 应用，直播互动部分的功能通过 IM SDK API[7]实现。

代码片段是在 Vue 框架下实现，代码中使用到的变量维护在 Vuex 和组件Data 属性中。可以复制以上代码片段到 Vue 项目中，即可快速搭建一个网页版群直播功能。

六、TWebLive SDK体积优化

TWebLive SDK 1.0.0打包时将 IM SDK、TRTC SDK、TcPlayer 集成输出，导致输出的包体积很大(接近1M)，如果在已有 IM 或者 TRTC 应用中接入 TWebLive 时，存在重复引用的问题。为了提升接入体验，已发布 TWebLive 1.1.0版本，主要是在1.0.0的基础上优化 SDK 的打包方式，把 IM SDK 和 TRTC SDK 作为外部依赖打包，SDK 体积减少了78%。接入 TWeblive 时手动安装 IM SDK 和 TRTC SDK 即可。

七、注意事项

第一、接入 TWebLive 时，需要安装最新版本的tim-js-SDK、trtc-js-SDK，避免引起版本兼容性问题。

第二、Pusher 和 Player 中使用到的 SDKAppID 必须与IM应用的 SDKAppID 保持一致。

第三、由于 H.264 版权限制，华为系统的 Chrome 浏览器和以 Chrome WebView 为内核的浏览器均不支持 TRTC 桌面浏览器端 SDK 的正常运行。

参考资料：

[1] TWebLive详情：

https://www.npmjs.com/package/tweblive

[2] 腾讯云即时通信IM在线 Demo 地址：

https://web.sdk.qcloud.com/im/demo/latest/index.html

[3] 腾讯云实时音视频 TRTC：

https://cloud.tencent.com/product/trtc/

[4] 腾讯云即时通信 IM：