Bagaimana untuk memaparkan gif dalam penstriman langsung uniapp

Dalam beberapa tahun kebelakangan ini, dengan perkembangan Internet mudah alih dan teknologi 5G, industri siaran langsung juga telah berkembang pesat. Semasa proses siaran langsung, cara untuk mencapai main balik penstriman yang berkualiti tinggi dan lancar sentiasa menjadi perhatian pembangun. Dalam pembangunan bahagian hadapan, terdapat rangka kerja merentas platform yang dipanggil uniapp, yang boleh menyokong berbilang platform pada masa yang sama, termasuk pelaksanaan fungsi siaran langsung. Artikel ini akan memperkenalkan cara menggunakan uniapp untuk melaksanakan penstriman langsung dan memaparkan animasi gif semasa proses penstriman.

1. Apa itu uniapp

Uniapp ialah rangka kerja merentas platform berdasarkan teknologi Vue dan bahagian hadapan Ia boleh menyokong berbilang platform, termasuk iOS, Android, Windows dan platform biasa yang lain. uniapp boleh digunakan untuk membangunkan pelbagai aplikasi, termasuk tetapi tidak terhad kepada H5, program mini, APP, dsb. Melalui satu pembangunan, produk boleh digunakan ke platform utama, yang sangat meningkatkan kecekapan pembangunan.

2. uniapp melaksanakan penstriman langsung

Dalam uniapp, kami boleh menggunakan komponen video untuk melaksanakan penstriman langsung. Komponen video ialah komponen yang digunakan untuk main balik video terbenam Ia boleh memainkan kedua-dua fail video tempatan dan fail video rangkaian. Untuk menggunakan komponen video untuk melaksanakan penstriman langsung, cuma ikut langkah di bawah.

1. Memperkenalkan komponen video

Dalam halaman uniapp, kami perlu memperkenalkan komponen video. Tambahkan kod berikut pada templat:

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

Antaranya, :src terikat pada alamat strim video, :poster terikat pada imej muka depan video, @error memantau peristiwa ralat memuatkan video dan @loadedmetadata memantau video Acara penghuraian metadata selesai, @play memantau acara main balik video mula dan @timeupdate memantau acara kemas kini kemajuan main balik video.

2. Melaksanakan penstriman langsung

Dalam uniapp, kami boleh menggunakan SDK penstriman langsung untuk menarik penstriman langsung. Dalam artikel ini, kami menggunakan SDK siaran langsung Tencent Cloud. Untuk menggunakan Tencent Cloud Live Broadcast SDK, kami perlu mengaktifkan perkhidmatan siaran langsung pada konsol Tencent Cloud dan mendapatkan alamat tolak dan tarik.

Dalam kod js, kami boleh menggunakan kaedah uni.request untuk meminta alamat penstriman daripada pelayan, dan kemudian mengikat alamat penstriman kepada atribut :src komponen video untuk melaksanakan penstriman langsung. Kod sampel adalah seperti berikut:

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

Antaranya, kaedah getPlayUrl meminta alamat penstriman daripada pelayan Selepas pelayan mengembalikan data alamat penstriman, ia mengikat data kepada atribut url video komponen untuk melaksanakan penstriman langsung.

3. Paparkan animasi gif

Atas dasar melaksanakan penstriman langsung, bagaimana untuk memaparkan animasi gif semasa proses penstriman? Dalam uniapp, kita boleh menggunakan lottie-web untuk memaparkan animasi gif.

lottie-web ialah perpustakaan pemaparan animasi vektor berasaskan web yang menyokong fail animasi format json yang dieksport oleh AE (Adobe After Effects). Boleh digunakan dalam pelbagai persekitaran web dan sangat disesuaikan.

Sebelum menggunakan lottie-web, kita perlu menambah kod berikut pada index.html untuk memperkenalkan fail lottie.js dan fail json animasi.

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

Kemudian dalam kod js, kita boleh mencipta tag kanvas untuk memaparkan animasi lottie. Kod sampel adalah seperti berikut:

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

Antaranya, animationData ialah data fail json animasi yang diimport. Melalui kaedah loadAnimation, teg kanvas dicipta dan animasi lottie dipaparkan menggunakan data animationData.

Dengan menyepadukan langkah di atas, kami boleh melaksanakan penstriman langsung dalam uniapp dan memaparkan animasi gif semasa proses penstriman. Kod sampel adalah seperti berikut:

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

4. Ringkasan

Melalui pengenalan artikel ini, kami telah mempelajari cara melaksanakan penstriman langsung dalam uniapp dan memaparkan animasi gif semasa proses penstriman . Menggunakan uniapp untuk membangunkan aplikasi siaran langsung boleh mencapai penggunaan merentas platform dengan cepat, yang meningkatkan kecekapan pembangunan. Pada masa yang sama, menggunakan lottie-web untuk memaparkan animasi gif bukan sahaja dapat memberikan pengalaman pengguna yang lebih baik, tetapi juga meningkatkan daya tarikan aplikasi.

Atas ialah kandungan terperinci Bagaimana untuk memaparkan gif dalam penstriman langsung uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!