太阳集团5493conlogo

  • 微博
  • 微信
  • QQ好友
  • QQ空间
  • 百度
详细内容

小程序•小故事(9)——音视频组件-杭州微信小程序开发为你转播

2017年下半年,微信6.5.21版本支持在线音视频功能。开发者可以通过两个音视频组件  和  实现实时地在线直播、视频通话、语音通话等功能。


下面我们将详细介绍一下音视频组件在线直播和视频通话这两个应用场景。



在线直播


01

在线直播的应用场景有哪些?


游戏直播、远程授课、以及企业内部的培训分享等场景中,都可能会用到在线直播功能,直播的应用场景可以遍及各行各业。


比如微信电竞是一款游戏直播产品,以小程序为产品呈现方式。


比如在医疗行业,专家医师往往需要全国各地飞进行学术交流和培训,出差本身耽误了医生大量时间,在线远程授课能大大减少这里的时间耗用。


小程序中的    两个组件 ,都有一个叫做live (  中对应 mode 属性为 SD, HD, FHD)的模式,专门为在线直播而设计,通过小程序的音视频接口的live 模式,可以实现上述应用场景。


02

在线直播的内部原理是什么?


主播端使用  ,它在小程序的内部是一个推流引擎,它负责对手机摄像头和麦克风的数据进行采集和编码,并通过 url 参数指定的 rtmp 推流地址上传到云端。


云端的作用类似信号放大器,它负责将来自主播端的一路音视频流数据进行放大,将数据实时并且无差异的负责并扩散到全国各地,从而解决主播和观众端之间距离太远(比如,跨地区和跨运营商)的问题。


观众端使用  进行播放,它在小程序的内部是一个在线播放器,负责从云端实时拉取音视频数据并进行解码和渲染。由于云端的放大效应,每一个观众都能在离自己比较近的云服务器上拉取到实时且流畅的音视频流。

2.jpg



03

我怎么用小程序实现在线直播?


- step1:开通一个云直播服务(比如 腾讯云 ),或者自己搭建一个rtmp服务器(例如 nginx-rtmp 服务)。


- step2:生成推流 url ,推流地址一般以 “rtmp://” 打头,比如rtmp://8888.livepush.myqcloud.com/live/8888_test就是一个典型 rtmp 推流 Url。


- step3:为你的小程序增加一个  标签,并将 url 参数指定为你在 step2 中生成的推流 url。

同时,   mode 参数可以指定为 HD 或者 FHD,这是在线直播场景中比较推荐的画质。

同时,你还可以通过   beauty whiteness 等参数设定美颜和美白等级。


- step4:生成推流 url 和播放地址,推流一般都是 rtmp:// 打头的 url,而播放地址则有两种选择,分别是 “rtmp://” 开头的 rtmp 播放协议,“http://” 打头和“.flv”结尾的的 http-flv 播放协议,推荐使用后者,因为这种播放地址各个云厂商都优化的比较好。


- step5:为你的小程序增加一个  标签 ,并将 src 参数指定为你在 step4 中生成的播放 url。同时,  mode 参数请指定为 live,orientation   object-fit 属性可以用于调整画面布局,min-cache  max-cache 则可以用于控制观众跟主播之间的延时大小,推荐的设置是 min-cache = 2, max-cache = 5。




常见问题


01

时延太高是怎么回事?


在线直播的延时跟播放协议和播放器参数有很大的关系,  的 min-cache 和 max-cache 用于控制播放器端的最小时延和最大时延。其中,这里所说的“最小”和“最大”是根据观众端当时的网络情况而定的,如果网络情况比较好,那么播放器的时延就会趋向于 min-cache,而如果网络情况比较差,那么播放器的时延就会趋向于 max-cache。


另外,rtmp 协议 和 http-flv 协议的播放地址延时一般比较低,而 hls(m3u8)协议的延时则相对较高。



02

主播网络不好怎么办?


在一场直播过程中,如果观众端的网络不好,那么观看体验仅仅影响到当前观众;如果主播的网络不好,那么所有观众的观看体验都会很糟糕。因此主播的上行网络质量很重要,如果主播的上行网络质量不理想,比如时好时坏,或者上行小水管,不足以支持基本的直播需求,有两种办法可以解决问题:


 一种办法是设置  的 min-bitrate 参数,比如 400kbps, 这样一来,当主播网络不给力的时候, 就会给主播的编码器发送降低画质的命令,通过降低编码器吐出的数据量来给主播的网络减负。但这种办法产生的副作用也非常明显,就是主播的画质会变差。


