文档平台 移动直播 SDK 微信小程序 小程序音视频解读

小程序音视频解读

最近更新时间:2018-10-18 14:52:23

查看pdf

背景介绍

微信在 2017 下半年的版本中,开始集成移动直播 SDK 到小程序解决方案中,并通过 <live-pusher> 和 <live-player> 两个标签,封装 LiteAVSDK 的 TXLivePusher 和 TXLivePlayer 接口。

两个标签虽然简单,却可以实现绝大多数应用场景下的音视频功能,接下来我将结合一些典型场景为您逐一解读:

产品体验

功能项 小程序组件 PC端体验页面 依赖的云服务 功能描述
手机直播 <live-room> N/A 直播+云通讯 演示基于小程序的个人直播解决方案
PC 直播 <live-room> WebEXE 直播+云通讯 演示课堂直播和学生互动的相关功能(需要 PC 端配合)
双人通话 <rtc-room> WebEXE 直播+云通讯 演示双人视频通话功能,可用于在线客服
多人通话 <rtc-room> N/A 直播+云通讯 演示多人视频通话功能,可用于临时会议
WebRTC <webrtc-room> Chrome 实时音视频 演示小程序和 Chrome 浏览器的互通能力
RTMP推流 <live-pusher> N/A 直播 演示基础的 RTMP 推流功能
直播播放器 <live-player> N/A 直播 演示基于 RTMP 和 FLV 协议的直播播放功能

如何开通

  • step1 : 开通标签使用权限
    出于政策合规的考虑,微信暂时只允许如下表格中的类目使用 <live-pusher> 和 <live-player> 两个标签。
    符合类目要求的小程序,也需要在小程序管理后台的 “设置 - 接口设置” 中自助开通两个标签的权限。
    主类目 子类目
    【社交】 直播
    【教育】 在线教育
    【医疗】 互联网医院,公立医院
    【政务民生】 所有二级类目
    【金融】 基金、信托、保险、银行、证券/期货、非金融机构自营小额贷款、征信业务、消费金融
  • step2:开通腾讯云直播服务
    小程序音视频依赖腾讯云提供的直播(LVB)和云通讯(IM)两项基础服务,您可以点击链接免费开通,其中云通讯服务开通即可使用,直播服务由于涉黄涉政风险较大,需要腾讯云人工审核开通。

标准直播场景:在线培训

场景解读

在线培训是一个非常经典的在线直播场景,您只需要简单的将两个标签组合在一起即可,<live-pusher> 负责将本地画面和声音实时上传到腾讯云,<live-player> 则负责从腾讯云实时拉取视频流并进行播放。

腾讯云在这里的作用就是信号放大器,它负责将来自 <live-pusher> 的一路音视频进行放大,扩散到全国各地,让每一个 <live-player> 都能在离自己比较近的云服务器上拉取到实时且流畅的音视频流。由于原理简单、稳定可靠且支持几百万同时在线的高并发观看,所以从在线教育到体育赛事,从游戏直播到花椒映客,都是基于这种技术实现的。

该方案的平均延迟在 2s - 5s,可以通过 <live-player> 标签的 min-cache 和 max-cache 标签进行设置,数值越小,延迟越低,相应的卡顿率也就越高。

对接步骤

  • step1. 获取URL:参考 快速获取URL,或者了解如何自行 拼装URL

  • step2. 对接推流:使用 <live-pusher> 标签可以推流到 step1 中获得的 rtmp 推流地址 (域名一般为livepush.mycloud.com),并将 mode 设置为 HD。如果这一步失败,可以通过打开 <live-pusher> 中的 debug 功能查看具体问题,或者参考 DOC 排查问题原因。

  • step3. 对接播放:使用 <live-player> 标签可以播放 src 指定的 rtmp 或 http-flv 地址 (http-flv是更为推荐的解决方案),并将 mode 设置为 live ,其中 min-cache 和 max-cache 可以分别设置为 1 和 3。

超低延时场景:远程遥控

场景解读

在安防监控的场景里,家用 IPCamera 一般都带有云台旋转的功能,也就是摄像头的指向会跟随远程的遥控进行转动,如果画面延时比较大,那么观看端按下操控按钮到看到画面运动所需要等待的时间就会比较长,这样用户体验就会特别不好。

再比如 2017 非常流行的在线夹娃娃场景,如果远程玩家视频画面的延时非常高,那么远程操控娃娃机就变得不太可能,没有谁能真正抓到娃娃。

要达到这么低的要求,普通的在线直播技术就不再适用了,我们需要使用超低延迟模式,也就是 <live-player> 的 RTC 模式,同时,播放 url 要拼接防盗链签名,以便使用腾讯云的超低延时链路。

对接步骤

  • step1. 获取 URL:参考 快速获取URL,或者了解如何自行 拼装URL

  • step2. 对接推流:在设备侧可以使用 Android 版本的 LiteAVSDK(TXLivePusher) 进行推流,如果您需要其它解决方案,也可以通过工单或者 400 电话联系我们。

  • step3. 低时延 URL:给普通的 rtmp:// 播放 URL 添加上防盗链签名,就可以将普通的 URL 成低时延 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
  • step4. RTC 播放:使用 <live-player> 标签,使用 step3 中的低延时 URL 作为其 src 属性参数,并将其 mode 设置为 RTC,此时 <live-player> 会开启 延时控制 功能 和 UDP加速 功能。

