Use the uni-live-pusher and uni-live-player components to develop the mini program live broadcast function

There is no API that directly provides the live broadcast function of the mini program in the Uniapp development documentation. You need to implement it by calling a third-party SDK or encapsulating the relevant API. Here are some components and tools that may be useful:

1. uni-live-pusher and uni-live-player components: These two components can realize the live streaming and player functions of mini programs, and can be used in H5, App, WeChat mini programs and other terminals.

2. Tencent Cloud live broadcast service interface: Tencent Cloud provides a rich live broadcast service interface, including streaming, playback, transcoding, etc., which can be called through REST API. You need to purchase the corresponding live broadcast service before you can use it.

3. Alibaba Cloud live broadcast service interface: Alibaba Cloud also provides a similar live broadcast service interface, which can be used to implement the mini program live broadcast function. You also need to purchase the corresponding services before you can use them.

4. Qiniu Cloud live broadcast service interface: Qiniu Cloud also provides a complete set of live broadcast services and related interfaces, which can realize live broadcast push, pull, transcoding, stream interruption and reconnection functions. You also need to purchase the corresponding services before you can use them.

Next, we will use the uni-live-pusher and uni-live-player components to develop a simple code example of the live broadcast function of the mini program:

uni-live-pusherTo develop a live broadcast mini program using the and components in UniApp uni-live-player, you can follow the following steps:

• Create a live broadcast event in the background of the mini program, and obtain the push address and playback address of the live broadcast.

• In the page that needs to display the push video, use uni-live-pusherthe component, onLoadinitialize the pusher in the life cycle, and set the push address and other parameters, such as width, height, bit rate, etc.

<template>
  <view>
    <uni-live-pusher :url="pusherUrl" :width="width" :height="height" :bitrate="bitrate"
      :audio="audio" :debug="debug" ref="livePusher" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      pusherUrl: '', // 推流地址
      width: 480, // 视频宽度
      height: 640, // 视频高度
      bitrate: 600, // 视频码率
      audio: true, // 是否开启音频
      debug: false // 是否开启调试
    }
  },
  onLoad() {
    uni.setKeepScreenOn({
      keepScreenOn: true
    })
    this.initLivePusher()
  },
  methods: {
    initLivePusher() {
      const livePusher = this.$refs.livePusher
      livePusher && livePusher.stop && livePusher.stop()
      livePusher && livePusher.start && livePusher.start()
    }
  }
}
</script>

• In the page that needs to display the video playback, use uni-live-playerthe component, onLoadinitialize the player in the life cycle, and set the playback address and other parameters, such as width, height, zoom mode, etc.

<template>
  <view>
    <uni-live-player :url="playerUrl" :mode="mode" :orientation="orientation" :autoplay="autoplay"
      :muted="muted" :backgroundMute="backgroundMute" :minCache="minCache" :maxCache="maxCache"
      :soundMode="soundMode" :autoPauseIfNavigate="autoPauseIfNavigate" :autoPauseIfOpenNative="autoPauseIfOpenNative"
      :pictureInPictureMode="pictureInPictureMode" :disableScroll="disableScroll" :enableCamera="enableCamera"
      :renderMode="renderMode" :enableHWAcceleration="enableHWAcceleration" :autoShowLoading="autoShowLoading"
      :showMuteBtn="showMuteBtn" :showProgress="showProgress" :showCenterPlayBtn="showCenterPlayBtn"
      :enableProgressGesture="enableProgressGesture" :mute="mute" :backgroundMuteStopPlay="backgroundMuteStopPlay"
      :autoFullScreen="autoFullScreen" :pictureInPictureShowProgress="pictureInPictureShowProgress" ref="livePlayer" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      playerUrl: '', // 播放地址
      mode: 'live', // 缩放模式
      orientation: 'vertical', // 横竖屏方向
      autoplay: true, // 是否自动播放
      muted: false, // 是否静音
      backgroundMute: false, // 是否开启后台静音
      minCache: 1, // 最小缓存
      maxCache: 3, // 最大缓存
      soundMode: 'speaker', // 播放声音模式
      autoPauseIfNavigate: true, // 当跳转到其他页面时，是否自动暂停
      autoPauseIfOpenNative: true, // 当打开原生组件（如拍照）时，是否自动暂停
      pictureInPictureMode: 'push', // 小窗模式
      disableScroll: false, // 是否禁止滚动
      enableCamera: false, // 是否使用前置摄像头
      renderMode: 'adaptive', // 渲染模式
      enableHWAcceleration: true, // 是否开启硬件加速
      autoShowLoading: true, // 是否自动显示加载状态
      showMuteBtn: true, // 是否显示静音按钮
      showProgress: true, // 是否显示进度条
      showCenterPlayBtn: true, // 是否显示居中播放按钮
      enableProgressGesture: true, // 是否支持手势调节播放进度
      mute: false, // 是否静音
      backgroundMuteStopPlay: false, // 当开启后台静音时，是否停止播放
      autoFullScreen: false, // 是否自动全屏
      pictureInPictureShowProgress: true // 小窗是否显示进度条
    }
  },
  onLoad() {
    this.initLivePlayer()
  },
  methods: {
    initLivePlayer() {
      const livePlayer = this.$refs.livePlayer
      livePlayer && livePlayer.stop && livePlayer.stop()
      livePlayer && livePlayer.start && livePlayer.start()
    }
  }
}
</script>

• onUnloadStop streaming and playback during the life cycle .

onUnload() {
  const livePusher = this.$refs.livePusher
  livePusher && livePusher.stop && livePusher.stop()
  const livePlayer = this.$refs.livePlayer
  livePlayer && livePlayer.stop && livePlayer.stop()
}

Note that this is just a simple demo code. In actual development, more situations and exception handling need to be considered, and relevant regulations and privacy policy requirements must be followed to ensure the quality and user experience of push and pull streams.