uniappライブストリーミングでGIFを表示する方法-uni-app-php.cn

uniappライブストリーミングでGIFを表示する方法

PHPz

リリース： 2023-04-20 15:19:53

オリジナル

866 人が閲覧しました

近年、モバイルインターネットと5G技術の発展に伴い、ライブブロードキャスト業界も急速に発展しています。ライブブロードキャストのプロセスにおいて、高品質でスムーズなストリーミング再生を実現する方法は開発者にとって常に懸念事項でした。フロントエンド開発では、ライブブロードキャスト機能の実装など、複数のプラットフォームを同時にサポートできるクロスプラットフォームフレームワーク「uniapp」が存在します。この記事では、uniappを使用してライブストリーミングを実装し、ストリーミングプロセス中にGIFアニメーションを表示する方法を紹介します。

1. uniapp とは

Uniapp は、Vue とフロントエンドテクノロジーに基づくクロスプラットフォームフレームワークで、iOS、Android、Windows、その他の一般的なプラットフォームを含む複数のプラットフォームをサポートできます。 uniapp は、H5、ミニプログラム、APP などを含む (ただしこれらに限定されない) さまざまなアプリケーションの開発に使用できます。 1 回の開発で主要なプラットフォームに製品を展開できるため、開発効率が大幅に向上します。

2. Uniapp はライブストリーミングを実装します

uniapp では、ビデオコンポーネントを使用してライブストリーミングを実装できます。ビデオコンポーネントは、埋め込みビデオの再生に使用されるコンポーネントであり、ローカルビデオファイルとネットワークビデオファイルの両方を再生できます。ビデオコンポーネントを使用してライブストリーミングを実装するには、次の手順に従ってください。

ビデオコンポーネントの紹介

uniapp ページでは、ビデオコンポーネントを導入する必要があります。次のコードをテンプレートに追加します:

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

ログイン後にコピー

その中で、:src はビデオストリームアドレスをバインドし、:poster はビデオカバー画像をバインドし、@error はビデオ読み込みエラーイベントを監視し、@loadedmetadata はビデオメタデータを監視します。解析完了イベントの場合、@play はビデオ再生開始イベントを監視し、@timeupdate はビデオ再生進行状況更新イベントを監視します。

ライブストリーミングの実装

uniapp では、ライブストリーミング SDK を使用してライブストリーミングをプルできます。この記事では、Tencent Cloud のライブブロードキャスト SDK を使用します。 Tencent Cloud ライブブロードキャスト SDK を使用するには、まず Tencent Cloud コンソールでライブブロードキャストサービスをアクティブ化し、プッシュアドレスとプルアドレスを取得する必要があります。

JS コードでは、uni.request メソッドを使用してサーバーからストリーミングアドレスをリクエストし、そのストリーミングアドレスをビデオコンポーネントの :src 属性にバインドしてライブストリーミングを実装できます。サンプルコードは以下の通りです:

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

ログイン後にコピー

このうち、getPlayUrlメソッドはサーバーにストリーミングアドレスを要求し、サーバーがストリーミングアドレスのデータを返した後、そのデータをビデオコンポーネントのurl属性にバインドします。ライブストリーミングを実装します。

3. gif アニメーションの表示

ライブストリーミングの実装に基づいて、ストリーミングプロセス中に gif アニメーションを表示するにはどうすればよいでしょうか? uniappではlottie-webを使ってGIFアニメーションを表示することができます。

lottie-web は、AE (Adobe After Effects) でエクスポートされた json 形式のアニメーションファイルをサポートする Web ベースのベクターアニメーションレンダリングライブラリです。さまざまな Web 環境で使用でき、高度にカスタマイズ可能です。

lottie-web を使用する前に、lottie.js ファイルとアニメーション JSON ファイルを導入するために次のコードをindex.html に追加する必要があります。

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

ログイン後にコピー

次に、js コードで、lottie アニメーションを表示する Canvas タグを作成できます。サンプルコードは以下の通りです。

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

ログイン後にコピー

このうち、animationDataはインポートされたアニメーションJSONファイルデータです。 loadAnimation メソッドを通じて、canvas タグが作成され、animationData データを使用してロッティアニメーションがレンダリングされます。

上記の手順を統合すると、uniapp にライブストリーミングを実装し、ストリーミングプロセス中に GIF アニメーションを表示できます。サンプルコードは次のとおりです。

<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. 概要

この記事の導入を通じて、uniapp でライブストリーミングを実装し、ストリーミングプロセス中に gif アニメーションを表示する方法を学びました。 uniapp を使用してライブブロードキャストアプリケーションを開発すると、クロスプラットフォームの展開を迅速に実現でき、開発効率が大幅に向上します。同時に、lottie-web を使用して gif アニメーションを表示すると、ユーザーエクスペリエンスが向上するだけでなく、アプリケーションの魅力も向上します。

以上がuniappライブストリーミングでGIFを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。