基于即构Flutter直播sdk快速实现直播功能

前文我们介绍了Flutter直播sdk集成指引,在此基础上,本文将介绍如何基于即构Flutter直播sdk快速实现一个简单的直播功能。

Flutter直播相关概念解释

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

Flutter直播实现前提条件

在实现基本的直播功能之前,请确保:

Flutter直播实现流程

用户通过 Flutter直播sdk 进行直播的基本流程为:

用户 A、B 加入房间,用户 B 预览并将音视频流推送到 ZEGO 云服务(推流),用户 A 收到用户 B 推送音视频流的通知之后,在通知中播放用户 B 的音视频流(拉流)。

/Pics/Common/ZegoExpressEngine/common_usage.png

开通服务

  1. 超低延迟直播功能不是默认开启的,使用前请在 ZEGO 控制台 自助开通(开通步骤请参考 项目管理 – 服务配置 中的“超低延迟直播”),或联系 ZEGO 技术支持开通。
  2. CDN 直播功能不是默认开启的,使用前请在 ZEGO 控制台 自助开通(开通步骤请参考 项目管理 – 服务配置 中的 “CDN”),或联系 ZEGO 技术支持开通。

初始化

1. 创建界面

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

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

2. 引入 SDK

在项目中引入 SDK。

import 'package:zego_express_engine/zego_express_engine.dart';

3. 创建引擎

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

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

登录房间

  • 生成 Token

开发者可在 ZEGO 控制台获取临时 Token(有效期为 24 小时).

传入用户 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);

登录状态(房间连接状态)回调

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

  • onRoomStateUpdate:房间状态更新回调。登录房间后,当房间连接状态发生变更(如出现房间断开,登录认证失败等情况),SDK 会通过该回调通知。
  • onRoomUserUpdate:用户状态更新回调。登录房间后,当房间内有用户新增或删除时,SDK 会通过该回调通知。 只有调用 loginRoom 接口登录房间时传入 ZegoRoomConfig 配置,且 “isUserStatusNotify” 参数取值为 “true” 时,用户才能收到 onRoomUserUpdate 回调。
  • onRoomStreamUpdate:流状态更新回调。登录房间后,当房间内有用户新推送或删除音视频流时,SDK 会通过该回调通知。

// 以下为常用的房间相关回调
// 房间状态更新回调
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) {
    // 根据需要实现事件回调
};

主播预览自己的画面,并推送到 ZEGO 音视频云

1. 主播预览自己的画面

2. 主播将自己的音视频流推送到 ZEGO 音视频云

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

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

拉取主播的音视频

进行直播时,我们需要主播的音视频。

在同一房间内的其他用户将音视频流推送到 ZEGO 音视频云时,会在 onRoomStreamUpdate 回调中收到音视频流新增的通知,并可以获取到某条流的 “streamID”。

开发者可以在该回调中,调用 startPlayingStream 接口。您可通过监听 onPlayerStateUpdate 回调知晓是否成功拉取音视频。

1 CDN 拉流

调用 startPlayingStream 接口,传入 “streamID” 拉取播放该用户的音视频,设置 ZegoPlayerConfig 的 “resourceMode” 参数为 “ZegoStreamResourceMode.OnlyCDN”,表示仅从 CDN 拉流。

CDN 拉流具有高延迟(3s 左右),弱网抗性差等特点,但价格低。

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, 
        config: ZegoPlayerConfig(ZegoStreamResourceMode.OnlyCDN,videoCodecID: ZegoVideoCodecID.Default, roomID: roomID));
});

2 CDN Plus 拉流

调用 startPlayingStream 接口,并将 “resourceMode” 参数为 “ZegoStreamResourceMode.CDNPlus”,表示 CDN Plus 拉流。

CDN Plus 拉流会根据本地网络情况,选择 CDN 或超低延迟直播拉流,弱网抗性良好,价格较低。

// 将此 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, 
        config: ZegoPlayerConfig(ZegoStreamResourceMode.CDNPlus,videoCodecID: ZegoVideoCodecID.Default, roomID: roomID));
});

3 超低延迟直播拉流

调用 startPlayingStream 接口,并将 “resourceMode” 参数设置为 “ZegoStreamResourceMode.ONLY_L3”,表示超低延迟直播拉流。

超低延迟直播拉流具有低延迟(1s 以内),弱网抗性较优等特点,价格适中。

// 将此 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, 
        config: ZegoPlayerConfig(ZegoStreamResourceMode.ONLY_L3,videoCodecID: ZegoVideoCodecID.Default, roomID: roomID));
});

调试直播功能

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

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

注:通过以上步骤可以很快的实现Flutter直播功能,如遇到问题欢迎评论探讨。

本文为原创稿件,版权归作者所有,如需转载,请注明出处:https://www.nxrte.com/jishu/9027.html

(2)

相关推荐

发表回复

登录后才能评论