需求：接入即构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()
}
}
});
自己做业务处理，一方退出进行什么操作修改一下文章来源：https://www.toymoban.com/news/detail-435773.html
总结
初始化页面设置房间号、设置推流Id，拉流Id 。获取当前用户的userId和Token。
根据参数开始 （1）进入房间 （2）开始推流（3）开始拉流 （4）同时开始监听房间进入回调实现1对1视频时，进出房间所需的业务操作，例如退出当前页面文章来源地址https://www.toymoban.com/news/detail-435773.html
到了这里，关于uniapp实现视频通话功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
