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

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

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

上个月,我们发布了教你如何快速集成小程序直播电商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直播互动组件支持多个平台快速搭建使用,从根本上解决了直播搭建难的问题。配合模块化的管理,搭建直播项目就可以得到有质的效果提升。

本文原文链接:https://mp.weixin.qq.com/s/0GaLovnUnitMNWBy25rO9g

更多关于腾讯云即时通信IM的信息,请关注微信公众号——“腾讯云通信”

扫描二维码也可以关注哦!

功能升级丨腾讯云Web直播互动组件火热上线!相关推荐

  1. 腾讯云Web直播组件助力“直播+”场景

    导语:直播作为营销和转化的有力工具,已经逐渐被大众所认可,直播场景常态化.规范化.细分之下,直播也分为众多的的赛道,企业直播.电商带货.知识传播纷纷拥抱直播渠道.开箱即用.稳定流畅.支持定制成为了企业 ...

  2. 微信小程序直播自己的服务器,使用微信小程序和腾讯云实现直播功能

    不久前微信小程序开放了直播接口,正好阿北的服务器在腾讯云上,就用腾讯云的直播服务实战了一下,以下为实战过程,希望对你有用. 我是通过obs实现推流,然后用小程序进行直播播放,也就是PC->小程序 ...

  3. 腾讯云php小程序,使用微信小程序和腾讯云实现直播功能

    不久前微信小程序开放了直播接口,正好阿北的服务器在腾讯云上,就用腾讯云的直播服务实战了一下,以下为实战过程,希望对你有用. 我是通过obs实现推流,然后用小程序进行直播播放,也就是PC->小程序 ...

  4. 微信小程序直播服务器是用的腾讯的,使用微信小程序和腾讯云实现直播功能

    不久前微信小程序开放了直播接口,正好阿北的服务器在腾讯云上,就用腾讯云的直播服务实战了一下,以下为实战过程,希望对你有用. 我是通过obs实现推流,然后用小程序进行直播播放,也就是PC->小程序 ...

  5. 小程序 腾讯云 php,使用微信小程序和腾讯云实现直播功能

    不久前微信小程序开放了直播接口,正好阿北的服务器在腾讯云上,就用腾讯云的直播服务实战了一下,以下为实战过程,希望对你有用. 我是通过obs实现推流,然后用小程序进行直播播放,也就是PC->小程序 ...

  6. 腾讯云快直播——超低延迟直播技术方案及应用

    正文字数:4361  阅读时长:7分钟 随着直播业务的发展,在线教育,连麦直播.赛事直播等高实时性直播场景的出现,用户对于直播流畅度.低延迟等性能的要求愈加严苛.腾讯云直播技术高级工程师陈华成 从5G ...

  7. 腾讯云Web应用防火墙有什么用?Web应用防火墙是防御原理介绍

    腾讯云Web应用防火墙有什么用?Web应用防火墙是防御原理介绍 腾讯云 Web 应用防火墙是一款专业为网站及 Web 服务的一站式智能防护平台,帮助企业组织应对网站及 Web 业务面临的 Bot 爬虫 ...

  8. 腾讯云Web应用防火墙有什么用?Web应用防火墙是怎么防御网络攻击的?

    腾讯云 Web 应用防火墙是一款专业为网站及 Web 服务的一站式智能防护平台,帮助企业组织应对网站及 Web 业务面临的 Bot 爬虫恶意爬取.漏洞暴露.Web 入侵及数据泄露.网站被篡改或植入.域 ...

  9. 什么是腾讯云web应用防火墙?有哪些优势以及适用于什么场景?

    腾讯云 Web 应用防火墙(Web Application Firewall,WAF)是一款基于 AI 的一站式 Web 业务运营风险防护方案.沉淀了腾讯云安全大数据检测能力和 19 年自营业务 We ...

最新文章

  1. phpstrom函数注释模板_PHPstorm 函数时间注释的修改
  2. 上海市经济信息化委关于征集本市2020年拟新建互联网数据中心项目的通知
  3. 体验Lambda表达式【理解】
  4. 阻止中文输入法输入拼音的时候触发input事件
  5. 【转载】正则表达式30分钟入门教程
  6. Android 系统(115)---死机问题分析
  7. VKTM进程消耗大量CPU的问题
  8. 超标量处理器设计 姚永斌 第1章 超标量处理器概览 摘录
  9. Linux7(CentOs7.5)安装ssh、和修改ssh端口号
  10. idea 设置类的注释模板
  11. 芯邦主控芯片CBM2199E量产工具设置
  12. 流体动力润滑(轴承油膜承载机理)
  13. dp hdu5653 xiaoxin and his watermelon candy
  14. ofd格式转pdf,所需代码和jar包--亲测可用
  15. 量子竞赛下一步:在应用中体现量子优势
  16. vue element Pagination分页组件二次封装
  17. 海康、大华IP摄像机RTSP地址及格式详解
  18. Unity动态构建Mesh来绘制任意多边形(雷达图效果)
  19. 怎样用 16.7 个小时做 40 小时的工作
  20. 思考的方法--张五常(1984 年 1 月 3 日)

热门文章

  1. Dapr Workflow构建块的.NET Demo
  2. 谷歌小恐龙修改无敌刷分
  3. Kafka(Go)教程(九)---如何避免消息丢失?
  4. 拉伯证券|芯片半导体迎来“行业底部出清”,大资金进场迹象明显
  5. python和django的目录遍历漏洞(任意文件读取)
  6. 如何激活Xmind8 update8为xmind pro版本
  7. php apk包信息,php提取apk包信息
  8. 优思学院|什么是AQL抽样方案?
  9. 石子合并 动态规划(直线型)
  10. 【武汉万象奥科】瑞芯微RK3568芯片