UniApp がカメラとビデオ通話を実装する方法

UniApp は、HBuilder に基づいて開発されたクロスプラットフォーム開発フレームワークで、1 つのコードを複数のプラットフォームで実行できるようにします。この記事では、UniApp にカメラとビデオ通話機能を実装する方法と、対応するコード例を紹介します。

1. ユーザーのカメラ許可を取得する

UniApp では、まずユーザーのカメラ許可を取得する必要があります。ページの mounted ライフサイクル関数で、uni の authorize メソッドを使用してカメラのアクセス許可を呼び出します。コード例は次のとおりです:

mounted() {
  uni.authorize({
    scope: 'scope.camera',
    success() {
      console.log('获取摄像头权限成功');
    },
    fail(err) {
      console.log('获取摄像头权限失败', err);
    }
  });
}

2. カメラを開いてプレビューを表示します

ユーザーのカメラ許可を取得した後、uni の createCameraContext メソッドを使用してCameraContext オブジェクト。次に、その startPreview メソッドを呼び出してカメラをオンにし、ページにプレビューを表示します。コード例は次のとおりです。

data() {
  return {
    cameraContext: null, // 摄像头对象
  };
},
mounted() {
  this.cameraContext = uni.createCameraContext();
  this.cameraContext.startPreview();
}

このページでは、uni-camera コンポーネントを使用してプレビュー画面を表示できます。コード例は次のとおりです。

<template>
  <view>
    <uni-camera :camera-context="cameraContext"></uni-camera>
  </view>
</template>

3. ビデオ通話の実装

ビデオ通話機能を実装するには、uni の createLivePusherContext と createLivePlayerContext## を使用できます。 #メソッド LivePusherContext オブジェクトと LivePlayerContext オブジェクトを作成します。これらのオブジェクトを通じてプッシュと再生を実行できます。ストリーミング側では、ストリーミングを開始するために start メソッドを呼び出す必要があり、再生側では、再生を開始するために play メソッドを呼び出す必要があります。コード例は次のとおりです。

data() {
  return {
    livePusherContext: null, // 推流对象
    livePlayerContext: null, // 播放对象
  };
},
mounted() {
  this.livePusherContext = uni.createLivePusherContext();
  this.livePlayerContext = uni.createLivePlayerContext();

  // 开始推流
  this.livePusherContext.start();

  // 开始播放
  this.livePlayerContext.play();
}

このページでは、

uni-live-push コンポーネントを使用してプッシュ画面と uni-live-player# を表示できます。 ## 再生画像を表示するコンポーネント。コード例は次のとおりです: <pre class='brush:html;toolbar:false;'>&lt;template&gt; &lt;view&gt; &lt;uni-live-push :live-pusher-context=&quot;livePusherContext&quot;&gt;&lt;/uni-live-push&gt; &lt;uni-live-player :live-player-context=&quot;livePlayerContext&quot;&gt;&lt;/uni-live-player&gt; &lt;/view&gt; &lt;/template&gt;</pre>4. ビデオ通話の終了

ビデオ通話を終了したい場合は、対応するメソッドを呼び出してプッシュと再生を停止します。ストリーミング側で

stop

メソッドを呼び出してプッシュを停止し、再生側で stop メソッドを呼び出して再生を停止します。コード例は次のとおりです。 <pre class='brush:js;toolbar:false;'>// 结束推流 this.livePusherContext.stop(); // 结束播放 this.livePlayerContext.stop();</pre> 上記の方法により、UniApp にカメラとビデオ通話機能を実装できます。この記事があなたの UniApp 開発に役立つことを願っています。

以上がUniApp がカメラとビデオ通話を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。