微信小程序 live-player 实时音视频播放 组件

完整微信小程序(Java后端) 技术贴目录清单页面(必看)

实时音视频播放(v2.9.1 起支持同层渲染)。相关api:wx.createLivePlayerContext

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

一级类目/主体类型二级类目小程序内容场景
社交直播涉及娱乐性质,如明星直播、生活趣事直播、宠物直播等。选择该类目后首次提交代码审核,需经当地互联网主管机关审核确认,预计审核时长 7 天左右
教育在线视频课程网课、在线培训、讲座等教育类直播
医疗互联网医院,公立医疗机构,私立医疗机构问诊、大型健康讲座等直播
金融银行、信托、公募基金、私募基金、证券/期货、证券、期货投资咨询、保险、征信业务、新三板信息服务平台、股票信息服务平台(港股/美股)、消费金融金融产品视频客服理赔、金融产品推广直播等
汽车汽车预售服务汽车预售、推广直播
政府主体帐号/政府相关工作推广直播、领导讲话直播等
工具视频客服不涉及以上几类内容的一对一视频客服服务,如企业售后一对一视频服务等
IT科技多方通信;音视频设备为多方提供电话会议/视频会议等服务;智能家居场景下控制摄像头

在小程序插件中使用需要基础库版本 2.3.0 起。

属性类型默认值必填说明最低版本
srcstring音视频地址。目前仅支持 flv, rtmp 格式1.7.0
modestringlive模式1.7.0
autoplaybooleanfalse自动播放1.7.0
mutedbooleanfalse是否静音1.7.0
orientationstringvertical画面方向1.7.0
object-fitstringcontain填充模式,可选值有 containfillCrop1.7.0
background-mutebooleanfalse进入后台时是否静音(已废弃,默认退后台静音)1.7.0
min-cachenumber1最小缓冲区,单位s(RTC 模式推荐 0.2s)1.7.0
max-cachenumber3最大缓冲区,单位s(RTC 模式推荐 0.8s)。缓冲区用来抵抗网络波动,缓冲数据越多,网络抗性越好,但时延越大。1.7.0
sound-modestringspeaker声音输出方式1.9.90
auto-pause-if-navigatebooleantrue当跳转到本小程序的其他页面时,是否自动暂停本页面的实时音视频播放2.5.0
auto-pause-if-open-nativebooleantrue当跳转到其它微信原生页面时,是否自动暂停本页面的实时音视频播放2.5.0
picture-in-picture-modestring/Array设置小窗模式: push, pop,空字符串或通过数组形式设置多种模式(如: [“push”, “pop”])2.10.3
bindstatechangeeventhandle播放状态变化事件,detail = {code}1.7.0
bindfullscreenchangeeventhandle全屏变化事件,detail = {direction, fullScreen}1.7.0
bindnetstatuseventhandle网络状态通知,detail = {info}1.9.0
bindaudiovolumenotifyeventhandler播放音量大小通知,detail = {}2.10.0
bindenterpictureinpictureeventhandler播放器进入小窗2.11.0
bindleavepictureinpictureeventhandler播放器退出小窗2.11.0

mode 的合法值

说明最低版本
live直播
RTC实时通话,该模式时延更低

orientation 的合法值

说明最低版本
vertical竖直
horizontal水平

object-fit 的合法值

说明最低版本
contain图像长边填满屏幕,短边区域会被填充⿊⾊
fillCrop图像铺满屏幕,超出显示区域的部分将被截掉

sound-mode 的合法值

说明最低版本
speaker扬声器
ear听筒

picture-in-picture-mode 的合法值

说明最低版本
[]取消小窗
push路由 push 时触发小窗
pop路由 pop 时触发小窗

状态码

代码说明
2001已经连接服务器
2002已经连接 RTMP 服务器,开始拉流
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网络抖动情况,为 0 时表示没有任何抖动,值越大表明网络抖动越大,网络越不稳定
netQualityLevel网络质量:0:未定义 1:最好 2:好 3:一般 4:差 5:很差 6:不可用
videoWidth视频画面的宽度
videoHeight视频画面的高度
videoCache缓冲的视频总时长,单位毫秒
audioCache缓冲的音频总时长,单位毫秒
vDecCacheSize解码器中缓存的视频帧数 (Android 端硬解码时存在)
vSumCacheSize缓冲的总视频帧数,该数值越大,播放延迟越高
avPlayInterval音画同步错位时间(播放),单位 ms,此数值越小,音画同步越好
avRecvInterval音画同步错位时间(网络),单位 ms,此数值越小,音画同步越好
audioCacheThreshold音频缓冲时长阈值,缓冲超过该阈值后,播放器会开始调控延时

小窗特性说明

