如何在Expo React Native应用程序上部署WebRTC

如果你是一个React Native开发者，你很可能听说过Expo。事实上，我敢说你肯定听说过Expo。Expo CLI极大地简化了原生应用的构建、测试和发布，Expo CLI已经取代React Native CLI成为构建原生应用的默认环境。

Expo在框架设计上采取了一种非常有主见的方法；它特别优先考虑测试的简易性、代码整合和标准化。Expo在所有这些方面都取得了成功；在Expo中，构建一个简单的移动应用（如记事本应用）轻而易举。但在Expo刚开始的时候，兼容性问题阻碍了它的发展。在很长一段时间内，每当开发人员需要一个本地软件包或第三方插件……问题就出现了。

Expo与Expo核心生态系统之外的软件包不兼容。从技术上讲，如果开发者愿意 “弹出 “他们的Expo应用程序（一个花哨的导出功能），他们可以包含软件包；然而，这个过程实际上破坏了Expo最初的好处，因为弹出的应用程序必须通过Xcode/Android Studio编译，而不能访问Expo的测试工具包。WebRTC是Expo设计的牺牲品之一。WebRTC是基于网络的实时视频和音频通信的主要框架，需要本地工具包来利用摄像头和麦克风设备。由于Expo无法在不弹出的情况下支持本地工具包，因此它并不适合WebRTC应用程序。

值得庆幸的是，Expo的弹出时代已经成为过去。Expo已经有了显著的发展和改进。通过Expo开发构建和Expo配置插件，可以实现更多的功能。特别是，WebRTC和Expo终于可以合作了。今天，我们将揭示为什么2023 Expo是构建WebRTC产品的绝佳环境。

为什么选择Expo？

让我们来探讨为什么Expo是构建React Native应用程序的绝佳环境。特别是，让我们来揭示它是如何加速开发的。

什么是Expo？

Expo是一个React Native环境，可以轻松地构建、测试和部署从iOS到Android的所有设备的应用程序。Expo不是React Native的竞争对手；相反，它是一个有主见的React Native环境和工具包。Expo接管了代码组织过程、构建工作流和发布过程。Expo能够比React Native更好地整合iOS和Android开发的代码。而且，最大的好处之一就是它不需要Xcode或Android Studio就能工作（与React Native不同）。然而，需要注意的是，有时您需要使用EAS-Expo Application Service，它可以在使用原生代码的情况下在云上构建项目。

什么是Expo Go？

Expo的标志性功能之一是一个预构建的iOS和Android应用程序，名为Expo Go，可在两个应用程序商店中使用。使用Expo Go，开发人员可以通过无线本地网络连接部署其应用程序的更新；Expo处理加载和启动新构建的JavaScript应用程序捆绑包，并利用JavaScript Hermes引擎来执行它。

Expo Go是Expo成功背后的核心理念之一；有了Expo Go，向应用程序推送更新变得更加容易。Expo Go类似于Web应用程序开发人员使用webpack模块捆绑程序构建应用程序。然而，由于Expo Go是分布在各个应用商店的基础测试应用，而不是根据每个应用商店的需求进行个性化定制，因此存在一些实际的局限性。

Expo Go的局限性

Expo Go不能访问本地库或第三方插件，因为它们没有包含在原始的Expo Go源代码中。更具体地说，Expo Go只是简单地加载和启动JavaScript bundle，然后使用类似于消息传递的技术来访问第三方插件和本地库。由于Expo Go的捆绑包中不包含这些包，因此它无法执行本地代码。

Expo 引入了 Expo 开发构建和 Expo 配置插件来解决这个问题。

什么是Expo开发版？

为了解决这个问题，Expo推出了 Expo 开发版。Expo开发版允许开发人员扩展代码库，以发布他们自己的个性化应用程序。通过开发构建版，开发者可以创建一个类似于Expo Go的测试应用程序，并捆绑他们所需的插件。唯一缺少的功能是开发构建版没有Expo Go的开箱即用的分发功能；Expo Go可以很容易地从应用商店下载，而Expo开发构建版则需要手动分发。

