序文

提示：此处功能需求运用在window和安卓设备：

ユニアプリはすぐに接続でき、リアルタイムの音声およびビデオ通話機能をすぐに実現できます。ZEGO Express SDK へのアクセス: ZEGO が提供するリアルタイムオーディオおよびビデオ SDK は、開発者に便利なアクセス、高解像度の滑らかさ、マルチプラットフォームの相互運用性、低遅延、および同時オーディオおよびビデオサービスを提供します。
SDKの利用について（公式ユーザーマニュアル）

以下、私の使用過程を詳しく説明します（浅い記録）

1. リアルタイムの音声通話とビデオ通話?

例: リアルタイムの音声通話とビデオ通話
文の挿入: 以前、EC ライブストリーミング機能 WebSocket ライブブロードキャストルームは人が多すぎて接続数が 500 人を超えていると書きました。
今回、セルフ自販機のビデオ通話コンサルティング接客機能の開発にuniappを利用させていただき、それを実現するインスタントSDKを検討の結果採用させていただきました。

2. ステップを使用する

1. uniappプラグインのインストール

(1)公式サイトからExpress SDKとjsカプセル化レイヤーをダウンロード

(2) ダウンロード後、次の操作を行います (注:nativeplugins フォルダーがない場合は、新しいフォルダーを作成すると、プラグインをインポートできます)。

ここに画像の説明を挿入

2.ビデオ通話ページ（nvueページ）の基本的な使い方

UI インターフェースを構築するには、ブラウザーと Android との互換性が必要です ( nvue ページ開発の注意):
1. js カプセル化層に必要なコンポーネントをコンポーネントに導入し、登録して使用します。

import ZegoRemoteView from "@/components/zego-ZegoExpressUniApp-JS/zego-view/ZegoRemoteView";
import ZegoLocalView from "@/components/zego-ZegoExpressUniApp-JS/zego-view/ZegoLocalView";

components: {
    
    
        ZegoLocalView: ZegoLocalView,
        ZegoRemoteView: ZegoRemoteView,
    },

 <view class="zego-video-area">
	     <view class="zego-video-view">
	         <!-- #ifdef APP-PLUS -->
	         <zego-remote-view
	             v-if="engine"
				 :viewMode="AspectFill"
	             :streamID="playStreamID"
				 class="video-view"
				 style="height: 403.84rpx; flex: 1"
	         >
	         </zego-remote-view>
	         <!-- #endif -->
	         <!-- #ifdef H5 -->
	         <video
	             id="remote_video"
	             class="video-view"
	             autoplay
	             playsinline
	             crossorigin="anonymous"
	             :muted="!playVideoMuted"
	         ></video>
	         <!-- #endif -->
	     </view>
        <view class="zego-video-view">
            <!-- #ifdef APP-PLUS -->
            <zego-local-view class="video-view" :viewMode="AspectFill" style="height: 403.84rpx; flex: 1"></zego-local-view>
            <!-- #endif -->
            <!-- #ifdef H5 -->
            <video
                id="local_video"
                class="video-view video"
                autoplay
                playsinline
                crossorigin="anonymous"
                object-fit="cover"
                :muted="pubVideoMuted"
            ></video>
            <!-- #endif -->
         </view>
		</view>

2. ページの初期化時にカメラの許可をオンにします

async mounted() {
    
    
       // #ifdef APP-PLUS
       if (uni.getSystemInfoSync().platform === "android") {
    
    
           await permision.requestAndroidPermission(
               "android.permission.RECORD_AUDIO"
           );
           await permision.requestAndroidPermission(
               "android.permission.CAMERA"
           );
       }
       // #endif
        // #ifdef H5
       this.localVideoElem = document.querySelector("#local_video video");
       this.playVideoElem = document.querySelector("#remote_video video");
       // #endif
    },

3. 公式サンプル（公式デモ）のカプセル化に基づいてさらに便利になりました

公式サンプルディレクトリリスト:
ここに画像の説明を挿入
例として、quick-start.nvue を取り上げます。ビデオ通話ページに入る前に、インターフェイスはトークン、userId、appid を取得し、設定は完了しています。

import keyCenter from '@/pages/KeyCenter.js'
keyCenter.setAppID(loginRes.appId);
keyCenter.setUserID(loginRes.userId);
keyCenter.setToken(loginRes.token);

このページに飛んだ後、部屋番号とPlayStreamIDを取得してください。
クイックスタートページが初期化されます。
1. プッシュストリーム ID (PublishStreamID) をバインドし、バインド (PlayStreamID)
//quick-start.vue (このメソッドを呼び出します)

//用了官方示例封装，直接调用对应方法
 this.bindPublishStreamIDChange(PublishStreamID)
 this.bindPlayStreamIDChange(PlayStreamID)

2. 操作:
(1) エンジン
//quick-start.vue の作成 (このメソッドを呼び出します)

this.onClickCreate(PlayStreamID)//创建引擎/房间号用了PlayStreamID

(2) ルームに入る
//mixins-"index.js

//创建引擎onClickCreate方法里面添加进入房间推流和拉流操作
```javascript
    this.loginRoom(this.roomID,this.userID,this.userName)//登录房间
	this.onClickPublish()//预览本地
	this.onClickPlay()//播放对方视频流

(3) ビデオ通話はすでに利用可能です
切断と破壊エンジンメソッド
//quick-start.vue の呼び出しについて (このメソッドを積極的に呼び出してください)

this.destroyEngine()

(4) 相手が入室・退室する際
、入室・退室の動作を監視する必要があるため、onClickCreateエンジン作成時にroomStreamUpdate を使用して入室状況を監視し、対応するコールバックを以下のように変更しています。

        this.engine.on("roomStreamUpdate", (roomID, updateType, streamList) => {
    
    
                // 流更新的相关操作, 以及关于断网后的重连出发的流更新
                const stream = streamList.find(item => item.streamID === this.playStreamID)
                if(stream) {
    
     
                    // 0 为add, 1 为delete
                    if (updateType == 0) {
    
    
                    //播放对方视频
                        this.startPlayingStream(this.playStreamID);
                    } else if (updateType == 1) {
    
    
                    // 对方退出了设置被动挂断
						this.destroyEngine()
                    }
                }
            });

業務処理を自分で行う、一方が抜けた場合にどのような操作を修正するか

要約する

初期化ページで、部屋番号、プッシュストリーム ID、およびプルストリーム ID を設定します。現在のユーザーの userId と Token を取得します。
パラメータに従って、(1) ルームへの入室 (2) ストリーミングの開始 (3) ストリームのプルの開始 (4) ルームの監視の開始同時にコールバックに入り、ルームへの入退室に必要なビジネスオペレーションを実現します。現在のページを終了するなど、1 対 1 ビデオを実装するときのスペース

uniappがビデオ通話機能を実装

実装手順

序文