How to display gif in uniapp live streaming

In recent years, with the development of mobile Internet and 5G technology, the live broadcast industry has also developed rapidly. During the live broadcast process, how to achieve high-quality and smooth streaming playback has always been a concern for developers. In front-end development, there is a cross-platform framework called uniapp, which can support multiple platforms at the same time, including the implementation of live broadcast functions. This article will introduce how to use uniapp to implement live streaming and display gif animation during the streaming process.

1. What is uniapp

Uniapp is a cross-platform framework based on Vue and front-end technology. It can support multiple platforms, including iOS, Android, Windows and other common platforms. uniapp can be used to develop various applications, including but not limited to H5, mini programs, APPs, etc. Through one development, products can be deployed to major platforms, which greatly improves development efficiency.

2. Uniapp implements live streaming

In uniapp, we can use the video component to implement live streaming. The video component is a component used for embedded video playback. It can play both local video files and network video files. To use the video component to implement live streaming, just follow the steps below.

1. Introducing the video component

In the uniapp page, we need to introduce the video component. Add the following code to the template:

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

Among them, :src binds the video stream address, :poster binds the video cover image, @error monitors the video loading error event, and @loadedmetadata monitors the video metadata parsing For the completion event, @play monitors the video start playback event, and @timeupdate monitors the video playback progress update event.

2. Implementing live streaming

In uniapp, we can use the live streaming SDK to pull live streaming. In this article, we use Tencent Cloud’s live broadcast SDK. To use the Tencent Cloud Live Broadcast SDK, we need to first activate the live broadcast service on the Tencent Cloud console and obtain the push and pull addresses.

In the js code, we can use the uni.request method to request the streaming address from the server, and then bind the streaming address to the :src attribute of the video component to implement live streaming. The sample code is as follows:

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

Among them, the getPlayUrl method requests the streaming address from the server. After the server returns the streaming address data, it binds the data to the url attribute of the video component to implement live streaming.

3. Display gif animation

On the basis of implementing live streaming, how to display gif animation during the streaming process? In uniapp, we can use lottie-web to display gif animation.

lottie-web is a Web-based vector animation rendering library that supports json format animation files exported by AE (Adobe After Effects). Can be used in a variety of web environments and is highly customizable.

Before using lottie-web, we need to add the following code to index.html to introduce the lottie.js file and animation json file.

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

Then in the js code, we can create a canvas tag to display lottie animation. The sample code is as follows:

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

Among them, animationData is the imported animation json file data. Through the loadAnimation method, a canvas tag is created and the lottie animation is rendered using animationData data.

Integrating the above steps, we can implement live streaming in uniapp and display gif animation during the streaming process. The sample code is as follows:

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

Through the introduction of this article, we have learned how to implement live streaming in uniapp and display gif animation during the streaming process. Using uniapp to develop live broadcast applications can quickly achieve cross-platform deployment, which greatly improves development efficiency. At the same time, using lottie-web to display gif animations can not only provide a better user experience, but also increase the appeal of the application.

The above is the detailed content of How to display gif in uniapp live streaming. For more information, please follow other related articles on the PHP Chinese website!