React Native如何接入直播功能(基于ZEGO React Native直播SDK开发)

使用 React Native 构建直播应用是为用户提供交互式实时体验的绝佳方式。React Native 的跨平台特性与丰富的库生态系统，使其成为开发流媒体应用的理想选择。无论您计划直播活动、举办虚拟会议，还是创建内容创作者平台，本文将为您展示如何接入 ZEGO React Native 直播 SDK 以在应用中实现直播功能。

为何选择 ZEGO SDK？

在 React Native 直播领域，ZEGO 凭借无缝集成、强大功能和可靠性脱颖而出。开发者可通过其文档完善的 SDK 和简洁 API，快速为 React Native 应用注入高质量直播能力。

使用 ZEGO SDK 的核心优势：

• 低延迟直播：提供超低延迟的直播服务，确保流畅无卡顿的实时互动体验。
• 可扩展性与稳定性：平台专为应对海量观众与高流量设计，性能始终如一。
• 丰富的视听功能：从自适应码率流媒体到高级音频特效，全面提升观看与直播体验。
• 跨平台支持：虽针对 React Native 优化，但 ZEGO 解决方案亦可无缝适配其他平台，轻松维持一致的流媒体质量。
• 全面文档与支持：开发者可受益于清晰详尽的指南和响应迅速的技术支持，降低学习成本并加速实施进程。

如何在 React Native 应用中接入直播功能

前提条件

在实现基本的超低延迟直播功能之前，请确保：

• 已在项目中集成 ZEGO SDK，详情请参考 快速开始 – 集成。
• 注册 ZEGO 账户，在控制台创建项目，并申请有效的 AppID，详情请参考 控制台 – 项目管理 中的“项目信息”。
• 在控制台开通“超低延迟直播功能”。

实现流程

用户通过 ZEGO SDK 进行视频直播的基本流程为：

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

初始化

• 创建界面：包括本地预览窗口、远端视频窗口和结束按钮)，如有请忽略。

• 创建引擎：

调用 createEngineWithProfile 接口，将申请到的 AppID 和 AppSign 传入参数 “appID” 和 “appSign”，创建引擎单例对象。

• 设置回调

创建引擎后，您可以通过引擎实例的on方法注册回调。

登录房间

• 生成 Token

开发者可在ZEGO 控制台获取临时 Token（有效期为 24 小时），详情请参考 控制台 – 开发辅助。

1. 登录

您可以调用 loginRoom 接口登录房间。如果房间不存在，调用该接口时会创建并登录此房间。

roomID 和 user 的参数由您本地生成，但是需要满足以下条件：

• 同一个 AppID 内，需保证 “roomID” 全局唯一。
• 同一个 AppID 内，需保证 “userID” 全局唯一，建议开发者将 “userID” 与自己业务的账号系统进行关联。

let roomConfig = new ZegoRoomConfig();
// 如果您使用 appsign 的方式鉴权，token 参数不需填写；如果需要使用更加安全的 鉴权方式： token 鉴权，请参考[如何从 AppSign 鉴权升级为 Token 鉴权](https://doc-zh.zego.im/faq/token_upgrade?product=ExpressVideo&platform=all)
// roomConfig.token = "xxxx";
// 只有传入 “isUserStatusNotify” 参数取值为 “true” 的 ZegoRoomConfig，才能收到 onRoomUserUpdate 回调。
roomConfig.isUserStatusNotify = true;
// 登录房间
// 开始登录房间
ZegoExpressEngine.instance().loginRoom('room1', {'userID': 'id1', 'userName': 'user1'}, roomConfig);

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

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

// 以下为常用的房间相关回调

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会通过该回调通知
});

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

1. （可选）主播预览自己的画面

如果希望看到本端的画面，可调用 startPreview 接口设置预览视图，并启动本地预览。

import { findNodeHandle } from 'react-native';

// 取一个react 的 ref
let localViewRef = findNodeHandle(this.refs.zego_preview_view);

// 启动本地预览
ZegoExpressEngine.instance().startPreview({
    'reactTag': localViewRef,
    'viewMode': 0,
    'backgroundColor': 0
});

