×

微信小程序:实时音视频播放

作者:andy0012019.03.26来源:Web前端之家浏览:25298评论:0
关键词:小程序原生

实时音视频播放。该组件是原生组件,使用时请注意相关限制。

暂只针对国内主体如下类目的小程序开放,需要先通过类目审核,再在小程序管理后台,「开发」-「接口设置」中自助开通该组件权限。

一级类目/主体类型二级类目小程序内容场景
社交直播涉及娱乐性质,如明星直播、生活趣事直播、宠物直播等。选择该类目后首次提交代码审核,需经当地互联网主管机关审核确认,预计审核时长7天左右
教育在线视频课程网课、在线培训、讲座等教育类直播
医疗互联网医院,公立医院问诊、大型健康讲座等直播
金融银行、信托、基金、证券/期货、证券、期货投资咨询、保险、征信业务、新三板信息服务平台、股票信息服务平台(港股/美股)、消费金融金融产品视频客服理赔、金融产品推广直播等
汽车汽车预售服务汽车预售、推广直播
政府主体帐号/政府相关工作推广直播、领导讲话直播等
工具视频客服不涉及以上几类内容的一对一视频客服服务,如企业售后一对一视频服务等
属性名类型默认值说明最低版本
srcString
音视频地址。目前仅支持 flv, rtmp 格式
modeStringlivelive(直播),RTC(实时通话,该模式时延更低)
autoplayBooleanfalse自动播放
mutedBooleanfalse是否静音
orientationStringvertical画面方向,可选值有 vertical,horizontal
object-fitStringcontain填充模式,可选值有 contain,fillCrop
background-muteBooleanfalse进入后台时是否静音(已废弃,默认退台静音)
min-cacheNumber1最小缓冲区,单位s(RTC 模式推荐 0.2s)
max-cacheNumber3最大缓冲区,单位s(RTC 模式推荐 0.8s)
sound-modeStringspeaker声音输出方式,有效值为 speaker(扬声器)、ear(听筒)1.9.90
auto-pause-if-navigateBooleantrue当跳转到其它小程序页面时,是否自动暂停本页面的实时音视频播放2.5.0
auto-pause-if-open-nativeBooleantrue当跳转到其它微信原生页面时,是否自动暂停本页面的实时音视频播放2.5.0
bindstatechangeEventHandle
播放状态变化事件,detail = {code}
bindfullscreenchangeEventHandle
全屏变化事件,detail = {direction, fullScreen}
bindnetstatusEventHandle
网络状态通知,detail = {info}1.9.0

注意:

<live-player> 默认宽度300px、高度225px,可通过wxss设置宽高。

开发者工具上暂不支持。

相关api:wx.createLivePlayerContext

状态码

代码说明
2001已经连接服务器
2002已经连接服务器,开始拉流
2003网络接收到首个视频数据包(IDR)
2004视频播放开始
2005视频播放进度
2006视频播放结束
2007视频播放Loading
2008解码器启动
2009视频分辨率改变
-2301网络断连,且经多次重连抢救无效,更多重试请自行重启播放
-2302获取加速拉流地址失败
2101当前视频帧解码失败
2102当前音频帧解码失败
2103网络断连, 已启动自动重连
2104网络来包不稳:可能是下行带宽不足,或由于主播端出流不均匀
2105当前视频播放出现卡顿
2106硬解启动失败,采用软解
2107当前视频帧不连续,可能丢帧
2108当前流硬解第一个I帧失败,SDK自动切软解
3001RTMP -DNS解析失败
3002RTMP服务器连接失败
3003RTMP服务器握手失败
3005RTMP 读/写失败

网络状态数据

键名说明
videoBitrate当前视频编/码器输出的比特率,单位 kbps
audioBitrate当前音频编/码器输出的比特率,单位 kbps
videoFPS当前视频帧率
videoGOP当前视频 GOP,也就是每两个关键帧(I帧)间隔时长,单位 s
netSpeed当前的发送/接收速度
netJitter网络抖动情况,抖动越大,网络越不稳定
videoWidth视频画面的宽度
videoHeight视频画面的高度

示例代码:

<live-player
  src="https://domain/pull_stream"
  mode="RTC"
  autoplay
  bindstatechange="statechange"
  binderror="error"
  style="width: 300px; height: 225px;"/>
Page({
  statechange(e) {    console.log('live-player code:', e.detail.code)
  },
  error(e) {    console.error('live-player error:', e.detail.errMsg)
  }
})

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/html12-932-154921-0942.html

网友评论文明上网理性发言 已有0人参与

发表评论: