【愚公系列】2022年04月 微信小程序-实时音视频播放

2022-04-07 08:18:42 浏览数 (1)

文章目录

  • 前言
  • 一、实时音视频播放
    • 1.js代码
    • 2.wxml代码
    • 3.效果

前言

小程序的实时音视频播放需要先去微信开发者平台开通权限,「开发」-「接口设置」中自助开通该组件权限。

类目属性如下:

一级类目/主体类型

二级类目

小程序内容场景

社交

直播

涉及娱乐性质,如明星直播、生活趣事直播、宠物直播等。选择该类目后首次提交代码审核,需经当地互联网主管机关审核确认,预计审核时长 7 天左右

教育

在线视频课程

网课、在线培训、讲座等教育类直播

医疗

互联网医院,公立医疗机构,私立医疗机构

问诊、大型健康讲座等直播

金融

银行、信托、公募基金、私募基金、证券/期货、证券、期货投资咨询、保险、征信业务、新三板信息服务平台、股票信息服务平台(港股/美股)、消费金融

金融产品视频客服理赔、金融产品推广直播等

汽车

汽车预售服务

汽车预售、推广直播

政府主体帐号

/

政府相关工作推广直播、领导讲话直播等

IT科技

多方通信;音视频设备

为多方提供电话会议/视频会议等服务;智能家居场景下控制摄像头

组件属性如下:

属性

类型

默认值

必填

说明

最低版本

src

string

音视频地址。目前仅支持 flv, rtmp 格式

1.7.0

mode

string

live

模式

1.7.0

autoplay

boolean

false

自动播放

1.7.0

muted

boolean

false

是否静音

1.7.0

orientation

string

vertical

画面方向

1.7.0

object-fit

string

contain

填充模式,可选值有 contain,fillCrop

1.7.0

background-mute

boolean

false

进入后台时是否静音(已废弃,默认退后台静音)

1.7.0

min-cache

number

1

最小缓冲区,单位s(RTC 模式推荐 0.2s)

1.7.0

max-cache

number

3

最大缓冲区,单位s(RTC 模式推荐 0.8s)。缓冲区用来抵抗网络波动,缓冲数据越多,网络抗性越好,但时延越大。

1.7.0

sound-mode

string

speaker

声音输出方式

1.9.90

auto-pause-if-navigate

boolean

true

当跳转到本小程序的其他页面时,是否自动暂停本页面的实时音视频播放

2.5.0

auto-pause-if-open-native

boolean

true

当跳转到其它微信原生页面时,是否自动暂停本页面的实时音视频播放

2.5.0

picture-in-picture-mode

string/Array

设置小窗模式: push, pop,空字符串或通过数组形式设置多种模式(如: [“push”, “pop”])

2.10.3

referrer-policy

string

no-referrer

格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html,其中 {appid} 为小程序的 appid,{version} 为小程序的版本号,版本号为 0 表示为开发版、体验版以及审核版本,版本号为 devtools 表示为开发者工具,其余为正式版本;

2.13.0

bindstatechange

eventhandle

播放状态变化事件,detail = {code}

1.7.0

bindfullscreenchange

eventhandle

全屏变化事件,detail = {direction, fullScreen}

1.7.0

bindnetstatus

eventhandle

网络状态通知,detail = {info}

1.9.0

bindaudiovolumenotify

eventhandler

播放音量大小通知,detail = {}

2.10.0

bindenterpictureinpicture

eventhandler

播放器进入小窗

2.11.0

bindleavepictureinpicture

eventhandler

播放器退出小窗

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 时触发小窗

referrer-policy子属性:

合法值

说明

origin

发送完整的referrer

no-referrer

不发送

referrer-policy子属性:

合法值

说明

origin

发送完整的referrer

no-referrer

不发送

一、实时音视频播放

1.js代码

代码语言:javascript复制
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')
      }
    })
  }
})

2.wxml代码

代码语言:javascript复制
<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>

3.效果

注意https://domain/pull_stream为推拉流地址。

0 人点赞