uniapp实现视频通话功能

需求：接入即构SDK实现RTC视频通话

前言

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

uniapp接入即构，快速实现实时音视频通话功能。接入ZEGO Express SDK：由 ZEGO 提供的实时音视频 SDK，能够为开发者提供便捷接入、高清流畅、多平台互通、低延迟、高并发的音视频服务。
关于SDK的使用（官方使用手册）

---

下面详解一下我的使用过程（浅浅记录一下）

一、实时音视频通话？

示例：实时音视频通话
插一句：之前写过电商直播带货功能websocket直播间人数过多连接数多余500人，服务器垃圾不行崩了，后面改用了im即时通讯。
这次使用uniapp开发自助售卖机的视频通话咨询客服功能，经商量选择了即构SDK实现

二、使用步骤

1.uniapp插件的安装

（1）官网下载Express SDK和js封装层

（2）下载后如下操作（注：没有nativeplugins文件夹就新建，插件才能导入完成）：

2.视频通话页面基本使用（nvue页面）

建立ui界面此处我需要兼容浏览器和安卓踩了坑（nvue页面开发注意）：
1、引入components里面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、在官方示例的封装基础上更方便（官方demo）

官方示例目录列表：

以quick-start.nvue为例子，进去该视频通话页面之前，接口获取到了token和userId及appid，设置完成

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

跳转到该页面后获取房间号和PlayStreamID。
quick-start页面初始化进行了
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视频时，进出房间所需的业务操作，例如退出当前页面