2017年下半年,微信6.5.21版本支持在线音视频功能。开发者可以通过两个音视频组件
下面我们将详细介绍一下音视频组件在线直播和视频通话这两个应用场景。
在线直播
01
在线直播的应用场景有哪些?
在游戏直播、远程授课、以及企业内部的培训分享等场景中,都可能会用到在线直播功能,直播的应用场景可以遍及各行各业。
比如微信电竞是一款游戏直播产品,以小程序为产品呈现方式。
比如在医疗行业,专家医师往往需要全国各地飞进行学术交流和培训,出差本身耽误了医生大量时间,在线远程授课能大大减少这里的时间耗用。
小程序中的
02
在线直播的内部原理是什么?
主播端使用
云端的作用类似信号放大器,它负责将来自主播端的一路音视频流数据进行放大,将数据实时并且无差异的负责并扩散到全国各地,从而解决主播和观众端之间距离太远(比如,跨地区和跨运营商)的问题。
观众端使用
03
我怎么用小程序实现在线直播?
- step1:开通一个云直播服务(比如 腾讯云:https://cloud.tencent.com/document/product/454/12517 ),或者自己搭建一个rtmp服务器(例如 nginx-rtmp:https://github.com/arut/nginx-rtmp-module 服务)。
- step2:生成推流 url ,推流地址一般以 “rtmp://” 打头,比如rtmp://8888.livepush.myqcloud.com/live/8888_test就是一个典型 rtmp 推流 Url。
- step3:为你的小程序增加一个
同时,
同时,你还可以通过
- step4:生成推流 url 和播放地址,推流一般都是 rtmp:// 打头的 url,而播放地址则有两种选择,分别是 “rtmp://” 开头的 rtmp 播放协议,“http://” 打头和“.flv”结尾的的 http-flv 播放协议,推荐使用后者,因为这种播放地址各个云厂商都优化的比较好。
- step5:为你的小程序增加一个
常见问题
01
时延太高是怎么回事?
在线直播的延时跟播放协议和播放器参数有很大的关系,
另外,rtmp 协议 和 http-flv 协议的播放地址延时一般比较低,而 hls(m3u8)协议的延时则相对较高。
02
主播网络不好怎么办?
在一场直播过程中,如果观众端的网络不好,那么观看体验仅仅影响到当前观众;如果主播的网络不好,那么所有观众的观看体验都会很糟糕。因此主播的上行网络质量很重要,如果主播的上行网络质量不理想,比如时好时坏,或者上行小水管,不足以支持基本的直播需求,有两种办法可以解决问题:
一种办法是设置
另一种方法则是借助
03
HLS(m3u8)协议为什么播放不了?
微信小程序在最早期的版本中就集成了 标签,该标签即可播放 HLS(m3u8)协议的播放地址,但是此种播放协议的时延一般都在 20 秒以上,所以如果对时延要求较高,则推荐使用
视频通话
01
小程序 + 视频通话有什么优势?
我们可以发现目前保险行业会通过现场定损的方式处理车险理赔,这种方式需要派定损员驱车前往事发地点进行损伤判定,每次的出车成本非常高。
如果要采用远程电话解决,保险公司无法简单通过语音沟通确认损伤程度,而且照片采集很难规避定车骗保的可能,所以**实时的视频通话**可以解决这种问题。
02
视频通话的内部原理是什么?
这样一来,视频通话的双方 A 和 B 就可以各自拉通一路方向相反的音视频链路,从而实现 A 和 B 之间的双向低延时的音视频数据传输。与此同时,RTC 模式还会开启内置的 AEC (回声抑制),避免通话的双方会因为本地麦克风对播放器的声音进行二次采集而引起的回声问题。
03
我怎么用小程序实现视频通话?
- step1:开通一个云直播服务(比如 腾讯云 :https://cloud.tencent.com/document/product/454/12517),或者自己搭建一个rtmp服务器(例如 nginx-rtmp:https://github.com/arut/nginx-rtmp-module 服务)。
- step2:生成两对 rtmp 推拉流 url :一对是用于 A 端推流的 push_url_a 和 用于播放 A 端视频的 play_url_a;另一对是用于 B 端推流的 push_url_b 和 用于播放 B 端视频的 play_url_b;
常见问题
01
通话时延太高了怎么办?
小程序的 RTC 模式解决了双向或者多人实时音视频通话在终端所需要的各项技术组件,但是通话线路本身可能也会引入很高的延时,所以要确保视频通话的 A 和 B 双方所使用的 rtmp 线路要有很低的时延。
如果是自己搭建rtmp服务器(例如 nginx-rtmp:https://github.com/arut/nginx-rtmp-module 服务),请检查 nginx-rtmp 的服务端参数设置,确保不要在服务器端引入太多音视频数据缓存。
如果是使用腾讯云的超低延时线路,那么要注意给 RTC 模式下的
对比项目
示例
时延
普通直播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 模式下,建议不要给
这篇 typo 有点多:
的mode参数可以指定为 HD 或者 FHD
的mode参数请指定为 live
的 min-cache 和 max-cache 用于控制播放器端的最小时延和最大时延
这几处"的"的前面的主语呢?
腾讯云的H5实时音视频,webRTC我们接入了,运行了一个月后就放弃了。音频和视频通话质量差,丢包严重。不知道小程序有没有这种问题@官方
如图,有文字丢失啦,希望补全
live-player 标签用rtmp偶尔黑屏 这个问题好多开发者都有提出 不知道什么时候会解决
请问这个功能是不是需要资质才能申请开通?谢谢
同问,这个问题才是关键
可以先改类目先用,提交审核时可能会要资质。
同问,要用直播组件的话小程序需要微信认证吗?服务类目选的在线教育,但是无法开通直播的接口,是不是需要企业微信之类呢?
直播live-pusher 可以设置贴纸吗?我看有文档但是很简单,没有参数,没有例子,这块有人清楚吗?
企业主体已微信验证,现在想 做一个可音频和 视频 通话的小程序,用到这个组件,是一定要上传相关资质吗
live-player每次拉流都会先从2004状态到-2302加速失败状态,之后 才会从2001到2002...到2003正常播放。期间会有5S左右的黑屏无画面状态
关于wx.getBackgroundAudioPlayerState返回参数类型不唯一的情况.....
// duration 选定音频的长度(单位:s),只有在当前有音乐播放时返回
// currentPosition 选定音频的播放位置(单位:s),只有在当前有音乐播放时返回
// status 播放状态(2:没有音乐在播放,1:播放中,0:暂停中)
// downloadPercent 音频的下载进度(整数,80 代表 80%),只有在当前有音乐播放时返回
// dataUrl 歌曲数据链接,只有在当前有音乐播放时返回
wx.getBackgroundAudioPlayerState({
success: function (res) {
console.log("当前播放详系统细信息:");
console.log(res);
let status = res.status;
let currentPosition = res.currentPosition;
let duration = res.duration;
let date = new Date(currentPosition * 1000);
console.log("获取歌词之前播放状态:" + status + "歌词音频时间长度" + duration)
getlyric(that.data.audio.id, (obj, lyricArr) => {
console.log("当前歌词时间戳:" + currentPosition + "赋值之前判断当前歌词内容" + obj[currentPosition])
if (status == 1 && typeof(obj[currentPosition]) != "undefined") {
that.setData({
rotate: true,
isplaying: true,
time: formatSeconds(currentPosition),
alltime: formatSeconds(duration),
value: currentPosition,
max: duration,
//obj[currentPosition] currentPosition是键
lrc: obj[currentPosition]
})
console.log("当前歌词内容" + that.data.lrc + "当前歌词内容赋值之前" + obj[currentPosition])
}
})
}
})
};
开发环境中:
currentPosition等参数都是整数型,如1,2,3,4,
真机测试中:
currentPosition等参数都是浮点数型,如1.002,2.89
纠错:txSecret 写成txSerect