另一种方法则是借助  的 NET_BUSY 通知进行 UI 上的告警提示,  在主播上行网速不给力时会通过 onPushEvent 通知抛出 PUSH_WARNING_NET_BUSY(1101) 事件,这个时候你可以提示主播通过靠近路由器或者切换 4G 的方法来改善当前的网络质量。


03

HLS(m3u8)协议为什么播放不了?


微信小程序在最早期的版本中就集成了 标签,该标签即可播放 HLS(m3u8)协议的播放地址,但是此种播放协议的时延一般都在 20 秒以上,所以如果对时延要求较高,则推荐使用 标签播放 http-flv 协议的直播地址。



视频通话


01

小程序 + 视频通话有什么优势?


我们可以发现目前保险行业会通过现场定损的方式处理车险理赔,这种方式需要派定损员驱车前往事发地点进行损伤判定,每次的出车成本非常高。


如果要采用远程电话解决,保险公司无法简单通过语音沟通确认损伤程度,而且照片采集很难规避定车骗保的可能,所以**实时的视频通话**可以解决这种问题。


小程序中    两个组件 ,都有一个叫做 RTC 的模式,通过这种模式,可以在小程序实现实时视频通话。


02

视频通话的内部原理是什么?


    两个组件的 RTC 模式,主要是实现端到端能够以很低的时延传输音视频数据。


这样一来,视频通话的双方 A 和 B 就可以各自拉通一路方向相反的音视频链路,从而实现 A 和 B 之间的双向低延时的音视频数据传输。与此同时,RTC 模式还会开启内置的 AEC (回声抑制),避免通话的双方会因为本地麦克风对播放器的声音进行二次采集而引起的回声问题。


03

我怎么用小程序实现视频通话?


- step1:开通一个云直播服务(比如 腾讯云 ),或者自己搭建一个rtmp服务器(例如 nginx-rtmp 服务)。


- step2:生成两对 rtmp 推拉流 url :一对是用于 A 端推流的 push_url_a 和 用于播放 A 端视频的 play_url_a;另一对是用于 B 端推流的 push_url_b 和 用于播放 B 端视频的 play_url_b;


- step3:A端添加一个  标签,指定 mode 为 RTC,并将 url 输定设定为 push_url_a。


- step4:A端添加一个  标签,指定 mode 为 RTC,并将 src 输定设定为 play_url_b。


- step5:B端添加一个  标签,指定 mode 为 RTC,并将 url 输定设定为 push_url_b。


- step6:B端添加一个  标签,指定 mode 为 RTC,并将 src 输定设定为 play_url_a。



常见问题


01

通话时延太高了怎么办?


小程序的 RTC 模式解决了双向或者多人实时音视频通话在终端所需要的各项技术组件,但是通话线路本身可能也会引入很高的延时,所以要确保视频通话的 A 和 B 双方所使用的 rtmp 线路要有很低的时延。


如果是自己搭建rtmp服务器(例如 nginx-rtmp 服务),请检查 nginx-rtmp 的服务端参数设置,确保不要在服务器端引入太多音视频数据缓存。


如果是使用腾讯云的超低延时线路,那么要注意给 RTC 模式下的 传递带防盗链签名的播放 url。


对比项目

示例

时延

普通直播URL

rtmp://3891.liveplay.myqcloud.com/live/3891_test_clock_for_rtmpacc

>2s

超低延时 URL

rtmp://3891.liveplay.myqcloud.com/live/3891_test_clock_for_rtmpacc?bizid=bizid&txTime=5FD4431C&txSerect=20e6d865f462dff61ada209d53c71cf9

< 500ms


02

感觉画面很卡应该如何处理?


小程序的 RTC 模式主要用于视频通话,由于这类场景以交流为重,所以小程序会有限保证声音的流畅,相应的,视频数据的发送会被放在第二优先级上。因此,如果网络有波动,小程序会舍弃尚未发送出去的视频数据,优先保障音频数据的发送。


所以如果在 RTC 模式下,建议不要给   设置太高的画质,也就是不要将 min-bitrate 和 max-bitrate 设置的太大,一般而言,推荐 min-bitrate 设置为 300kbps, max-bitrate 设置为 800kbps,即可满足常规视频通话的需求。

- END -

1.jpg

这是作者的赞赏码,如果你觉得这个故事,让你们有所收获,欢迎赞赏给作者。


第八期回顾:小程序•小故事(8)——自定义组件

第七期回顾:小程序•小故事(7)——小程序音频能力介绍

第六期回顾:小程序•小故事(6)——微信登录能力优化

第五期回顾:小程序•小故事(5)——小程序插件

第四期回顾:小程序•小故事(4)——获取用户信息

第三期回顾:小程序•小故事(3)——更新机制

第二期回顾:小程序•小故事(2)——代码片段

第一期回顾:小程序•小故事(1)——分包加载


如果大家有想了解的小程序相关能力的故事,欢迎在评论区留言,我们后续会考虑将这些能力背后的故事分期分享给大家。

太阳集团2138手机版
更多
  • Q3财报:有「新」有「增」-杭州网络公司

    Q3财报:有「新」有「增」-杭州网络公司

    腾讯2024年第三季度财报显示,期内:微信及WeChat的合并月活跃账户数13.82亿。财报还提到:视频号得益于广告主对视频号、小程序及微信搜一搜广告库存的强劲

  • 微信小店助手APP来啦,方便得很!-杭州

    微信小店助手APP来啦,方便得很!-杭州

    一个好消息!微信小店助手APP已正式上架各大应用市场,安卓/iOS都可!商家经营更方便啦~核心功能速览——1、小店的管理,移动端都能搞定支持在移动端进行商品、交

  • 港澳小程序交易翻倍,有商家月入八位数!-

    港澳小程序交易翻倍,有商家月入八位数!-

    10月24日,微信公开课·港澳专场在香港举办。聚焦于 “双向奔赴:新生态、新机遇” 这一主题,微信团队以及深耕港澳小程序的标杆商家、服务商齐聚,一起探讨了大湾区

  • 4个月销售额翻10倍,这家小众户外品牌怎

    4个月销售额翻10倍,这家小众户外品牌怎

    微信小店 Lafuma户外热这个小众品牌如何在视频号破圈?首场达播试水,销售额突破300万平均客单价1800元常态化直播带货,4个月实现月销售额翻10倍数据来自

  • 微信小店11.11好物节即将启动!三大带

    微信小店11.11好物节即将启动!三大带

    微信小店 11.11 好物节活动激励计划低门槛 高激励主播作为带货主播报名活动,并选择“购物”类目开播,累计成交数据满足对应目标门槛,即可在活动结束后获得对应电

  • 这个爬山搭子,十几万黄山游客都在用-杭州

    这个爬山搭子,十几万黄山游客都在用-杭州

    国庆假期就要来了,有人想去爬黄山吗?琐事缠身的你可能还没来得及做攻略,又或者没订到合适的酒店……没关系!现在,@黄山旅游官方平台 通过企业微信、小程序、视频号等

  • 小程序,玩法上“新”!-杭州抖音短视频直

    小程序,玩法上“新”!-杭州抖音短视频直

    这波上“新”,是新加坡的“新” !9月23日,微信公开课·新加坡专场启幕,微信团队奔赴狮城,携手新加坡旅游局以及当地多家标杆企业,一起探讨小程序在跨境生态下的新

  • 官宣:微信小店新商家激励政策-杭州微信小

    官宣:微信小店新商家激励政策-杭州微信小

    五大激励政策助力新商家成长微信小店新商家激励政策血降门槛0保证金试运营减成本前百万自营交易额的技术服务费率减至1%刘促增长新商家成长流量激励加福利开通运费险享「

  • 如何做出NB的视频号?-杭州网络公司为你

    如何做出NB的视频号?-杭州网络公司为你

    @闪电制片厂 @国翠儿 @时差岛 @王可乐说这些NB的视频号你刷到过吗?最近,他们和视频号一起在NB的城市宁波聚会,现场分享了创作秘籍,视频号官方和大家交流了短

  • 又贵又火,之禾视频号年销3000万-杭州

    又贵又火,之禾视频号年销3000万-杭州

    3000多的牛仔裤,5000一件的亚麻衬衫,上万一条的桑蚕丝连衣裙……来自上海的时装品牌之禾因为高定价而出圈,并且业绩还在持续攀升。曾有外媒报道称,2022年,

太阳集团5493con是一家专门致力于为企业提供全方位网站建设服务。年轻的我们带着梦想和对网络的热情走在互联网道路的前沿,一路走来,我们的努力和真诚得到了更多客户的认可。在未来的发在未来的发...

浙公网安备:33010602011153

seo seo