实现视频通话
功能简介
本文将介绍如何快速实现一个简单的实时音视频通话。
相关概念解释:
- ZEGO Express SDK：由 ZEGO 提供的实时音视频 SDK，能够为开发者提供便捷接入、高清流畅、多平台互通、低延迟、高并发的音视频服务。
- 流：指一组按指定编码格式封装，不断发送中的音视频数据。一个用户可以同时推多条流（例如一条推摄像头数据，一条推屏幕共享数据）也可以同时拉多条流。每条流都由一个流 ID（streamID）标识。
- 推流：把封包好的音视频数据流推送到 ZEGO 实时音视频云的过程。
- 拉流：从 ZEGO 实时音视频云将已有音视频数据流拉取播放的过程。
- 房间：是 ZEGO 提供的音视频空间服务，用于组织用户群，同一房间内的用户可以互相收发实时音视频及消息。
- 用户需要先登录某个房间，才能进行推流、拉流操作。
- 用户只能收到自己所在房间内的相关消息（用户进出、音视频流变化等）。
- 每个房间由一个 ApplD 内唯一的 roomlD 标识。所有使用同一个 roomID 登录房间的用户即属于同房间。
更多相关概念请参考 术语说明。
前提条件
在实现基本的实时音视频功能之前，请确保：
- 已在项目中集成 ZEGO Express SDK，实现基本的实时音视频功能，详情请参考 快速开始 - 集成。
- 已在 ZEGO 控制台 创建项目，并申请有效的 AppID 和 AppSign，详情请参考 控制台 - 项目管理 中的“项目信息”。
SDK 同时也支持 Token 鉴权，若您对项目安全性有更高要求，建议您升级鉴权方式，详情请参考 如何从 AppSign 鉴权升级为 Token 鉴权。
使用步骤
用户通过 ZEGO Express SDK 进行视频通话的基本流程为：
用户 A、B 加入房间，用户 B 预览并将音视频流推送到 ZEGO 云服务（推流），用户 A 收到用户 B 推送音视频流的通知之后，在通知中播放用户 B 的音视频流（拉流）。
整个推拉流过程的 API 调用时序如下图：
创建引擎
1. （可选）创建界面
在创建引擎之前，ZEGO 推荐开发者添加以下界面元素，方便实现基本的实时音视频功能。
- 本地预览窗口
- 远端视频窗口
- 结束按钮
2. 创建引擎
调用 createEngineWithProfile 接口，将申请到的 AppID 和 AppSign 传入参数 “appID” 和 “appSign”，创建引擎单例对象。
SDK 同时也支持 Token 鉴权，若您对项目安全性有更高要求，建议您升级鉴权方式，可参考 如何从 AppSign 鉴权升级为 Token 鉴权。
// 导入 ZEGO Express SDK
import ZegoExpressEngine from "@/uni_modules/zego-ZegoExpressUniApp-JS/components/zego-ZegoExpressUniApp-JS/lib/ZegoExpressEngine";
// 采用通用场景
const profile = {
appID : xxx,
// AppSign 仅满足简单的鉴权需求，如果需要升级为更加安全的鉴权方式，请参考[如何从 AppSign 鉴权升级为 Token 鉴权](https://doc-zh.zego.im/faq/token_upgrade?product=ExpressVideo&platform=all)
// AppSign 可通过[控制台](https://console.zego.im/dashboard)获取，格式为 @"39011cbxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
appSign: '39011cbxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
scenario : 0
};
ZegoExpressEngine.createEngineWithProfile(profile)3.设置回调
创建引擎后开发者可根据实际需要，调用引擎实例的 on 方法设置回调。
为避免错过事件通知，建议在在创建引擎后立即注册回调
登录房间
1. 登录
您可以调用 loginRoom 接口登录房间。如果房间不存在，调用该接口时会创建并登录此房间。
- roomID 和 user 的参数由您本地生成，但是需要满足以下条件:
- 同一个 AppID 内，需保证 “roomID” 全局唯一。
- 同一个 AppID 内，需保证 “userID” 全局唯一，建议开发者将 “userID” 与自己业务的账号系统进行关联。
let roomConfig = {};
// 只有传入 “isUserStatusNotify” 参数取值为 “true” 的 ZegoRoomConfig，才能收到 onRoomUserUpdate 回调。
roomConfig.isUserStatusNotify = true;
// 获取token传入
roomConfig.token = "********";
// 登录房间
// 开始登录房间
ZegoExpressEngine.instance().loginRoom('room1', {'userID': 'id1', 'userName': 'user1'}, roomConfig);2. 监听登录房间后的事件回调
可根据实际应用需要，在登录房间后监听想要关注的事件通知，比如房间状态更新、用户状态更新、流状态更新等。
-
roomStateUpdate：房间状态更新回调，登录房间后，当房间连接状态发生变更（如出现房间断开，登录认证失败等情况），SDK 会通过该回调通知。
-
roomUserUpdate：用户状态更新回调，登录房间后，当房间内有用户新增或删除时，SDK 会通过该回调通知。
只有调用 loginRoom 接口登录房间时传入 ZegoRoomConfig 配置，且 “isUserStatusNotify” 参数取值为 “true” 时，用户才能收到 roomUserUpdate 回调。
-
roomStreamUpdate：流状态更新回调，登录房间后，当房间内有用户新推送或删除音视频流时，SDK 会通过该回调通知。
- 只有调用 loginRoom 接口登录房间时传入 ZegoRoomConfig 配置，且 “isUserStatusNotify” 参数取值为 “true” 时，用户才能收到 roomUserUpdate 回调。
- 通常情况下，如果某个用户想要播放其他用户推送的视频，可以在收到流状态更新（新增）的回调中，调用 startPlayingStream 接口拉取远端推送的音视频流。
// 以下为常用的房间相关回调
ZegoExpressEngine.instance().on('roomStateUpdate', (roomID, state, errorCode, extendedData) => {
// 房间状态更新回调，登录房间后，当房间连接状态发生变更（如出现房间断开，登录认证失败等情况），SDK会通过该回调通知
}); ;
ZegoExpressEngine.instance().on('roomUserUpdate', (roomID, updateType, userList) => {
// 用户状态更新，登录房间后，当房间内有用户新增或删除时，SDK会通过该回调通知
});
ZegoExpressEngine.instance().on('roomStreamUpdate', (roomID, updateType, streamList) => {
// 流状态更新，登录房间后，当房间内有用户新推送或删除音视频流时，SDK会通过该回调通知
});推流
1. 开始推流
调用 startPublishingStream 接口，传入流 ID 参数 “streamID”，向远端用户发送本端的音视频流。
同一个 AppID 内，需保证 “streamID” 全局唯一。如果同一个 AppID 内，不同用户各推了一条 “streamID” 相同的流，会导致后推流的用户推流失败。
await ZegoExpressEngine.instance().startPublishingStream("streamID");2. （可选）启动本地预览
如果希望看到本端画面，在 uni-app 项目中调用 startPreview 接口启动本地预览。利用 uni-app 所提供的 条件编译，在 uni-app 项目的App 环境中，开发者可使用 <zego-local-view> 标签设置预览视图；在 Web 环境中，开发者在调用 startPreview 时，需要传入一个用于播放视图的 video 元素。
<template>
<!-- #ifdef APP-PLUS -->
<zego-local-view style="height: 403.84rpx;flex: 1;"></zego-local-view>
<!-- #endif -->
<!-- #ifdef H5 -->
<video id="local_video" style="height: 403.84rpx;flex: 1;" autoplay playsinline :muted="true"></video>
<!-- #endif -->
</template>3. 监听推流后的事件回调
根据实际应用需要，在推流后监听想要关注的事件通知，比如推流状态更新等。
publisherStateUpdate：推流状态更新回调，调用推流接口成功后，当推流状态发生变更，如出现网络中断导致推流异常等情况，SDK 在重试推流的同时，会通过该回调通知。
ZegoExpressEngine.instance().on("publisherStateUpdate", (streamID, state, errorCode, extendedData) => {
// 调用推流接口成功后，当推流器状态发生变更，如出现网络中断导致推流异常等情况，SDK在重试推流的同时，会通过该回调通知
//....
});拉流
1. 开始拉流
调用 startPlayingStream 接口，根据传入的流 ID 参数 “streamID”，拉取远端推送的音视频流。
关于远端视频流视图：
- 在 uni-app 的 App 环境中，若
startPlayingStream调用成功，则无返回值，可使用<zego-remote-view>标签设置远端视频流视图。 - 在 uni-app 的 Web 环境中，若
startPlayingStream调用成功，会返回一个 MediaStream 对象，开发者可以用返回的 MediaStream 赋值给 video 元素的 srcObject 属性设置远端视频流视图。
- 远端用户推送的 “streamID” 可以从 roomStreamUpdate 回调中获取。
- 需保证 “streamID” 全局唯一。
<template>
<!-- #ifdef APP-PLUS -->
<zego-remote-view :streamID="playStreamID" style="height: 403.84rpx;flex: 1"></zego-remote-view>
<!-- #endif -->
<!-- #ifdef H5 -->
<video id="remote_video" style="height: 403.84rpx;flex: 1;" autoplay playsinline :muted="true"></video>
<!-- #endif -->
</template>2. 监听拉流后的事件回调
根据实际应用需要，在拉流后监听想要关注的事件通知，比如拉流状态更新等。
playerStateUpdate：拉流状态更新回调，调用拉流接口成功后，当拉流状态发生变更，如出现网络中断导致推流异常等情况，SDK 在重试拉流的同时，会通过该回调通知。
ZegoExpressEngine.instance().on("playerStateUpdate", (streamID, state, errorCode, extendedData) => {
/** 调用拉流接口成功后，当拉流器状态发生变更，如出现网络中断导致推流异常等情况，SDK在重试拉流的同时，会通过该回调通知 */
//....
});在线测试推拉流功能
在真机中运行项目，运行成功后，可以看到本端视频画面。
为方便体验，ZEGO 提供了一个 Web 端调试示例，在该页面下，输入相同的 AppID、RoomID，输入不同的 UserID、以及对应的 Token，即可加入同一房间与真机设备互通。当成功开始音视频通话时，可以听到远端的音频，看到远端的视频画面。
停止推拉流
1. 停止推流/预览
调用 stopPublishingStream 接口停止发送本地的音视频流，结束通话。
/** 停止推流 */
ZegoExpressEngine.instance().stopPublishingStream();如果启用了本地预览，开发者可以在停止推流后根据业务需要调用 stopPreview 接口停止预览。
/** 停止本地预览 */
ZegoExpressEngine.instance().stopPreview();2. 停止拉流
调用 stopPlayingStream 接口，停止拉取远端的音视频流。
如果开发者通过 roomStreamUpdate 回调收到了音视频流 “减少” 的通知，请及时调用 stopPlayingStream 接口停止拉流，避免拉到空流、产生额外的成本；或者，开发者可以根据自己的业务需求，选择合适的时机，主动调用 stopPlayingStream 接口停止拉流。
/** 停止拉流 */
ZegoExpressEngine.instance().stopPlayingStream("streamID");3. 退出房间
调用 logoutRoom 接口退出房间，本端会收到 roomStateUpdate 回调通知调用结果，并停止其所有推拉流以及本地预览。
/** 退出房间 */
ZegoExpressEngine.instance().logoutRoom('room1');销毁引擎
调用 destroyEngine 接口销毁引擎，用于释放 SDK 使用的资源。
/** 销毁引擎 */
ZegoExpressEngine.destroyEngine();根据实际需要，可在销毁引擎时通过 “await” 关键字，进行异步等待以确保设备硬件资源被释放完成。