实时音视频
  • iOS
  • Android
  • macOS
  • Windows
  • HarmonyOS
  • Linux
  • Web
  • 小程序
  • Flutter : Dart
  • Electron
  • Unity3D
  • uni-app
  • React Native
  • Cocos Creator
  • 产品简介
  • 下载
  • 快速开始
    • 跑通示例源码
    • 集成 SDK
    • 实现视频通话
    • 实时音视频 SDK 与实时语音 SDK 差异
    • 场景化音视频配置
  • 基础功能
  • 进阶功能
  • 最佳实践
  • 常见错误码
  • 服务端 API
  • 客户端 API
  • 常见问题

实现视频通话

更新时间:2022-10-25 15:30

ZEGO 已统一环境概念,不再有正式/测试之分,2021-11-16 及之前在 ZEGO 控制台 创建项目的用户,请参考 测试环境废弃说明 进行 SDK 升级和调整相关代码。

1 功能简介

本文档适用于以下平台: Android、iOS、Windows、Web。

本文将介绍如何快速实现一个简单的实时音视频通话。

相关概念解释:

  • ZEGO Express SDK:由 ZEGO 提供的实时音视频 SDK,能够为开发者提供便捷接入、高清流畅、多平台互通、低延迟、高并发的音视频服务。
  • 推流:把采集阶段封包好的音视频数据流推送到 ZEGO 实时音视频云的过程。
  • 拉流:从 ZEGO 实时音视频云将已有音视频数据流拉取播放的过程。
  • 房间:是 ZEGO 提供的音视频空间服务,用于组织用户群,同一房间内的用户可以互相收发实时音视频及消息。
    1. 用户需要先登录某个房间,才能进行推流、拉流操作。
    2. 用户只能收到自己所在房间内的相关消息(用户进出、音视频流变化等)。

更多相关概念请参考 术语说明

2 前提条件

在实现基本的实时音视频功能之前,请确保:

SDK 同时也支持 Token 鉴权,若您需要升级鉴权方式,可参考 如何从 AppSign 鉴权升级为 Token 鉴权

3 使用步骤

以用户 A 拉取用户 B 的流为例,流程如下图:

/Pics/Common/ZegoExpressEngine/common_usage.png

整个推拉流过程的 API 调用时序如下图:

时序图

3.1 创建引擎

1. 创建界面(可选)

添加界面元素

在开始之前,推荐开发者添加以下界面元素,方便实现基本的实时音视频功能。

  • 本地预览窗口
  • 远端视频窗口
  • 结束按钮
界面图

2. 引入 SDK

在项目中引入 SDK。

import 'package:zego_express_engine/zego_express_engine.dart';

3. 创建引擎

调用 createEngineWithProfile 接口,将申请到的 AppID 和 AppSign 传入参数 “appID” 和 “appSign”。 Web 平台无需使用 “appsign”,为以免暴露,Web 平台请勿传入 “appsign”。

SDK 同时也支持 Token 鉴权,若您需要升级鉴权方式,可参考 如何从 AppSign 鉴权升级为 Token 鉴权

ZegoEngineProfile profile = ZegoEngineProfile(
    appID, // 请通过官网注册获取,格式为:1234567890
    ZegoScenario.General, // 通用场景接入
    appSign: appSign,// 请通过官网注册获取,格式为:'0123456789012345678901234567890123456789012345678901234567890123'(共64个字符),Web 平台无需传入
    enablePlatformView: true); //Web 平台需为true
// 创建引擎
ZegoExpressEngine.createEngineWithProfile(profile);

3.2 登录房间

1. 登录

传入用户 ID 参数 “userID” 创建 ZegoUser 用户对象后,调用 loginRoom 接口,传入房间 ID 参数 “roomID” 和用户参数 “user”,登录房间。如果房间不存在,调用该接口时会创建并登录此房间。

  • 同一个 AppID 内,需保证 “roomID” 信息的全局唯一。
  • 同一个 AppID 内,需保证 “userID” 全局唯一,建议开发者将其设置成一个有意义的值,可将 “userID” 与自己业务账号系统进行关联。
  • “ZegoUser” 的构造方法 ZegoUser.id 会将 “userName” 设为与传的参数 “userID” 一样。“userID” 与 “userName” 不能为 “null”,否则会导致登录房间失败。
// 创建用户对象
ZegoUser user = ZegoUser.id('user1');
// 只有传入 “isUserStatusNotify” 参数取值为 “true” 的 ZegoRoomConfig,才能收到 onRoomUserUpdate 回调。
ZegoRoomConfig config = ZegoRoomConfig.defaultConfig();
config.isUserStatusNotify = true;
// 如果您使用 appsign 的方式鉴权,token 参数不需填写;如果需要使用更加安全的 鉴权方式: token 鉴权,Web 平台仅支持 token 鉴权,请参考[如何从 AppSign 鉴权升级为 Token 鉴权](https://doc-zh.zego.im/faq/token_upgrade?product=ExpressVideo&platform=all)
// config.token = "xxxx";
// 开始登录房间
ZegoExpressEngine.instance.loginRoom('room1', user, config: config);

2. 监听登录房间后的事件回调

根据实际应用需要,在登录房间后监听想要关注的事件通知,比如房间状态更新、用户状态更新、流状态更新等。

  • onRoomStateUpdate:房间状态更新回调。登录房间后,当房间连接状态发生变更(如出现房间断开,登录认证失败等情况),SDK 会通过该回调通知。

  • onRoomUserUpdate:用户状态更新回调。登录房间后,当房间内有用户新增或删除时,SDK 会通过该回调通知。

    只有调用 loginRoom 接口登录房间时传入 ZegoRoomConfig 配置,且 “isUserStatusNotify” 参数取值为 “true” 时,用户才能收到 onRoomUserUpdate 回调。

  • onRoomStreamUpdate:流状态更新回调。登录房间后,当房间内有用户新推送或删除音视频流时,SDK 会通过该回调通知。

  • 只有调用 loginRoom 接口登录房间时传入 ZegoRoomConfig 配置,且 “isUserStatusNotify” 参数取值为 “true” 时,用户才能收到 onRoomUserUpdate 回调。
  • 通常情况下,如果某个用户想要播放其他用户推送的视频,可以在收到流状态更新(新增)的回调中,调用 startPlayingStream 接口拉取远端推送的音视频流。

// 以下为常用的房间相关回调
// 房间状态更新回调
ZegoExpressEngine.onRoomStateUpdate = (String roomID, ZegoRoomState state, int errorCode, Map<String, dynamic> extendedData) {
    // 根据需要实现事件回调
};

// 用户状态更新
ZegoExpressEngine.onRoomUserUpdate = (String roomID, ZegoUpdateType updateType, List<ZegoUser> userList) {
    // 根据需要实现事件回调
};

// 流状态更新
ZegoExpressEngine.onRoomStreamUpdate = (String roomID, ZegoUpdateType updateType, List<ZegoStream> streamList) {
    // 根据需要实现事件回调
};

3.3 推流

1. 开始推流

调用 startPublishingStream 接口,传入流 ID 参数 “streamID”,向远端用户发送本端的音视频流。

同一个 AppID 内,需保证 “streamID” 全局唯一。如果同一个 AppID 内,不同用户各推了一条 “streamID” 相同的流,会导致后推流的用户推流失败。

// 开始推流
ZegoExpressEngine.instance.startPublishingStream("streamID");

2. 启用本地渲染和预览(可选)

将画面渲染后启动本地预览

如果希望看到本端的画面,可将画面渲染后,调用 startPreview 接口启动本地预览。

Flutter 的渲染方式有两种:PlatformView 与 TextureRenderer。

  • Android 和 iOS 可以通过创建引擎时设置 “enablePlatformView” 参数,选择使用 TextureRenderer 还是 PlatformView。
  • Web 平台仅支持 PlatformView 的方式,且不存在资源和稳定性问题。
  • Windows、MacOS 目前仅支持 TextureRenderer 的方式。

与 TextureRenderer 相比,PlatformView 占用资源稍高,且稳定性偏低,但随着 Flutter 版本迭代,鲁棒性不断提高。

createCanvasView接口使用展示

  • 接口内部会根据创建引擎时设置的 “enablePlatformView” 参数及平台支持的方式,自动选择使用 TextureRenderer 或者 PlatformView 。
  • Android 和 iOS 平台会根据创建引擎时设置 “enablePlatformView” 参数,选择使用 TextureRenderer 还是 PlatformView。
  • Web、Windows 和 MacOS 不会受创建引擎时设置 “enablePlatformView” 参数影响,只使用支持的方式。

获取预览用的 Widget,然后使用 viewID 创建一个 ZegoCanvas 对象,开始预览。

// 将此 Widget 加入到页面的渲染树中以显示预览画面
_previewViewWidget = await ZegoExpressEngine.instance.createCanvasView((viewID) {
    _previewViewID = viewID;

    // Set the preview canvas
    ZegoCanvas previewCanvas = ZegoCanvas.view(viewID);

    // Start preview
    ZegoExpressEngine.instance.startPreview(canvas: previewCanvas);
});

3. 监听推流后的事件回调

根据实际应用需要,在推流后监听想要关注的事件通知,比如推流状态更新等。

onPublisherStateUpdate:推流状态更新回调。调用推流接口成功后,当推流状态发生变更(如出现网络中断导致推流异常等情况),SDK 在重试推流的同时,会通过该回调通知。