然而，由于分发开发构建与分发专有的开发工具包并没有太大的区别，它是解决困扰Expo多年的问题的一个精明的解决方案。

什么是Expo配置插件？

Expo配置插件使开发人员能够扩展应用程序配置，并自定义应用程序的预构建过程。它们允许第三方创建适合Expo的插件。许多配置插件是对本地代码的封装。通过配置插件，开发人员可以自定义预构建过程，从而使本地模块包含在应用程序二进制文件中。

Expo配置插件和Expo开发构建协同工作，使整个Expo工作流程适用于本地和第三方代码。正因为有了它们，WebRTC + Expo才成为可能。

如何在Expo中实现WebRTC

使用 WebRTC 配置插件

React Native 最流行的开源 WebRTC 插件之一是react-native-webrtc。react-native-webrtc现在与 Expo Go 兼容，对于希望在 React Native 应用程序中实现 WebRTC 的开发人员来说是一个不错的选择。然而，该插件并不提供运行 WebRTC 应用的后端基础架构，只是提供了参与 WebRTC 交换的客户端设备代码。

npm 上有一个Expo专用的react-native-webrtc安装包。您可以通过在 CLI 中执行以下命令来安装该插件：

npx expo install react-native-webrtc @config-plugins/react-native-webrtc

安装后，需要将config插件添加到Expo配置文件的plugins数组中。 这告诉 Expo 将插件包含在预构建过程中。

{
  "expo": {
    "plugins": ["@config-plugins/react-native-webrtc"]
		// ...
  }
}

值得一提的是，这在 Android 中经常会出现错误，Expo 已关闭该错误，但仍然会发生。如果您遇到这个问题，一种可能的解决方案是创建您自己的配置插件。

在应用程序中，媒体流可以由一个 React 状态变量来管理。通过访问音频和视频设备的按钮启动函数，可以在 SafeAreaView 中初始化媒体流。

import React, {useState} from 'react';
import {
  Button,
  SafeAreaView,
  View,
} from 'react-native';
import { mediaDevices, RTCView } from 'react-native-webrtc';

const App: () => React$Node = () => {
  const [stream, setStream] = useState(null);
  const start = async () => {
    if (!stream) {
      let s;
      try {
        s = await mediaDevices.getUserMedia({ video: true });
        setStream(s);
      } catch(e) {
        console.error(e);
      }
    }
  };
  return (
    <>
      <SafeAreaView>
      {
        stream &&
          <RTCView
            streamURL={stream.toURL()}
					/>
      }
      <View>
          <Button
            title = "Start"
            onPress = {start} />
        </View>
      </SafeAreaView>
    </>
  );
};

export default App;

此外，可以添加停止按钮来停止流。

import React, {useState} from 'react';
import {
  Button,
  SafeAreaView,
  View,
} from 'react-native';
import { mediaDevices, RTCView } from 'react-native-webrtc';

const App: () => React$Node = () => {
  const [stream, setStream] = useState(null);
  const start = async () => {
    if (!stream) {
      let s;
      try {
        s = await mediaDevices.getUserMedia({ video: true });
        setStream(s);
      } catch(e) {
        console.error(e);
      }
    }
  };
  return (
    <>
      <SafeAreaView>
      {
        stream &&
          <RTCView
            streamURL={stream.toURL()}
					/>
      }
      <View>
          <Button
            title = "Start"
            onPress = {start} />
        </View>
      </SafeAreaView>
    </>
  );
};

export default App;

对于已经拥有WebRTC基础架构并需要将其移植到移动应用的开发人员来说，react-native-webrtc是一个绝佳的选择。然而，对于从头开始构建的应用来说，使用一些CPaaS可能是一个更简单的选择。

最后，可以在 Expo React 应用程序中实现 WebRTC，而无需繁琐的弹出工作流程！鉴于 WebRTC 对许多音频/视频应用程序的重要性，Expo 的进步为跨平台应用程序铺平了道路。