Uniappライブストリーミングスイッチカメラフリップ

Uniapp は Vue.js に基づくオープン ソース フレームワークで、開発者はこれを使用して複数のプラットフォームでアプリケーションを簡単に構築して公開できます。その中でも、Uniappのライブストリーミング機能は非常に強力で、多くのライブストリーミングアプリケーションのニーズを満たすことができます。この記事では、Uniappでカメラの切り替えと反転の機能を実装する方法について説明します。

1. プッシュ ストリーム スイッチング レンズ

Uniapp でプッシュ ストリーム スイッチング レンズを実装したい場合は、uni-mp プッシュ コンポーネントでカメラ コンテキストを使用する必要があります。これはカメラと対話するために使用されるコンテキスト オブジェクトであり、これを通じてカメラのさまざまなプロパティや操作にアクセスできます。

1. カメラ コンテキストの取得

まず、カメラ コンテキスト オブジェクトを取得する必要があります。 vue ページでは、次の方法でカメラ コンテキスト オブジェクトを取得できます。

<camera id="camera" @ready="onCameraReady"></camera>

import { getCameraContext } from '@/js_sdk/wechat-weapp-miniprogram/uni-mp-weixin/dist/index.js';

export default {
  data() {
    return {
      cameraContext: null
    }
  },
  methods: {
    onCameraReady(e) {
      this.cameraContext = getCameraContext('#camera');
      // ...
    }
  }
}

上記のコードでは、最初にページ内にカメラ コンポーネントを作成し、onCameraReady イベントを通じてカメラ コンテキスト オブジェクトを取得します。 onCameraReady イベントでは、getCameraContext 関数を呼び出してカメラ コンテキスト オブジェクトを取得し、データの CameraContext プロパティに保存します。

2. レンズの切り替え

次に、カメラ コンテキスト オブジェクトを通じてレンズを切り替えることができます。具体的には、cameraContext.switchCamera メソッドを呼び出してカメラのレンズを切り替えることができます。このメソッドは、異なるパラメータを渡すことで、前レンズと後レンズを切り替えることができます。

switchCamera() {
  if (!this.cameraContext) {
    return;
  }

  this.cameraContext.switchCamera({
    success: () => {
      // ...
    },
    fail: err => {
      console.log(err);
    }
  })
}

上記のコードでは、最初にカメラ コンテキスト オブジェクトが存在するかどうかを判断します。存在する場合は、switchCamera メソッドを呼び出してカメラを切り替えます。 switchCamera メソッドのコールバック関数では、操作の結果に基づいていくつかの処理を実行できます。

2. フリップ

レンズの切り替えに加えて、Uniapp にフリップ機能を実装することもできます。反転機能では、uni-mp コンポーネント ライブラリのカバービュー コンポーネントとカバー画像コンポーネントを使用する必要があります。カバービュー コンポーネントはページ上の領域をカバーするために使用され、カバーイメージ コンポーネントは画像を表示するために使用されます。

1. フリップの実装

まず、カバービュー コンポーネントをページに追加し、その位置スタイル属性を絶対、左、上を 0 に設定する必要があります。これにより、ページ全体がカバーされ、他のコンポーネントもカバーされます。

<cover-view class="flip" @tap="flip">
  <cover-image mode="aspectFill" class="image" src="/static/image/flip.png"></cover-image>
</cover-view>

.flip {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
}

.image {
  width: 40rpx;
  height: 40rpx;
}

上記のコードでは、最初にカバービュー コンポーネントを作成し、そのスタイル プロパティを絶対、左と上を 0、幅と高さを 100% に設定します。これにより、コンポーネントがページ全体を埋めて他のコンポーネントを覆うことができるようになります。次に、このコンポーネントにカバー画像コンポーネントを追加して、反転アイコンを表示します。

次に、ページの JS コードに反転関数を実装する必要があります。具体的には、フリップ関数の uni.createSelectorQuery().select メソッドを呼び出してビデオ コンポーネントのboundingClientRect を取得し、要素の幅と高さの属性に基づいてフリップの中心点の座標を計算します。次に、uni.createAnimation().rotate3d メソッドを呼び出してアニメーション オブジェクトを作成し、ページ内の各コンポーネントをまとめて反転します。

flip() {
  const selector = uni.createSelectorQuery().select('#camera');
  selector.boundingClientRect().exec(res => {
    const { width, height } = res[0];
    const x = width / 2;
    const y = height / 2;

    const animation = uni.createAnimation({
      duration: 1000,
      timingFunction: 'ease-out'
    });

    animation.rotate3d(1, 0, 0, 180).step();

    this.animationData = animation.export();
    this.showBack = !this.showBack;
  })
}

上記のコードでは、最初に uni.createSelectorQuery().select メソッドを呼び出して、ビデオ コンポーネントのboundingClientRect を取得します。次に、要素の幅と高さの属性に基づいて反転の中心点の座標 x と y を計算します。次に、アニメーション オブジェクトを作成し、animation.rotate3d() メソッドを呼び出して 3 次元反転アニメーションを作成しました。アニメーションが終了したら、showBack 属性の値を反転して、めくられたページを表示します。

つまり、Uniapp のライブ ストリーミング コンポーネントは非常に強力で、カメラ コンテキスト オブジェクトを使用してカメラ レンズを切り替えたり、カバービュー コンポーネントとカバー画像コンポーネントを使用して反転機能を実装したりできます。これらの機能により、ユーザーにさらなる楽しみをもたらす機能豊富なライブ ブロードキャスト アプリケーションを開発できます。

以上がUniappライブストリーミングスイッチカメラフリップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。