// 常用的推流相关回调
// 推流状态更新回调
ZegoExpressEngine.onPublisherStateUpdate = (String streamID, ZegoPublisherState state, int errorCode, Map<String, dynamic> extendedData) {
    // 根据需要实现事件回调
};

如果您需要了解 Express 的摄像头/视频/麦克风/音频/扬声器相关接口,请参考 常见问题 - 如何实现开关摄像头/视频画面/麦克风/音频/扬声器?

3.4 拉流

调用 startPlayingStream 接口,根据传入的流 ID 参数 “streamID”,拉取远端推送的音视频流,并根据需要渲染拉流画面。

  • 若仅需拉音频流,不需要显示拉流画面,可直接调用 startPlayingStream 接口。
ZegoExpressEngine.instance.startPlayingStream(streamID);
  • 若需要在拉流的同时,渲染拉流画面,Flutter 的渲染方式有两种:PlatformView 与 TextureRenderer。
    • Android 和 iOS 可以通过创建引擎时设置 “enablePlatformView” 参数,选择使用 TextureRenderer 还是 PlatformView。
    • Web 平台仅支持 PlatformView 的方式,且不存在资源和稳定性问题。
    • Windows、MacOS 目前仅支持 TextureRenderer 的方式。

与 TextureRenderer 相比,PlatformView 占用资源稍高,且稳定性偏低,但随着 Flutter 版本迭代,鲁棒性不断提高。

createCanvasView接口使用展示

  • 接口内部会根据创建引擎时设置的 “enablePlatformView” 参数及平台支持的方式,自动选择使用 TextureRenderer 或者 PlatformView 。
  • Android 和 iOS 平台会根据创建引擎时设置 “enablePlatformView” 参数,选择使用 TextureRenderer 还是 PlatformView。
  • Web、Windows 和 MacOS 不会受创建引擎时设置 “enablePlatformView” 参数影响,只使用支持的方式。

获取预览用的 Widget,然后使用 viewID 创建一个 ZegoCanvas 对象,开始预览。

// 将此 Widget 加入到页面的渲染树中以显示预览画面
_playViewWidget = await ZegoExpressEngine.instance.createCanvasView((viewID) {
    _playViewID = viewID;

    // Set the playing canvas
    ZegoCanvas canvas = ZegoCanvas.view(viewID);

    // Start playing
    ZegoExpressEngine.instance.startPlayingStream(streamID, canvas: canvas);
});

2. 监听拉流后的事件回调

根据实际应用需要,在拉流后监听想要关注的事件通知,比如拉流状态更新等。

onPlayerStateUpdate:拉流状态更新回调。调用拉流接口成功后,当拉流状态发生变更(如出现网络中断导致推流异常等情况),SDK 在重试拉流的同时,会通过该回调通知。

// 常用的拉流相关回调
// 拉流状态相关回调
ZegoExpressEngine.onPlayerStateUpdate = (String streamID, ZegoPlayerState state, int errorCode, Map<String, dynamic> extendedData) {
    // 根据需要实现事件回调
};

3.5 体验实时音视频功能

在真机中运行项目,运行成功后,可以看到本端视频画面。

为方便体验,ZEGO 提供了一个 Web 端调试示例 ,在该页面下,输入相同的 AppID、RoomID,输入一个不同的 UserID,即可加入同一房间与真机设备互通。当成功开始音视频通话时,可以听到远端的音频,看到远端的视频画面。

3.6 停止推拉流

1. 停止推流/预览/渲染

调用 stopPublishingStream 接口停止向远端用户发送本端的音视频流。

// 停止推流
ZegoExpressEngine.instance.stopPublishingStream();

如果启用了本地预览,调用 stopPreview 接口停止预览。

// 停止预览
ZegoExpressEngine.instance.stopPreview();

如果预览时使用了 createCanvasView,需要调用 destroyCanvasView 接口销毁。

// _previewViewID 为调用 [createCanvasView] 时得到的 viewID
ZegoExpressEngine.instance.destroyCanvasView(_previewViewID);

2. 停止拉流/渲染

调用 stopPlayingStream 接口停止拉取远端推送的音视频流。

// 停止拉流
ZegoExpressEngine.instance.stopPlayingStream(streamID);

如果拉流时使用了 createCanvasView,需要调用 destroyCanvasView 接口销毁。

// _playViewID 为调用 [createCanvasView] 时得到的 viewID
ZegoExpressEngine.instance.destroyCanvasView(_playViewID);

3.7 退出房间

调用 logoutRoom 接口退出房间。

// 退出房间
ZegoExpressEngine.instance.logoutRoom('room1');

3.8 销毁引擎

调用 destroyEngine 接口销毁引擎,用于释放 SDK 使用的资源。

// 销毁引擎
ZegoExpressEngine.destroyEngine();

相关文档

通讯和直播场景有什么区别?