双向视频通话:视频客服

场景解读

金融开户场景里,银行或者证券公司对开户申请人的身份核实尤为重要,而且要做双录。而开户申请人往往是缘于优惠活动或者广告吸引才有开户意向,这个时候如果要申请人必须安装 APP 才能走通整个流程显然非常困难,小程序可以很好地解决 APP 安装问题,同时,小程序的正规性也比较容易被用户接受,因此非常适合用于在线金融开户。

同样,保险理赔也是一个比较典型的应用场景,通过小程序的快速安装和启动,可以减少保险公司定损员的出勤率,对于节约运营成本非常有用。

对接步骤(基于原生标签对接)

  • step1. 准备:首先请阅读 超低延时场景 方案,了解低延时 URL 的获取方式和 RTC 模式的工作原理。

  • step2. 客服:推一路视频流到腾讯云,在收到 1002 的 onPushEvent 之后,可以将对应的低延时播放地址 urlA 交给 B。由于是客服端,继续使用小程序已经不再合适,您可以选择我们的 IEC++ 或者 C# 解决方案。

  • step3. 用户:创建一个 <live-player> 标签,mode 设置为 RTC,src 指定为 urlA。

  • step4. 用户:创建一个 <live-pusher> 标签,mode 设置为 RTC,并在收到 1002 的 onPushEvent 之后,将对应的低延时播放地址 urlB 交给 A。

  • step5. 客服:播放低延时模式的 urlB。由于是客服端,继续使用小程序已经不再合适,您可以选择我们的 IEC++ 或者 C# 解决方案。

对接步骤(基于 <rtc-room> 实现)

如果您觉得基于原生 <live-pusher> 和 <live-player> 实现的对接方案比较复杂,也可以考虑基于 <rtc-room> 标签进行对接。

  • step1:开通:腾讯云直播(LVB)和云通讯(IM)两项基础服务。

  • step2:小程序端:使用自定义组件 <rtc-room> 实现视频通话,因为是 1v1 会话模式,所以 <rtc-room> 的 template 可以设定为 1v1,当然您也可以自定义 UI 布局。

  • step3:Windows:我们同步地提供了多平台的 API ,供您依据自己的项目需要进行选择。

多人视频通话:远程庭审(RTCRoom)

场景解读

“让信息多跑路,让群众少跑腿”,是中国实行“互联网 + 政务服务”改革的重要目标。远程庭审就是一个典型的应用场景。

小程序的多人音视频非常适合搭建远程庭审方案:一方面,小程序的安装和启动都没有什么心理障碍,这让不方便直接出庭的当事人或者证人更容易参与到庭审案件中。另一方面,小程序本身的正规性也让使用者比较放心。

对接步骤

  • step1:开通腾讯云直播(LVB)和云通讯(IM)两项基础服务。

  • step2:使用自定义组件 <rtc-room> 实现视频通话,template 可以选择我们预定义的几种模式,当然您也可以自定义 UI 布局。

  • step3:Windows:我们同步地提供了多平台的 API ,供您依据自己的项目需要进行选择。

混合场景:直播+连麦(LiveRoom)

场景解读

直播场景,既要支持上万人的并发观看,又要支持观众跟主播可以发起连麦互动,那就需要混合场景解决方案了。混合场景就是在标准直播场景的基础上加入连麦通话能力。

常见的应用场景是互动课堂,互动课堂中的小班课程,一堂课也就几个人,用 <rtc-room> 就可以解决问题了;但如果是大班课,那就需要使用 <live-room> 混合方案了。

腾讯云的 <live-room> 混合方案还有外带的 PPT 白板组件支持,该组件基于小程序的 Canvas 控件构建而成。

对接步骤

  • step1:开通:腾讯云直播(LVB)和云通讯(IM)两项基础服务。

  • step2:小程序端:使用自定义组件 <live-room> 实现直播 + 连麦功能,template 可以选择我们预定义的几种模式,当然您也可以自定义 UI 布局。

  • step3:Windows:我们同步地提供了多平台的 API ,供您依据自己的项目需要进行选择。

录制指引

腾讯云支持小程序音视频解决方案的全程服务端录制,您可以按如下步骤开启云端录制功能。在不开启录制的情况下,腾讯视频云的各个服务器节点只负责中转音视频数据,并不对数据进行其他处理。

  • step1: 开通 腾讯云点播服务。

  • step2:进入直播控制台(小程序音视频流媒体是基于直播服务构建的),在【接入管理>>接入配置>>直播录制】中,开启录制功能。(注意:这里说的录制费用是按并发收费的,不是每一路都收费)

  • step3:在点播的视频管理界面中,您可以看到这些录制的文件,您也可以通过点播服务的 REST API 获取到这些文件。