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

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

前言

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


类目属性如下:

image.png


image.png

组件属性如下:

image.png

mode子属性:

image.png

orientation子属性:

image.png

object-fit子属性:

image.png

sound-mode子属性:

image.png

picture-in-picture-mode子属性:

image.png

referrer-policy子属性:

image.png

referrer-policy子属性:

image.png

一、实时音视频播放

1.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')
      }
    })
  }
})

2.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>

3.效果

image.png

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


相关文章
|
6月前
|
移动开发 监控 小程序
mPaaS常见问题之音视频通话微信小程序通话界面录制为画中画模式如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
100 0
|
小程序 API
微信小程序中音频播放
微信小程序中音频播放
302 0
|
小程序
UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
1500 0
|
小程序
小程序 video 组件播放本地视频(黑屏无法播放,报错:MEDIA_ERR_SRC_NOT_SUPPORTED)
小程序 video 组件播放本地视频(黑屏无法播放,报错:MEDIA_ERR_SRC_NOT_SUPPORTED)
612 0
|
小程序
微信小程序wx.createInnerAudioContext播放play报错errMsg: “operateAudio:fail jsapi has no permission, event=ope
微信小程序wx.createInnerAudioContext播放play报错errMsg: “operateAudio:fail jsapi has no permission, event=ope
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的电影播放平台附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的电影播放平台附带文章和源代码部署视频讲解等
31 0
|
6月前
|
小程序 JavaScript 前端开发
微信小程序的音频视屏播放
微信小程序的音频视屏播放
110 0
|
6月前
|
小程序
微信小程序音频后台播放功能
微信小程序音频后台播放功能
577 0
|
小程序 API
小程序背景音乐及音频播放demo(copy直接使用~)
小程序背景音乐及音频播放demo(copy直接使用~)
273 0
小程序背景音乐及音频播放demo(copy直接使用~)
uniapp 微信语音播放功能(整理)
uniapp 微信语音播放功能(整理)

热门文章

最新文章