// react render
render() {
    return (
        <View>
            <ZegoTextureView ref='zego_preview_view'/>
        </view>
    )
}

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

在用户调用 loginRoom 接口后，可以直接调用 startPublishingStream 接口，传入 “streamID”，将自己的音视频流推送到 ZEGO 音视频云。您可通过监听 publisherStateUpdate 回调知晓推流是否成功。

“streamID” 由您本地生成，但是需要保证：

同一个 AppID 下，“streamID” 全局唯一。如果同一个 AppID 下，不同用户各推了一条 “streamID” 相同的流，后推流的用户推流失败。

此处示例在调用 loginRoom 接口后立即进行推流。在实现具体业务时，您可选择其他时机进行推流，只要保证先调用 loginRoom 即可。

// 用户调用 loginRoom 之后再调用此接口进行推流
// 在同一个 AppID 下，开发者需要保证“streamID” 全局唯一，如果不同用户各推了一条 “streamID” 相同的流，后推流的用户会推流失败。
ZegoExpressEngine.instance().startPublishingStream("streamID");

拉取主播的音视频

进行直播时，我们需要拉取到主播的音视频。超低延迟直播拉流的延迟在 1s 以内，更能实现超低延迟、超强同步、抗极端弱网、超低卡顿、超清画质、首帧秒开的极致直播体验。

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

我们可以在该回调中，调用 startPlayingStream 接口，传入 “streamID” 拉取播放该用户的音视频。您可通过监听 playerStateUpdate 回调知晓是否成功拉取音视频。您可以使用如下拉流方式。

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

import { findNodeHandle } from 'react-native';

// 取一个react 的 ref
let playViewRef = findNodeHandle(this.refs.zego_play_view);

// react render
render() {
    return (
        <View>
            <ZegoTextureView ref='zego_play_view'/>
        </view>
    )
}

// 房间内其他用户推流/停止推流时，我们会在这里收到相应流增减的通知
ZegoExpressEngine.instance().on('roomStreamUpdate', (roomID, updateType, streamList) => {
    if (updateType == ZegoUpdateType.Add) {
        // 这里为了使示例代码更加简洁，我们只拉取新增的音视频流列表中第的第一条流，在实际的业务中，建议开发者循环遍历 streamList ，拉取每一条音视频流
        var stream = streamList[0];
        var canvas = {
            'reactTag': playViewRef,
            'viewMode': 0,
            'backgroundColor': 0
        }
        var config = {'resourceMode': ZegoStreamResourceMode.OnlyL3};
        // 开始拉流
        ZegoExpressEngine.instance().startPlayingStream(stream.streamID, canvas, config);
    }
});

调试超低延迟直播功能

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

接下来就是停止推送/拉取音视频流、退出房间和销毁引擎等，这里不一一介绍，详细操作可参考文档：快速实现超低延迟直播

结论

综上所述，使用 ZEGO React Native 直播 SDK 构建直播应用使开发者能够利用一个兼具灵活性、高效性及丰富库生态系统的强大框架。遵循本文所述您将能够打造出响应迅速且引人入胜的直播体验。随着技术不断演进，持续运用最新的 React Native 更新和直播技术优化应用程序，将确保您的应用始终处于数字交互的前沿。

常见问题

Q1：如何使用 React Native 构建直播应用？

要使用 React Native 构建直播应用，您可以使用原生组件，也可以选择像 ZEGO 这样的第三方直播 SDK。将 SDK 集成到您的 React Native 项目中，设置必要的摄像头和麦克风访问权限，然后创建组件来处理视频流和流媒体逻辑。

Q2：在 React Native 直播应用中，管理性能的最佳实践是什么？

为提升性能，请确保使用硬件加速优化视频编码和解码。尽可能降低分辨率和帧速率，减少不必要的重新渲染，并高效管理应用程序状态，以避免直播过程中出现性能瓶颈。

Q3：在 React Native 中集成直播面临哪些挑战？

挑战包括确保跨平台兼容性、管理低延迟和高质量流、优化移动设备的性能、处理不同的网络条件以及在 React Native 环境中顺利集成第三方 SDK。