Utilisez les composants uni-live-pusher et uni-live-player pour développer la fonction de diffusion en direct du mini-programme

Il n'y a pas d'API fournissant directement la fonction de diffusion en direct du mini-programme dans la documentation de développement Uniapp. Vous devez l'implémenter en appelant un SDK tiers ou en encapsulant l'API correspondante. Voici quelques composants et outils qui peuvent être utiles :

1. Composants uni-live-pusher et uni-live-player : ces deux composants peuvent réaliser les fonctions de diffusion en direct et de lecture de mini-programmes, et peuvent être utilisés dans les mini-programmes H5, App, WeChat et d'autres terminaux.

2. Interface de service de diffusion en direct Tencent Cloud : Tencent Cloud fournit une interface de service de diffusion en direct riche, comprenant le streaming, la lecture, le transcodage, etc., qui peut être appelée via l'API REST. Vous devez acheter le service de diffusion en direct correspondant avant de pouvoir l'utiliser.

3. Interface du service de diffusion en direct Alibaba Cloud : Alibaba Cloud fournit également une interface de service de diffusion en direct similaire, qui peut être utilisée pour mettre en œuvre la fonction de diffusion en direct du mini-programme. Vous devez également acheter les services correspondants avant de pouvoir les utiliser.

4. Interface du service de diffusion en direct Qiniu Cloud : Qiniu Cloud fournit également un ensemble complet de services de diffusion en direct et d'interfaces associées, qui peuvent réaliser des fonctions de diffusion en direct push, pull, transcodage, interruption du flux et reconnexion. Vous devez également acheter les services correspondants avant de pouvoir les utiliser.

Ensuite, nous utiliserons les composants uni-live-pusher et uni-live-player pour développer un exemple de code simple de la fonction de diffusion en direct du mini programme :

uni-live-pusherPour développer un mini-programme de diffusion en direct à l'aide des composants et dans UniApp uni-live-player, vous pouvez suivre les étapes suivantes :

• Créez un événement de diffusion en direct en arrière-plan du mini-programme et obtenez l'adresse push et l'adresse de lecture de la diffusion en direct.

• Dans la page qui doit afficher la vidéo push, utilisez uni-live-pusherle composant, onLoadinitialisez le pusher dans le cycle de vie et définissez l'adresse push et d'autres paramètres, tels que la largeur, la hauteur, le débit binaire, 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>

• Dans la page qui doit afficher la lecture vidéo, utilisez uni-live-playerle composant, onLoadinitialisez le lecteur dans le cycle de vie et définissez l'adresse de lecture et d'autres paramètres, tels que la largeur, la hauteur, le mode de zoom, 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>

• onUnloadArrêtez le streaming et la lecture pendant le cycle de vie .

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

Notez qu’il ne s’agit que d’un simple code de démonstration. Dans le développement réel, davantage de situations et de gestion des exceptions doivent être prises en compte, et les réglementations pertinentes et les exigences en matière de politique de confidentialité doivent être respectées pour garantir la qualité et l'expérience utilisateur des flux push et pull.