使用 Agora 进行 React Native 视频聊天的云录制 - 专栏

cloud-recording-for-react-native-video-chat-agora1024×512 169 KB

Agora云录制使开发人员可以轻松地从他们的实时互动应用程序中录制和存储视频。我们将学习如何将云录制添加到 React Native 视频聊天应用程序。在本教程结束时，你能够将来自应用程序的视频通话记录并保存到 Amazon S3 存储桶以供以后访问。

要求

Agora 开发者帐户（请参阅如何注册使用声网Agora SDK）
一个 AWS 账户
用于部署后端的 Heroku 帐户或其他服务

构造

cloud-recording-for-react-native-video-chat-1

我们将部署一个 Golang 服务器并使用 REST API 来处理 React Native APP的请求。Golang 服务器将在内部管理调用 Agora云录制服务，该服务将结果存储在 Amazon S3 存储桶中。

如果你之前没有部署过后端服务或使用过 Golang，不要担心。

设置Agora

创建项目 ：拥有 Agora 帐户后，单击控制台中的项目管理选项卡。单击创建按钮，为项目输入一个名称，创建项目时选择安全模式。
启用云录制 ：单击查看使用情况按钮并选择启用云录制的选项。
获取应用凭据 ：将应用 ID 和应用证书从同一页面复制到文本文件。我们稍后会用到这些。
获取客户凭据 ：访问 RESTful API 页面并单击添加Secret按钮。将客户 ID 和客户密码复制到文本文件中。

AWS设置

创建 AWS 账户后，我们需要创建一个 Amazon S3 存储桶来存储我们的视频录制以及一个 IAM 用户来访问我们的存储桶。如果你已经完成此设置，可随时跳过本节。

转到 AWS IAM 控制台并创建一个用户。使用程序化访问添加 AmazonS3FullAccess 策略。
将AWS 访问密钥和Secret密钥复制到文本文件。
创建一个 Amazon S3 存储桶并将存储桶名称复制到你的文本文件中。要查找你的区域编号（针对AWS 区域），请转到表并单击 Amazon S3选项卡。例如，如果你正在使用 US_EAST_1 区域，则你的存储桶编号为 0。

部署后端

在部署后端之前，我们需要以下变量（是时候使用我们的文本文件了）。我们将使用 Heroku 一键部署，让我们的后端启动和运行变得非常简单。你也可以使用其他服务：

APP_ID=
APP_CERTIFICATE=
RECORDING_VENDOR=
RECORDING_REGION=
BUCKET_NAME=
BUCKET_ACCESS_KEY=
BUCKET_ACCESS_SECRET=
CUSTOMER_ID=
CUSTOMER_CERTIFICATE=

注意：对于 AWS，RECORDING_VENDOR=1。访问此 云端录制 RESTful API 了解更多信息。

如果你还没有账户的话，要在 Heroku上创建一个账户。
单击此链接使用 Heroku 一键部署。
输入变量并单击页面底部的 部署APP 按钮。
稍等片刻。部署完成后，将后端 URL 保存在一个文本文件中，我们将在APP中使用该文件。

创建我们的APP

我们将使用本博客中的示例APP。如果你是 Agora 平台的新手小白，我建议你通读博客以了解如何构建视频聊天APP。我们将以此为基础，讨论如何向其添加云记录。

如果你只想要最终的APP，你可以进入 GitHub示例项目仓库。

获取样板

确保你已满足创建和构建 React Native 应用程序的要求。从主分支Git克隆或下载ZIP文件。在项目目录中，安装npm。如果你在 iOS系统上创建，还要安装cd ios && pod。

添加凭据

打开 App.tsx 并输入后端 URL、Agora 应用 ID 和频道名称到APP平台（此时，你可以忽略 typescript错误 ）。频道名称可以是任何字母数字字符串（例如： 'test' ）：

...
    this.state = {
      appId: '<YourAppId>',
      URL: '<YourBackendURL>',
      channelName: 'test',
      joinSucceed: false,
      peerIds: [],
      rid: null,
      sid: null,
      recUid: null,
    };
...

我们还将添加一个用于记录的三个新状态变量 rid ， sid 和 recUid 。

加入我们的频道

让我们编辑 join channel法以使用来自后端的token：

startCall = async () => {
    let that = this;
    fetch(URL + '/api/get/rtc/test')
      .then(function (response) {
        response.json().then(async function (data) {
          await that._engine?.joinChannel(
            data.rtc_token,
            that.channelName,
            null,
            data.uid,
          );
        });
      })
      .catch(function (err) {
        console.log('Fetch Error', err);
      });
  };

我们使用 Fetch API 从服务器获取token，然后将它加入频道。

开始录音

我们将创建一个函数来启动录制：

...
  startRecording = async () => {
    let that = this;
    fetch(URL + '/api/start/call', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({channel: that.channelName}),
    })
      .then(function (response) {
        response.json().then(async function (res) {
          let data = res.data;
          that.setState({recUid: data.uid, sid: data.sid, rid: data.rid});
        });
      })
      .catch(function (err) {
        console.log('Fetch Error', err);
      });
  };
...

我们将再次使用 Fetch API 向后端的 /api/start/call 路由发送 POST 请求。我们将在请求正文中发送频道名称。一旦得到的回应，我们将从响应中用 rid 、 sid 以及 recUid 更新我们的状态。

停止录音

要停止录制，我们需要通过频道发送一个 POST 请求到我们后端的 /api/stop/call 路线，后端正文中带有 channel 、 rid 、 sid 和 recUid ：

...
  stopRecording = async () => {
    fetch(URL + '/api/stop/call', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        channel: channelName,
        rid: this.state.rid,
        sid: this.state.sid,
        uid: this.state.recUid,
      }),
    })
      .then(function (response) {
        response.json().then(async function (data) {
          console.log(data);
        });
      })
      .catch(function (err) {
        console.log('Fetch Error', err);
      });
  };
...

获取状态

让我们创建一个函数来检查我们的录音状态并将其记录到控制台：

...
  query = async () => {
    fetch(URL + '/api/status/call', {
      method: 'POST',
      body: JSON.stringify({rid: this.state.rid, sid: this.state.sid}),
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .then(function (response) {
        response.json().then(async function (data) {
          console.log(data);
        });
      })
      .catch(function (err) {
        console.log('Fetch Error', err);
      });
  };
...

添加按钮

让我们添加一些按钮来执行我们的录音功能：

...
          {this.state.joinSucceed ? (
            <View style={styles.buttonHolder}>
              <Text style={styles.recordingText}>Recording:</Text>
              <TouchableOpacity
                onPress={this.startRecording}
                style={styles.button}>
                <Text style={styles.buttonText}> Start </Text>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={this.stopRecording}
                style={styles.button}>
                <Text style={styles.buttonText}> End </Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={this.query} style={styles.button}>
                <Text style={styles.buttonText}> Query </Text>
              </TouchableOpacity>
            </View>
          ) : (
            <></>
          )}
          {this._renderVideos()}
...

现在你可以在设备上执行 npm run android 或 npm run ios 启动该APP了，一旦你单击开始录制按钮，几秒钟后你就应该能在S3 存储桶中看到你的视频聊天片段了。

结论

就是这样，现在你已经有一个能使用 Agora 云录制来存储你视频聊天的APP了。你可以在合并单流录制获得的音频和视频文件了解如何合并生成视频片段，也可以在云端录制找到有关云录制的更多信息。

原文作者 Ekaansh Arora
原文链接 https://www.agora.io/en/blog/cloud-recording-for-react-native-video-chat-using-agora/