Comment afficher le GIF dans la diffusion en direct d'Uniapp

Ces dernières années, avec le développement de l'Internet mobile et de la technologie 5G, l'industrie de la diffusion en direct s'est également développée rapidement. Au cours du processus de diffusion en direct, la manière d'obtenir une lecture en streaming fluide et de haute qualité a toujours été une préoccupation pour les développeurs. Dans le développement front-end, il existe un framework multiplateforme appelé uniapp, qui peut prendre en charge plusieurs plates-formes en même temps, y compris la mise en œuvre de fonctions de diffusion en direct. Cet article explique comment utiliser Uniapp pour implémenter la diffusion en direct et afficher une animation GIF pendant le processus de diffusion.

1. Qu'est-ce qu'uniapp

Uniapp est un framework multiplateforme basé sur Vue et la technologie front-end. Il peut prendre en charge plusieurs plates-formes, notamment iOS, Android, Windows et d'autres plates-formes courantes. uniapp peut être utilisé pour développer diverses applications, notamment H5, des mini-programmes, des applications, etc. Grâce à un seul développement, les produits peuvent être déployés sur les principales plates-formes, ce qui améliore considérablement l'efficacité du développement.

2. Uniapp implémente la diffusion en direct

Dans uniapp, nous pouvons utiliser le composant vidéo pour implémenter la diffusion en direct. Le composant vidéo est un composant utilisé pour la lecture vidéo intégrée. Il peut lire à la fois des fichiers vidéo locaux et des fichiers vidéo réseau. Pour utiliser le composant vidéo pour mettre en œuvre la diffusion en direct, suivez simplement les étapes ci-dessous.

1. Présentation du composant vidéo

Dans la page uniapp, nous devons présenter le composant vidéo. Ajoutez le code suivant au modèle :

<video
  :src="url"
  :poster="img"
  @error="error"
  @loadedmetadata="loadedmetadata"
  @play="play"
  @timeupdate="timeupdate"
></video>

Parmi eux, :src est lié à l'adresse du flux vidéo, :poster est lié à l'image de couverture vidéo, @error surveille l'événement d'erreur de chargement vidéo, @loadedmetadata surveille l'analyse des métadonnées vidéo événement d'achèvement, @ play surveille l'événement de démarrage de la lecture vidéo et @timeupdate surveille l'événement de mise à jour de la progression de la lecture vidéo.

2. Réaliser la diffusion en direct

Dans uniapp, nous pouvons utiliser le SDK de diffusion en direct pour diffuser la diffusion en direct. Dans cet article, nous utilisons le SDK de diffusion en direct de Tencent Cloud. Pour utiliser le SDK Tencent Cloud Live Broadcast, nous devons d'abord activer le service de diffusion en direct sur la console Tencent Cloud et obtenir les adresses push et pull.

Dans le code js, nous pouvons utiliser la méthode uni.request pour demander l'adresse de streaming au serveur, puis lier l'adresse de streaming à l'attribut :src du composant vidéo pour implémenter la diffusion en direct. L'exemple de code est le suivant :

<script>
export default {
  data () {
    return {
      url: ''
    }
  },
  mounted () {
    this.getPlayUrl()
  },
  methods: {
    getPlayUrl () {
      uni.request({
        url: 'http://localhost:3000/getplayurl',
        method: 'POST',
        success: (res) => {
          if (res.data.code === 0) {
            this.url = res.data.data.playurl
          }
        }
      })
    }
  }
}
</script>

Parmi eux, la méthode getPlayUrl demande l'adresse de streaming au serveur. Une fois que le serveur a renvoyé les données d'adresse de streaming, il lie les données à l'attribut url du composant vidéo pour implémenter la diffusion en direct.

3. Afficher l'animation gif

Sur la base de la mise en œuvre du streaming en direct, comment afficher l'animation gif pendant le processus de streaming ? Dans uniapp, nous pouvons utiliser lottie-web pour afficher une animation gif.

lottie-web est une bibliothèque de rendu d'animations vectorielles basée sur le Web qui prend en charge les fichiers d'animation au format json exportés par AE (Adobe After Effects). Peut être utilisé dans une variété d’environnements Web et est hautement personnalisable.

Avant d'utiliser lottie-web, nous devons ajouter le code suivant à index.html pour introduire le fichier lottie.js et le fichier json d'animation.

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.js"></script>
<script src="animation.json"></script>

Ensuite dans le code js, on peut créer une balise canvas pour afficher l'animation lottie. L'exemple de code est le suivant :

<template>
  <canvas id="canvas"></canvas>
</template>

<script>
import animationData from '@/animation.json'

export default {
  data () {
    return {
      anim: null
    }
  },
  mounted() {
    this.initAnimation()
  },
  methods: {
    initAnimation() {
      this.anim = lottie.loadAnimation({
        container: document.querySelector('#canvas'),
        renderer: 'canvas',
        loop: true,
        autoplay: true,
        animationData: animationData
      })
    }
  }
}
</script>

Parmi eux, animationData est les données du fichier json d'animation importé. Grâce à la méthode loadAnimation, une balise canvas est créée et l'animation lottie est rendue à l'aide des données animationData.

En intégrant les étapes ci-dessus, nous pouvons implémenter la diffusion en direct dans uniapp et afficher une animation gif pendant le processus de diffusion. L'exemple de code est le suivant :

<template>
  <view>
    <!-- video组件，用于播放直播流 -->
    <video
      :src="url"
      :poster="img"
      @error="error"
      @loadedmetadata="loadedmetadata"
      @play="play"
      @timeupdate="timeupdate"
    ></video>
    <!-- canvas标签，用于显示gif动画 -->
    <canvas id="canvas"></canvas>
  </view>
</template>

<script>
import animationData from '@/animation.json'

export default {
  data () {
    return {
      anim: null,
      url: '',
      img: '',
    }
  },
  mounted () {
    this.getPlayUrl()
    this.initAnimation()
  },
  methods: {
    /* 获取播放地址 */
    getPlayUrl () {
      uni.request({
        url: 'http://localhost:3000/getplayurl',
        method: 'POST',
        success: (res) => {
          if (res.data.code === 0) {
            this.url = res.data.data.playurl
            this.img = res.data.data.cover
          }
        }
      })
    },
    /* 初始化动画 */
    initAnimation() {
      this.anim = lottie.loadAnimation({
        container: document.querySelector('#canvas'),
        renderer: 'canvas',
        loop: true,
        autoplay: true,
        animationData: animationData
      })
    },
    /* 监听video组件事件 */
    error(e) {
      console.log('播放错误', e)
    },
    loadedmetadata(e) {
      console.log('metadata解析完毕', e)
    },
    play(e) {
      console.log('开始播放', e)
    },
    timeupdate(e) {
      if (this.anim) {
        // 更新lottie动画
        this.anim.goToAndStop(Math.floor(e.target.currentTime * this.anim.frameRate), true)
      }
    }
  }
}
</script>

IV. Résumé

Grâce à l'introduction de cet article, nous avons appris comment implémenter la diffusion en direct dans uniapp et afficher une animation gif pendant le processus de diffusion. L'utilisation d'uniapp pour développer des applications de diffusion en direct peut rapidement réaliser un déploiement multiplateforme, ce qui améliore considérablement l'efficacité du développement. Dans le même temps, l'utilisation de lottie-web pour afficher des animations GIF peut non seulement offrir une meilleure expérience utilisateur, mais également augmenter l'attrait de l'application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!