live-player 小窗支持以下三种触发模式(在组件上设置 picture-in-picture-mode 属性):

  1. push 模式,即从当前页跳转至下一页时出现小窗(页面栈push)
  2. pop 模式,即离开当前页面时触发(页面栈pop)
  3. 以上两种路由行为均触发小窗

此外,小窗还支持以下特性:

  • 小窗容器尺寸会根据原组件尺寸自动判断
  • 点击小窗,用户会被导航回小窗对应的播放器页面
  • 小窗出现后,用户可点击小窗右上角的关闭按钮或调用 context.exitPictureInPicture() 接口关闭小窗

当播放器进入小窗模式后,播放器所在页面处于 hide 状态(触发 onHide 生命周期),该页面不会被销毁。当小窗被关闭时,播放器所在页面会被 unload (触发 onUnload 生命周期)。

Bug & Tip

  1. tip:live-player 默认宽度300px、高度225px,可通过wxss设置宽高。
  2. tip:开发者工具上暂不支持。
  3. tip: 相关介绍和原理可参考此文章

示例代码

在开发者工具中预览效果

index.wxml

<view class="page-body">
  <view class="page-section tc">
    <live-player id="player" src="https://domain/pull_stream" mode="RTC" autoplay bindstatechange="statechange" binderror="error" />

    <view class="btn-area">
      <button bindtap="bindPlay" class="page-body-button" type="primary">播放</button>
      <button bindtap="bindPause" class="page-body-button" type="primary">暂停</button>
      <button bindtap="bindStop" class="page-body-button" type="primary">停止</button>
      <button bindtap="bindResume" class="page-body-button" type="primary">恢复</button>
      <button bindtap="bindMute" class="page-body-button" type="primary">静音</button>
    </view>
  </view>
</view>

index.js

Page({
  onReady(res) {
    this.ctx = wx.createLivePlayerContext('player')
  },
  statechange(e) {
    console.log('live-player code:', e.detail.code)
  },
  error(e) {
    console.error('live-player error:', e.detail.errMsg)
  },
  bindPlay() {
    this.ctx.play({
      success: res => {
        console.log('play success')
      },
      fail: res => {
        console.log('play fail')
      }
    })
  },
  bindPause() {
    this.ctx.pause({
      success: res => {
        console.log('pause success')
      },
      fail: res => {
        console.log('pause fail')
      }
    })
  },
  bindStop() {
    this.ctx.stop({
      success: res => {
        console.log('stop success')
      },
      fail: res => {
        console.log('stop fail')
      }
    })
  },
  bindResume() {
    this.ctx.resume({
      success: res => {
        console.log('resume success')
      },
      fail: res => {
        console.log('resume fail')
      }
    })
  },
  bindMute() {
    this.ctx.mute({
      success: res => {
        console.log('mute success')
      },
      fail: res => {
        console.log('mute fail')
      }
    })
  }
})

运行效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0FXspZ1Y-1623154176681)(image-20210608155547419.png)]

微信搜一搜【java1234】关注这个放荡不羁的程序员,关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

热门文章

暂无图片
编程学习 ·

那些年让我们目瞪口呆的bug

程序员一生与bug奋战&#xff0c;可谓是杀敌无数&#xff0c;见怪不怪了&#xff01;在某知识社交平台中&#xff0c;一个“有哪些让程序员目瞪口呆的bug”的话题引来了6700多万的阅读&#xff0c;可见程序员们对一个话题的敏感度有多高。 1、麻省理工“只能发500英里的邮件” …
暂无图片
编程学习 ·

redis的下载与安装

下载redis wget http://download.redis.io/releases/redis-5.0.0.tar.gz解压redis tar -zxvf redis-5.0.0.tar.gz编译 make安装 make install快链方便进入redis ln -s redis-5.0.0 redis
暂无图片
编程学习 ·

《大话数据结构》第三章学习笔记--线性表(一)

线性表的定义 线性表&#xff1a;零个或多个数据元素的有限序列。 线性表元素的个数n定义为线性表的长度。n为0时&#xff0c;为空表。 在比较复杂的线性表中&#xff0c;一个数据元素可以由若干个数据项组成。 线性表的存储结构 顺序存储结构 可以用C语言中的一维数组来…
暂无图片
编程学习 ·

对象的扩展

文章目录对象的扩展属性的简洁表示法属性名表达式方法的name属性属性的可枚举性和遍历可枚举性属性的遍历super关键字对象的扩展运算符解构赋值扩展运算符AggregateError错误对象对象的扩展 属性的简洁表示法 const foo bar; const baz {foo}; baz // {foo: "bar"…
暂无图片
编程学习 ·

让程序员最头疼的5种编程语言

