太阳集团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手机版
更多
  • 2022 Q4 用户最喜爱的朋友圈广告-

    2022 Q4 用户最喜爱的朋友圈广告-

    基于用户的互动行为及广告效果数据指标,我们找出了2022年第四季度用户最喜爱的朋友圈广告TOP 10(排名不分先后),期待更多好创意与你相见。TOP朋友圈广告用

  • 生活特辑 Vol.14 ᅵ

    生活特辑 Vol.14 ᅵ

    Good Life生活广告榜吃喝玩乐品生活,发现身边新乐趣。快来看看本季最受欢迎的身边广告。今天“吃”什么?吃喝福利,任你选新的一年不如用味觉拉开序幕不知道吃什

  • 速速集合,新年红包封面领取攻略来了-杭州

    速速集合,新年红包封面领取攻略来了-杭州

    新年怎样发红包姿势最帅?当然是用上最炫的红包封面!今年,红包封面又又又升级啦,全新动态红包封面上线,祝福更“动”人心。微信广告将携手众多品牌派发多款精美别致的红

  • 视频号互选好内容|11月-杭州网络公司为

    视频号互选好内容|11月-杭州网络公司为

    精选11月优秀视频号互选案例,为创作者指引好内容的风向,洞悉好商单的秘诀。理想汽车× 所长林超通俗科普,干货满满科技自主的路上,理想汽车的答案是什么。所长观察敏

  • 微信创作者营销价值与营销策略白皮书发布-

    微信创作者营销价值与营销策略白皮书发布-

    腾讯广告互选平台始于内容致远商业一图读懂微信创作者营销方法论微信创作者四大特点长久创作,深耕原创内容长久创作87.2%公众号运营超过2年垂类丰富体育 媒体 财经

  • 精华笔记|2022 腾讯广告创作者营销峰

    精华笔记|2022 腾讯广告创作者营销峰

    12月22日,腾讯广告以直播形式举办首届创作者营销峰会(以下简称“峰会”)。无论对广告主 / 代理商,还是创作者 / MCN机构,今年的峰会可谓是“一场及时雨”

  • 烟花贺岁:朋友圈点赞互动广告上线-杭州微

    烟花贺岁:朋友圈点赞互动广告上线-杭州微

    新年有新喜,微信广告全新推出朋友圈点赞互动广告,让品牌和用户一起放烟花,迎新年。品牌领赞,首枚烟花惊喜绽放;用户跟赞,个性化品牌烟花跃然出框;双向互动中激发更强

  • 即刻预约|2022 腾讯广告创作者营销峰

    即刻预约|2022 腾讯广告创作者营销峰

    连接放大价值腾讯广告创作者营销峰会2022/12/22邀请函尊敬的嘉宾:在内容创作者的黄金时代,无数品牌借力优质内容开辟出了商业增长新路径。作为微信商业内容官方

  • 搞笑与搞钱,这些创作者都很认真-杭州网络

    搞笑与搞钱,这些创作者都很认真-杭州网络

    在微信视频号上有着许多视频创作者,他们因为热爱,而创作出非常多有趣的视频。然而每一个视频背后,创作者都要付出无数的心血和努力。当粉丝达到一定数量,也具备相对成熟

  • 朋友圈橱窗广告上线-杭州APP开发为你呈

    朋友圈橱窗广告上线-杭州APP开发为你呈

    微信广告上线朋友圈橱窗广告,满足广告主更丰富的素材展示诉求。广告支持配置一个主素材和三个副素材,组合形式突破原生形态,更易吸引用户停留点击。朋友圈橱窗广告示意橱

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

浙公网安备:33010602011153

seo seo