功能升级丨腾讯云Web直播互动组件火热上线！

「已注销」

于 2020-06-16 10:51:50 发布

阅读量1.6k

点赞数

本文链接：https://blog.youkuaiyun.com/Yuntongxin/article/details/106782246

版权

腾讯云推出Web直播互动组件，基于TcPlayer和TIM，提供简单易用的API和免费开源Demo，适用于Web直播场景，如会议、活动、课程等。该组件帮助开发者节省开发时间，集成直播视频播放、聊天互动等功能，确保高并发、高可靠的即时通信，降低开发和运维成本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

没有华丽的直播间，没有忙前忙后递产品的助理，在家找个角落，打开手机就开始直播；有的一边直播一边带娃，有的拿着手机摇摇晃晃还保持不了手机的稳定，一切都与大家熟悉的网红主播不太一样，让网友们直呼太接地气。

我们也正式进入了全民直播时代。

直播带货带来的绝佳效果，让各行各业纷纷进驻各大直播平台。

上个月，我们发布了教你如何快速集成小程序直播电商IM组件，获得了广大用户的热切关注。今天，腾讯云即时通信IM（下文简称IM）又出新招了！

过去我们常常在微信小程序内集成直播+弹幕能力，这个操作过分依赖小程序，用户觉得限制太多。用户就是上帝，上帝的需求我们怎能不满足呢？

铛铛铛铛——

腾讯云技术又升级了——推出任意平台快速使用的Web组件。请注意，是任意平台！也就是说不再局限于小程序里才能开发了，我们可以使用Web组件做H5直播了，是不是很方便很开心呢！
接下来，

为您带来Web直播互动组件操作全过程！

腾讯云Web直播互动组件

腾讯云Web直播互动组件，以腾讯云Web超级播放器-TcPlayer和腾讯云即时通信IM-TIM为基础，封装了简单易用的API，提供了免费开源的Demo，方便开发者快速接入和使用。适用于 Web直播互动场景，如大型会议、活动、课程、讲座等的在线直播，带货直播的微信H5分享等，效果如下：
PC端展示

移动端展示

IM Web组件开发背景

前端开发同学经常遇到这样的需求：

●项目周期赶，甲方爸爸急着要，或者公司要做推广活动，只给了不到一周的时间。

（╮(╯▽╰)╭，业界常态）
在这里插入图片描述
●用微信扫一扫、或者手机浏览器扫一扫就能观看直播，并且能跟其他看直播的人聊天互动，也能点赞、送礼。

（画外音就是赶紧给我做一个虎牙或者斗鱼的那种直播效果出来！）

●在Windows或Mac浏览器上也需要上述的功能。

（小孩子才做选择，产品经理：我全都要！）
在这里插入图片描述
开发同学接到这样的需求，一般会怎么实现呢？对Web直播有一定了解的会选择flv.js或者hls.js 来播放直播源。聊天互动用websocket快速写一个简单的消息收发Demo。然而写原型Demo不难，但接下来会遇到到很多挑战：

1、服务器该怎么布点才能让用户就近接入？遇到蜂拥请求，服务器扛不住并发压力怎么办？

2、直播活动人数往往较多，全国各地的用户访问，消息通道建立不起来怎么办？

3、短时间内自研一个IM Server，如何保证服务高可用？

4、消息量大，IM Server推送消息遇到性能问题，导致消息堆积，或者丢消息怎么办？

5、用户在直播间骂人，发表涉黄、涉政言论怎么办？

6、如果用第三方 IM 服务，选择谁好呢？万一有坑，反馈问题没人理，导致项目延期怎么办？

7、第三方 IM 服务往往有一大堆概念和 API，需要花时间熟悉和使用，留给开发业务逻辑的时间太仓促。

由此可见，在短时间内如果自己从头开始组装开发，往往是加班加点，赶鸭子上架，开发同学身心俱疲，直播效果也不一定好。现在直播这么火热，难道就没有一个开源的，组合了直播和聊天互动功能的项目，让我稍微改一改就能用起来么？

