Uniappはオーディオとビデオの通信を実現します

Uniappはオーディオとビデオの通信を実現します

uniappのオーディオおよびビデオ通信についてまだ心配していますか？開発者のニーズを満たすために、anyRTCはオーディオおよびビデオ通信のユニアプリバージョンを特別に開発しました。

anyRTCリアルタイム通信には、次の2つのモジュールが含まれます。

• リアルタイムオーディオおよびビデオモジュール-オーディオおよびビデオ通信
• リアルタイムメッセージングモジュール-ライブ放送室での相互作用、集中砲火、その他の通信のシグナリング

まず、リアルタイムのオーディオおよびビデオモジュールについて理解してみましょう。

サンプルプロジェクト実行プロセス（この記事ではリモートプラグインを使用します）

• uniappプラグイン市場に行く

• サンプルデモをダウンロード
  

• manifest.jsonファイルを開き、[アプリのネイティブプラグイン構成] => [リモートプラグイン]を選択します
  

• カスタムベースを作成する
  

• パッケージ化に成功したら、カスタムベースを選択します

• ページを検索=>インデックス=> index.nvue、appidを追加
  

オーディオとビデオを実現するための手順

ビデオレンダリングコンポーネント

• あなたは.nvueファイルにいる必要があります
• ビデオAR-CanvasViewコンポーネントを表示する必要がある場合に使用します。最初は表示しないでください。表示しないとエラーが発生します。
• 幅と高さを設定する必要があります

<view>本地视频</view>
<view v-if>
  	<AR-CanvasView :ref="localvideo" style="height:100px;width:100px"></AR-CanvasView>
</view>
<view>远端视频</view>
<view  v-if>
  	<AR-CanvasView :ref="remotevideo" style="height:100px;width:100px"></AR-CanvasView>
</view>

js関連コード

1.プラグインを導入して使用する

ユニアプリネイティブプラグインの使用手順を参照してください

const RtcModule = uni.requireNativePlugin('AR-RtcModule');

2.プラグインの初期化

ページが最初にロードされたときに初期化する

• コールバックを初期化します（コールバックを監視します）。そうでない場合、コールバックは受信されません。
• プラグインを初期化します（appidを入力します）。そうしないと、サービスを使用できません。

// 页面初始加载(uniapp 生命周期)
async onReady() {
    
    
  // 初始化回调
  await RtcModule.setCallBack((res) => {
    
    
    switch (res.engineEvent) {
    
    
      case "onWarning": 
      console.log("警告", res.warningCode);
      break;
      case "onError":
       console.log("错误", res.errorCode);
      break;
      case "onJoinChannelSuccess": (本地)
       console.log("用户"+ res.uid + "加入成功");
      break;
      case "onLeaveChannel":（本地）
       console.log("用户"+ res.uid + "离开频道");
      break;
      case "onUserJoined":
       console.log("远端用户"+ res.uid + "加入频道");
      break;
      case "onUserOffline":
       console.log("远端用户"+ res.uid + "离开频道");
      break;
      case "onFirstRemoteVideoDecoded":
       console.log("完成远端用户"+ res.uid + "视频首帧解码");
      break;
      ...
    }
  })
  
  // 初始化插件
  await RtcModule.create({
    
    "appId": "**********"}, (res) => {
    
    });
  
}

3.ユーザーロールを設定します（この記事ではアンカーを使用します）

プラグインは2つの役割モードを提供します。

• 観客（2）：ホストを見ることができるが、ホストは自分自身を見ることができない
• アンカー（1）：すべてのチャンネルで自分自身を見ることができます

RtcModule.setClientRole({
    
    "role": 1}, (ret) => {
    
    });

4.チャンネルに参加する

1.joinChannelメソッドを使用してチャネルに参加します

• トークン：anyRTCによって提供されるより安全な認証（開発中に有効にしないことをお勧めします）
• channelId：参加するチャンネルの名前（ユーザーはお互いを見るには同じチャンネルに参加する必要があります）
• uid：ユーザー名（同じではなく、ランダムに生成することをお勧めします）

RtcModule.joinChannel({
    
    "token": "","channelId": "uniappRTC","uid": "666"}, (res) => {
    
    })

2.コールバックonJoinChannelSuccess対応ビデオの監視

AR-CanvasViewコンポーネントをsetupLocalVideo使用してローカルビデオをレンダリングする

ユーザーロールがオーディエンスにある場合、このコードは使用できません

でonJoinChannelSuccess年コードに参加します

// 启用视频模块
RtcModule.enableVideo((res) => {
    
    });
// 初始化本地视图
this.$refs.localvideo.setupLocalVideo({
    
    
 "renderMode": 1,
 "channelId": "uniappRTC",
 "uid": "666",
 "mirrorMode": 0
}, (res) => {
    
    });
// 本地预览
RtcModule.startPreview((res) => {
    
    });

5.リモートユーザーは、コールバックの監視を通じて処理されます

リモートユーザーがチャネルに参加します

コールバックを監視するための監視を通じて onUserJoined

AR-CanvasViewリモートビデオコンテナを有効にする

リモートビデオの最初のフレームのデコードを完了します

onFirstRemoteVideoDecoded遠位ビデオのレンダリングの監視コールバックを監視することによって

でonFirstRemoteVideoDecoded年コードに参加します

// 初始化远端视图
this.$refs.remotevideo.setupRemoteVideo({
    
    
 "renderMode": 1,
 "channelId": "uniappRTC",
 "uid": res.uid,
 "mirrorMode": 0
}, (res) => {
    
    })
// 远端预览
RtcModule.startPreview((res) => {
    
    });

リモートユーザーがチャネルを離れます

コールバックを監視することによって onUserOffline

ARを閉じる-CanvasViewリモートビデオコンテナ

6.チャネルを離れます（電話を切ります）

• チャネルを離れる

RtcModule.leaveChannel((res) => {
    
    })

• プラグインインスタンスを破棄します

ページ上の操作表示はインスタンスを破棄できません

RtcModule.destroyRtc((res) => {
    
    })

結果を示す

ホスト端末に入るときは、同じ部屋番号を入力するだけで、1人または複数人のビデオ通話を行うことができます。

写真が示すように

訪問者は閲覧のみが可能で、メイン画面には表示されません。

写真が示すように

統合ヘルプ

サンプルプロジェクトに従って、上記のプロセス操作を実行できます。統合中にサポートが必要な場合は、プラグイン市場の連絡先情報から会社のカスタマーサービスに連絡できます。