世界上的编程语言&#xff0c;按照其应用领域&#xff0c;可以粗略地分成三类。 有的语言是多面手&#xff0c;在很多不同的领域都能派上用场。大家学过的编程语言很多都属于这一类&#xff0c;比如说 C&#xff0c;Java&#xff0c; Python。 有的语言专注于某一特定的领域&…
暂无图片
编程学习 ·

写论文注意事项

参考链接 给研究生修改了一篇论文后&#xff0c;该985博导几近崩溃…… 重点分析 摘要与结论几乎重合 这一条是我见过研究生论文中最常出现的事情&#xff0c;很多情况下&#xff0c;他们论文中摘要部分与结论部分重复率超过70%。对于摘要而言&#xff0c;首先要用一小句话引…
暂无图片
编程学习 ·

安卓 串口开发

上图&#xff1a; 上码&#xff1a; 在APP grable添加 // 串口 需要配合在项目build.gradle中的repositories添加 maven {url "https://jitpack.io" }implementation com.github.licheedev.Android-SerialPort-API:serialport:1.0.1implementation com.jakewhart…
暂无图片
编程学习 ·

2021-2027年中国铪市场调研与发展趋势分析报告

2021-2027年中国铪市场调研与发展趋势分析报告 本报告研究中国市场铪的生产、消费及进出口情况&#xff0c;重点关注在中国市场扮演重要角色的全球及本土铪生产商&#xff0c;呈现这些厂商在中国市场的铪销量、收入、价格、毛利率、市场份额等关键指标。此外&#xff0c;针对…
暂无图片
编程学习 ·

Aggressive cows题目翻译

描述&#xff1a; Farmer John has built a new long barn, with N (2 < N < 100,000) stalls.&#xff08;John农民已经新建了一个长畜棚带有N&#xff08;2<N<100000&#xff09;个牛棚&#xff09; The stalls are located along a straight line at positions…
暂无图片
编程学习 ·

剖析组建PMO的6个大坑︱PMO深度实践

随着事业环境因素的不断纷繁演进&#xff0c;项目时代正在悄悄来临。设立项目经理转岗、要求PMP等项目管理证书已是基操&#xff0c;越来越多的组织开始组建PMO团队&#xff0c;大有曾经公司纷纷建造中台的气质&#xff08;当然两者的本质并不相同&#xff0c;只是说明这个趋势…
暂无图片
编程学习 ·

Flowable入门系列文章118 - 进程实例 07

1、获取流程实例的变量 GET运行时/进程实例/ {processInstanceId} /变量/ {变量名} 表1.获取流程实例的变量 - URL参数 参数需要值描述processInstanceId是串将流程实例的id添加到变量中。变量名是串要获取的变量的名称。 表2.获取流程实例的变量 - 响应代码 响应码描述200指…
暂无图片
编程学习 ·

微信每天自动给女[男]朋友发早安和土味情话

微信通知&#xff0c;每天给女朋友发早安、情话、诗句、天气信息等~ 前言 之前逛GitHub的时候发现了一个自动签到的小工具&#xff0c;b站、掘金等都可以&#xff0c;我看了下源码发现也是很简洁&#xff0c;也尝试用了一下&#xff0c;配置也都很简单&#xff0c;主要是他有一…
暂无图片
编程学习 ·

C语言二分查找详解

二分查找是一种知名度很高的查找算法&#xff0c;在对有序数列进行查找时效率远高于传统的顺序查找。 下面这张动图对比了二者的效率差距。 二分查找的基本思想就是通过把目标数和当前数列的中间数进行比较&#xff0c;从而确定目标数是在中间数的左边还是右边&#xff0c;将查…
暂无图片
编程学习 ·

项目经理,你有什么优势吗?

大侠被一个问题问住了&#xff1a;你和别人比&#xff0c;你的优势是什么呢? 大侠听到这个问题后&#xff0c;脱口而出道&#xff1a;“项目管理能力和经验啊。” 听者抬头看了一下大侠&#xff0c;显然听者对大侠的这个回答不是很满意&#xff0c;但也没有继续追问。 大侠回家…
暂无图片
编程学习 ·

nginx的负载均衡和故障转移

#注&#xff1a;proxy_temp_path和proxy_cache_path指定的路径必须在同一分区 proxy_temp_path /data0/proxy_temp_dir; #设置Web缓存区名称为cache_one&#xff0c;内存缓存空间大小为200MB&#xff0c;1天没有被访问的内容自动清除&#xff0c;硬盘缓存空间大小为30GB。 pro…
暂无图片
编程学习 ·

业务逻辑漏洞

身份认证安全 绕过身份认证的几种方法 暴力破解 测试方法∶在没有验证码限制或者一次验证码可以多次使用的地方&#xff0c;可以分为以下几种情况︰ (1)爆破用户名。当输入的用户名不存在时&#xff0c;会显示请输入正确用户名&#xff0c;或者用户名不存在 (2)已知用户名。…