使用React Native构建跨平台视频直播应用教程

使用 React Native 创建多平台视频和语音通话应用，可以帮助开发团队通过单一代码库节省维护和更新应用的时间。它提供了一种更快速、更经济有效的方式来构建具有原生体验的 Android 和 iOS 应用。

本指南将帮助您使用 React Native 在 iOS 和 Android 应用中创建或集成实时视频流功能，使人们可以互动、聊天并一起观看活动。您将学习如何轻松地将类似 Facebook Live 的应用内直播流添加到现有应用中，或像 Twitch 那样构建一个独立的应用。本教程的知识将帮助您快速在游戏、音乐、体育和脱口秀等应用中实现实时活动广播。

开始之前：准备工作和示例

您可以获取示例代码用于建立连接和实时视频渲染。要跟随本教程，您需要配置好 React Native 开发环境，包括安装 Xcode、VS Code、Android Studio 和命令行终端工具。此外，为了实现实时对话的广播功能，我们需要安装 Stream 的 React Native Video SDK，它可以帮助开发者构建跨平台的虚拟事件流应用。

第一步：创建新的 React Native 项目

通过命令行工具，使用以下命令创建一个新的 React Native 项目。

npx react-native@latest init Livestream

上述命令将使用最新的 React Native 模板生成一个名为 “Livestream” 的新项目。

第二步：安装 Stream Video SDK 及其依赖

在 VS Code 中打开项目，并通过终端安装核心的 React Native 视频 SDK 及其 WebRTC 依赖。

yarn add @stream-io/video-react-native-sdk @stream-io/react-native-webrtc

视频 SDK 还需要一些对等库来提供完整功能：

• React Native In-Call Manager: 提供关于呼叫相关操作（如静音、来电/去电）的信息。
• react-native-svg: 提供可伸缩矢量图形支持。
• NetInfo: 提供 iOS 和 Android 上的网络连接状态信息。
• Notifee: 用于处理 VoIP 推送通知。
  使用以下命令安装这些依赖：

yarn add react-native-incall-manager@4.1.0
yarn add react-native-svg
yarn add @react-native-community/netinfo@9.3.9
yarn add @notifee/react-native@7.7.1

第三步：配置 iOS 和 Android 平台设置

我们需要根据平台要求进行特定配置，包括设置摄像头、麦克风权限以及 Java SDK 版本。

iOS 配置

1. 在 AppDelegate.mm 文件中导入 SDK 并调用设置方法：

   #import "StreamVideoReactNative.h"
   // 在 didFinishLaunchingWithOptions 方法中添加
   [StreamVideoReactNative setup];
   

2. 在 Info.plist 文件中添加摄像头和麦克风的使用权限描述，以便应用首次启动时向用户请求授权。

Android 配置

1. 在 MainApplication.kt 文件中导入 SDK 并调用设置方法。
2. 在 AndroidManifest.xml 文件的 <manifest> 标签内，添加相机、麦克风、网络和蓝牙等必要的权限声明。
3. 在 app/build.gradle 文件的 android 部分中，配置 Java 的编译兼容版本。
4. 可选地，在 gradle.properties 文件中关闭 desugaring 功能以防止潜在的不兼容问题。

第四步：实现直播功能

完成基础配置后，我们将实现在 iOS 或 Android 设备上进行直播的核心功能。在 App.tsx 文件中，我们需要执行以下步骤：

1. 导入 Stream Video React Native SDK。
2. 创建并初始化用户对象。
3. 使用 API 密钥、用户和令牌创建视频客户端。（您需要拥有 Stream 账户以获取 API 密钥，测试时可以使用其令牌生成器服务创建临时用户凭证。）
4. 创建并加入一个直播通话。

核心代码结构示例如下，其中包含了创建用户、初始化客户端、建立通话并加入的逻辑：

import React from 'react';
import { StreamCall, StreamVideo, StreamVideoClient, User } from '@stream-io/video-react-native-sdk';
import { SafeAreaView, View, StyleSheet } from 'react-native';

const apiKey = ''; // 从 “Credentials” 部分获取
const token = ''; // 从 “Credentials” 部分获取
const userId = ''; // 从 “Credentials” 部分获取
const callId = ''; // 从 “Credentials” 部分获取

const user: User = {
  id: userId,
  name: 'Santhosh',
  image: `https://getstream.io/random_png/?id=${userId}&name=Santhosh`,
};

const myClient = new StreamVideoClient({ apiKey, user, token });
const myCall = myClient.call('livestream', callId);
myCall.join({ create: true });

export default function App() {
  return (
    <StreamVideo client={myClient} language='en'>
      <StreamCall call={myCall}>
        <SafeAreaView style={{ flex: 1 }}>
          {/* 直播UI组件将在这里渲染 */}
        </SafeAreaView>
      </StreamCall>
    </StreamVideo>
  );
}

第五步：渲染主播视频

成功建立通话连接后，下一步是渲染并观看主播的视频流。这利用了选择性转发单元（SFU）技术在全球复制直播流，以实现大规模扩展。
我们需要更新 UI 组件，使用 SDK 提供的 VideoRenderer 和状态钩子来显示视频和通话状态（如参与者数量、直播状态）。
更新后的 LivestreamUI 组件示例如下，它展示了如何渲染本地参与者的视频，并提供开始/停止直播的按钮：

import { useCall, useCallStateHooks, useIncallManager, VideoRenderer } from '@stream-io/video-react-native-sdk';
import { Button, Text, View, StyleSheet } from 'react-native';

const LivestreamUI = () => {
  const call = useCall();
  const { useParticipantCount, useLocalParticipant, useIsCallLive } = useCallStateHooks();
  const totalParticipants = useParticipantCount();
  const localParticipant = useLocalParticipant();
  const isCallLive = useIsCallLive();

  useIncallManager({ media: 'video', auto: true }); // 自动将音频路由到扬声器

  return (
    <View style={styles.flexed}>
      <Text style={styles.text}>在线观众: {totalParticipants}</Text>
      <View style={styles.flexed}>
        {localParticipant && <VideoRenderer participant={localParticipant} trackType='videoTrack' />}
      </View>
      <View style={styles.bottomBar}>
        {isCallLive ? (
          <Button onPress={() => call?.stopLive()} title='停止直播' />
        ) : (
          <Button onPress={() => call?.goLive()} title='开始直播' />
        )}
      </View>
    </View>
  );
};

第六步：在设备上运行应用

正确设置 React Native CLI 后，您可以在设备上运行应用。

• 在 iOS 上运行：在 Xcode 中打开项目的 .xcworkspace 文件，设置好团队和捆绑标识符，连接设备后点击运行按钮即可。
• 在 Android 上运行：确保已安装 Android 13 (Tiramisu) SDK。在 Android Studio 中连接设备，然后点击运行按钮。

后续方向

本教程介绍了使用 React Native 为 iOS 和 Android 构建直播视频流应用的基础知识。您可以进一步探索高级功能，例如添加推送通知、管理共同主持人、集成屏幕录制、聊天和自定义事件等，以丰富应用的功能和用户体验。