So zeigen Sie GIF im Uniapp-Live-Streaming an

Mit der Entwicklung des mobilen Internets und der 5G-Technologie hat sich in den letzten Jahren auch die Live-Übertragungsbranche rasant entwickelt. Während des Live-Übertragungsprozesses war es für Entwickler schon immer ein Anliegen, eine qualitativ hochwertige und reibungslose Streaming-Wiedergabe zu erreichen. In der Front-End-Entwicklung gibt es ein plattformübergreifendes Framework namens uniapp, das mehrere Plattformen gleichzeitig unterstützen kann, einschließlich der Implementierung von Live-Übertragungsfunktionen. In diesem Artikel wird erläutert, wie Sie mit uniapp Live-Streaming implementieren und GIF-Animationen während des Streaming-Prozesses anzeigen.

1. Was ist Uniapp? Uniapp ist ein plattformübergreifendes Framework, das auf Vue und Front-End-Technologie basiert. Es kann mehrere Plattformen unterstützen, darunter iOS, Android, Windows und andere gängige Plattformen. Mit uniapp können verschiedene Anwendungen entwickelt werden, darunter unter anderem H5, Miniprogramme, APPs usw. Durch eine Entwicklung können Produkte auf wichtigen Plattformen bereitgestellt werden, was die Entwicklungseffizienz erheblich verbessert.

2. Uniapp implementiert Live-Streaming

In Uniapp können wir die Videokomponente verwenden, um Live-Streaming zu implementieren. Die Videokomponente ist eine Komponente, die für die eingebettete Videowiedergabe verwendet wird. Sie kann sowohl lokale Videodateien als auch Netzwerkvideodateien abspielen. Um die Videokomponente zum Implementieren von Live-Streaming zu verwenden, befolgen Sie einfach die folgenden Schritte.

Einführung der Videokomponente

1. Auf der Uniapp-Seite müssen wir die Videokomponente vorstellen. Fügen Sie der Vorlage den folgenden Code hinzu:

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

Darunter ist :src an die Adresse des Videostreams gebunden, :poster ist an das Titelbild des Videos gebunden, @error überwacht das Fehlerereignis beim Laden des Videos und @loadedmetadata überwacht die Analyse der Videometadaten Abschlussereignis, @play überwacht das Videostart-Wiedergabeereignis und @timeupdate überwacht das Aktualisierungsereignis für den Videowiedergabefortschritt.

Live-Streaming realisieren

2. In uniapp können wir das Live-Streaming-SDK verwenden, um Live-Streaming abzurufen. In diesem Artikel verwenden wir das Live-Broadcast-SDK von Tencent Cloud. Um das Tencent Cloud Live Broadcast SDK nutzen zu können, müssen wir zunächst den Live-Broadcast-Dienst auf der Tencent Cloud-Konsole aktivieren und die Push- und Pull-Adressen abrufen.

Im JS-Code können wir die uni.request-Methode verwenden, um die Streaming-Adresse vom Server anzufordern, und dann die Streaming-Adresse an das :src-Attribut der Videokomponente binden, um Live-Streaming zu implementieren. Der Beispielcode lautet wie folgt:

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

Unter anderem fordert die getPlayUrl-Methode die Streaming-Adresse vom Server an. Nachdem der Server die Streaming-Adressdaten zurückgegeben hat, bindet er die Daten an das URL-Attribut der Videokomponente, um Live-Streaming zu implementieren.

3. GIF-Animationen anzeigen

Wie werden GIF-Animationen während des Streaming-Vorgangs angezeigt? In Uniapp können wir Lottie-Web verwenden, um GIF-Animationen anzuzeigen.

lottie-web ist eine webbasierte Vektoranimations-Rendering-Bibliothek, die von AE (Adobe After Effects) exportierte Animationsdateien im JSON-Format unterstützt. Kann in einer Vielzahl von Webumgebungen verwendet werden und ist hochgradig anpassbar.

Bevor wir lottie-web verwenden, müssen wir den folgenden Code zu index.html hinzufügen, um die Datei lottie.js und die Animations-JSON-Datei einzuführen.

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

Dann können wir im js-Code ein Canvas-Tag erstellen, um die Lottie-Animation anzuzeigen. Der Beispielcode lautet wie folgt:

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

Unter diesen handelt es sich bei „animationData“ um die importierten Animations-JSON-Dateidaten. Mithilfe der Methode „loadAnimation“ wird ein Canvas-Tag erstellt und die Lottie-Animation mithilfe von AnimationData-Daten gerendert.

Durch die Integration der oben genannten Schritte können wir Live-Streaming in Uniapp implementieren und während des Streaming-Prozesses GIF-Animationen anzeigen. Der Beispielcode lautet wie folgt:

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

Durch die Einführung dieses Artikels haben wir gelernt, wie man Live-Streaming in Uniapp implementiert und GIF-Animationen während des Streaming-Prozesses anzeigt. Durch die Verwendung von Uniapp zur Entwicklung von Live-Broadcast-Anwendungen kann schnell eine plattformübergreifende Bereitstellung erreicht werden, was die Entwicklungseffizienz erheblich verbessert. Gleichzeitig kann die Verwendung von Lottie-Web zur Anzeige von GIF-Animationen nicht nur ein besseres Benutzererlebnis bieten, sondern auch die Attraktivität der Anwendung steigern.

Das obige ist der detaillierte Inhalt vonSo zeigen Sie GIF im Uniapp-Live-Streaming an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!