腾讯云终端研发中心Web团队，开发了腾讯云 Web超级播放器和即时通信IM SDK（还有其它 SDK 暂且按下不表←_←），面对这样常见的需求和痛点，于是以这两个可靠优秀的产品为基础，开发了开源的腾讯云Web直播互动组件，供开发者使用和参考。

对开发者和项目来说有什么好处？

1、为开发者节省大量重复造轮子的时间，可专注于开发业务逻辑

使用腾讯云Web直播互动组件，开发者仅需在下载好SDK后简单填入几个参数，即可快速把一个包含直播视频播放、聊天互动、点赞送礼等常见功能的项目跑起来。如下所示：
在这里插入图片描述

2、为开发者节省大量定位和解决问题的时间

直播场景观众数量多，消息量大时，自研服务容易出现性能瓶颈，如服务器扛不住并发压力导致请求成功率低、消息堆积、丢消息、消息收发延时严重等难以排查和难以解决的问题。腾讯云Web直播互动组件的消息服务集成的是腾讯云即时通信IM，以QQ多年的IM能力为基础，保证高并发、高可靠的即时通信能力，且有完善的统计和日志排障系统，遇到问题可快速定位解决。

腾讯云Web直播互动组件支持设置消息优先级，如主播发言、观众送礼物等可设置为高优先级，点赞等不重要的消息可设置为低优先级，IM系统会保证高优先级消息的下发（直播间消息量超过40条/秒时IM后台会限频）。

3、为项目节省大量的开发和运维成本

腾讯云Web直播互动组件是完全免费开源的，其集成的腾讯云Web超级播放器是免费的，仅腾讯云即时通信IM是增值服务。如果您的项目处于起步阶段，可以使用免费版的IM服务。项目发展好，用户量大时，可以购买IM旗舰版，价格非常美丽，全行业最低。

●腾讯云即时通信IM的直播大群（AVChatRoom），群成员人数无上限。

（这个厉害了，让我叉会腰）

●腾讯云IM服务器的节点覆盖面广，可保证用户就近接入，且不用担心服务器扩容问题。

●支持针对涉黄、涉政以及不雅词的安全打击，满足安全监管需求。

●腾讯云IM服务团队响应即时，为您的项目保驾护航。

作为开发者我们需要做什么？

1、提供直播源，推荐用腾讯实时音视频 TRTC的旁路推流

为了同时兼容PC和移动端，开发者必须同时提供flv和hls两种格式的直播源，在支持MSE的浏览器上，直播组件会优先选择使用flv直播源，延时更低，直播效果更好；在不支持MSE的浏览器上，直播组件会使用hls直播源，延时稍大，但在移动端适应性好。

如果在Windows或Mac平台推直播流，强烈建议使用TRTC Electron，旁路推流可同时生成flv和hls流，跟腾讯云即时通信IM完美结合，稳定可靠，服务周到，价格美丽。

跑通Electron Demo这篇文档会帮您快速实现直播和旁路推流，效果如下：
在这里插入图片描述
2、注册腾讯云即时通信 IM 应用

在即时通信IM控制台注册应用，获得SDKAppID；
生成 UserSig；
用REST API向IM系统导入账号；
在即时通信IM控制台或者用REST API创建直播大群（AVChatRoom）。

3、在腾讯云 Web 直播互动组件的基础上，开发相关业务逻辑

常见问题Q&A

1、进入直播间，其他人看到的提示信息和聊天消息都用的是 userID，能否支持用昵称（nick）展示？

如果进直播间想要展示昵称，需要先设置昵称（已设置过可忽略此步骤），设置成功后再加入:
在这里插入图片描述
2、组件什么时候会选择播放 flv 流？flv 和 hls 直播源的播放时延分别是多少？

在支持 MSE 的浏览器上，如 PC Chromium 内核浏览器（360极速浏览器，Chrome浏览器等），或者 TBS 模式下(Android 的微信、QQ 浏览器)，组件会优先选择播放 flv 流。播放时延对比：
在这里插入图片描述
腾讯云即时通信IM推出的Web直播互动组件支持多个平台快速搭建使用，从根本上解决了直播搭建难的问题。配合模块化的管理，搭建直播项目就可以得到有质的效果提升。