Agora 教程｜在React Native上使用Agora RTM开发动态频道的视频聊天

Agora RTC（实时音视频）SDK可以让我们在React Native上轻松创建视频聊天App（https://www.agora.io/cn/videocall/）。我们可以通过让视频聊天室使用相同的频道名让多个用户相互交流。

如果你正在创建一个社交视频聊天App，你可能想让用户生成房间供其他用户浏览、加入和交流。你可以使用后端服务器来处理这些请求并向其他用户更新已创建的房间的信息，但这需要编写后端代码并托管你自己的服务器。

本教程中，我们将介绍通过使用Agora RTM（云信令）SDK来实现同样目标的另一种方法。我们将使用用户发送的消息来进行动态视频聊天室的创建和更新，并且使用前端代码来完成。

这样做的好处在于，当你不想建立一个后端服务器时，你可以使用消息来更新其他用户的房间状态。这种方法可以很容易地扩展到完全的房间管理，以及管理允许/拒绝一个用户、让另一个用户静音、将一个用户从房间中移除等功能。

在这个例子中，我们将使用Agora RTC SDK和Agora RTM SDK  for React Native。在写这篇文章的时候，我使用的是RTC SDK的v3.2.2和RTM SDK的v1.2.2-alpha.3。

项目概述

• 我们有一个叫 "大厅 "的RTM房间。当有人创建新房间或房间里的成员发生变化时，我们会用它来向用户发出信号。

• 我们将通过让视频聊天室中最资深的成员向其他人发送消息来实现。房间里最早的成员被认为是资深成员，稍后会有更多的介绍。

• 我们将以roomName:memberCount的形式发送消息，它可以被其他用户处理，并且在他们的应用程序状态中存储房间名和成员计数作为字典。我们将用它来渲染一个房间的列表，其中包含了成员的数量。

• 一旦我们有了列表，我们就可以通过使用RTC SDK加入房间。我们还需要监听用户的加入和离开，以更新其他人的成员数。这一点只有资深成员才能完成，以避免开销。

• 我们还需要考虑两种情况为其他用户更新房间信息。第一，当有新用户加入大厅时，每个频道中资历最深的成员会给该用户发送一条同行消息。第二，当一个频道的成员数更新时，我们会给所有连接到大厅的用户发送一条频道消息来更新他们的房间列表。

创建一个Agora账户

注册地址：声网开发者账户注册指南（https://www.agora.io/cn/community/blog/best/21344），登录后台。

导航到 "项目管理 "选项卡下的 "项目列表 "选项卡，点击蓝色的 "创建 "按钮，创建一个项目。(当提示使用App ID+证书时，只选择App ID。)App ID将在你开发应用时用来授权你的请求，而不需要生成Token。把App ID复制到安全的地方，我们一会儿就会用到它。

注意： 本指南没有实现Token鉴权，建议在生产环境中运行的所有RTE应用程序都采用Token鉴权。有关 Agora 平台中基于Token鉴权的更多信息，请参见文档“校验用户权限”（https://docs.agora.io/en/Video/token?platform=All%20Platforms）。

下载源码

你也可以选择直接跳转到代码。代码是开放源码，可以在GitHub上找到。如果自己想尝试一下，请参阅自述文件了解如何运行该应用程序的步骤。

我们的例子结构

这就是我们正在构建的应用程序的结构：

1.
2├── android
3├── components
4│ └── Permission.ts
5│ └── Style.ts
6├── ios
7├── App.tsx
8.

App.tsx

App.tsx将是进入应用程序的入口。我们的所有代码都在这个文件中。

 1import React, {Component} from 'react';
 2import {
 3  Platform,
 4  SafeAreaView,
 5  ScrollView,
 6  Text,
 7  TextInput,
 8  TouchableOpacity,
 9  View,
10} from 'react-native';
11import RtcEngine, {
12  RtcRemoteView,
13  RtcLocalView,
14  VideoRenderMode,
15} from 'react-native-agora';
16import requestCameraAndAudioPermission from './components/Permission';
17import styles from './components/Style';
18import RtmEngine from 'agora-react-native-rtm';
19
20interface Props {}
21
22/**
23 * @property appId Agora App ID as string
24 * @property token Token for the channel
25 * @property channelName Channel Name for the current session
26 * @property inCall Boolean to store if we're in an active video chat room
27 * @property inLobby Boolean to store if we're in the lobby
28 * @property input String to store input
29 * @property peerIds Array for storing connected peers during a video chat
30 * @property seniors Array storing senior members in the joined channel
31 * @property myUsername Username to log in to RTM
32 * @property rooms Dictionary to store room names and their member count
33 */
34interface State {
35  appId: string;
36  token: string | null;
37  channelName: string;
38  inCall: boolean;
39  inLobby: boolean;
40  input: string;
41  peerIds: number[];
42  seniors: string[];
43  myUsername: string;
44  rooms: {[name: string]: number};
45}
46...

我们先编写import 声明。接下来，我们为我们的应用状态定义一个接口，包含以下内容。

• appId：Agora App ID

• token：为加入频道而生成的Token。

• inCall：用于存储我们是否在活动的视频聊天室中的布尔值。

• inLobby：存储我们是否在大厅的布尔值。

• input：创建新房间时用于存储输入的字符串。

• peerIdsRTC：用于存储视频聊天室中其他用户的RTC UID的数组。

• seniors: 储存在我们之前加入视频聊天室的RTM成员的数组。

• myUsername：登录RTM的本地用户名称。

• 房间：存储房间名称及其成员数的字典。

   1      ...
   2      export default class App extends Component<null, State> {
   3      _rtcEngine?: RtcEngine;
   4      _rtmEngine?: RtmEngine;
   5      constructor(props: any) {
   6        super(props);
   7        this.state = {
   8          appId: '30a6bc89994d4222a71eba01c253cbc7',
   9          token: null,
  10          channelName: '',
  11          inCall: false,
  12          input: '',
  13          inLobby: false,
  14          peerIds: [],
  15          seniors: [],
  16          myUsername: '' + new Date().getTime(),
  17          rooms: {},
  18        };
  19        if (Platform.OS === 'android') {
  20          // Request required permissions from Android
  21          requestCameraAndAudioPermission().then(() => {
  22            console.log('requested!');
  23          });
  24        }
  25      }
  26      componentDidMount() {
  27        // initialize the SDKs
  28        this.initRTC();
  29        this.initRTM();
  30      }
  31      componentWillUnmount() {
  32        // destroy the engine instances
  33        this._rtmEngine?.destroyClient();
  34        this._rtcEngine?.destroy();
  35      }
  36 ...
  

我们定义一个基于类的组件：_rtcEngine 变量将存储RtcEngine类的实例，并且 _rtmEngine 变量将存储RtmEngine类的实例，我们可以用它来访问SDK函数。

在构造函数中，设置我们的状态变量，并申请在Android上录制音频的权限。(我们使用下面描述的 permission.ts 中的帮助函数)。当组件被挂载时，我们调用 initRTC 和 initRTM 函数，这样能使用App ID初始化RTC和RTM引擎。当组件卸载时，我们销毁我们的引擎实例。

RTC初始化

 1...
 2  /**
 3   * @name initRTC
 4   * @description Function to initialize the Rtc Engine, attach event listeners and actions
 5   */
 6  initRTC = async () => {
 7    const {appId} = this.state;
 8    this._rtcEngine = await RtcEngine.create(appId);
 9    await this._rtcEngine.enableVideo();
10
11    this._rtcEngine.addListener('Error', (err) => {
12      console.log('Error', err);
13    });
14
15    this._rtcEngine.addListener('UserJoined', (uid) => {
16      // Get current peer IDs
17      const {peerIds, inCall, seniors, channelName} = this.state;
18      // If new user
19      if (peerIds.indexOf(uid) === -1) {
20        if (inCall && seniors.length < 2) {
21          this._rtmEngine?.sendMessageByChannelId(
22            'lobby',
23            channelName + ':' + (peerIds.length + 2),
24          );
25        }
26        this.setState({
27          // Add peer ID to state array
28          peerIds: [...peerIds, uid],
29        });
30      }
31    });
32
33    this._rtcEngine.addListener('UserOffline', (uid) => {
34      const {peerIds} = this.state;
35      this.setState({
36        // Remove peer ID from state array
37        peerIds: peerIds.filter((id) => id !== uid),
38      });
39    });
40
41    // If Local user joins RTC channel
42    this._rtcEngine.addListener(
43      'JoinChannelSuccess',
44      (channel, uid, elapsed) => {
45        console.log('JoinChannelSuccess', channel, uid, elapsed);
46        this.setState({
47          inCall: true,
48        });
49      },
50    );
51  };
52...

我们使用App ID来创建我们的引擎实例。我们使用 enableVideo 方法设置视频模式下的SDK。

当我们加入频道时，RTC为每个在场的用户和后来加入的新用户触发一个 userJoined 事件。当用户离开频道时，会触发 userOffline 事件。我们使用事件监听器来更新我们的peerIds数组中的UID。我们稍后将使用这个数组来渲染其他用户的视频源。

一旦我们加入了一个频道，SDK就会触发 JoinChannelSuccess 事件。我们将状态变量 inCall 设置 为true，以渲染视频聊天用户界面。

当有新用户加入我们的视频聊天室时，如果我们是之前讨论过的资深成员，我们会用 lobby RTM频道向各频道的所有成员发送更新的用户数的频道消息。

RTM初始化

 1...
 2  /**
 3   * @name initRTM
 4   * @description Function to initialize the Rtm Engine, attach event listeners and use them to sync usernames
 5   */
 6  initRTM = async () => {
 7    let {appId, myUsername} = this.state;
 8    this._rtmEngine = new RtmEngine();
 9
10    this._rtmEngine.on('error', (evt) => {
11      console.log(evt);
12    });
13
14    this._rtmEngine.on('channelMemberJoined', (evt) => {
15      let {channelName, seniors, peerIds, inCall} = this.state;
16      let {channelId, uid} = evt;
17      // if we're in call and receive a lobby message and also we're the senior member (oldest member in the channel), signal channel status to joined peer
18      if (inCall && channelId === 'lobby' && seniors.length < 2) {
19        this._rtmEngine
20          ?.sendMessageToPeer({
21            peerId: uid,
22            text: channelName + ':' + (peerIds.length + 1),
23            offline: false,
24          })
25          .catch((e) => console.log(e));
26      }
27    });
28
29    this._rtmEngine.on('channelMemberLeft', (evt) => {
30      let {channelId, uid} = evt;
31      let {channelName, seniors, inCall, peerIds, rooms} = this.state;
32      if (channelName === channelId) {
33        // Remove seniors UID from state array
34        this.setState({
35          seniors: seniors.filter((id) => id !== uid),
36          rooms: {...rooms, [channelName]: peerIds.length},
37        });
38        if (inCall && seniors.length < 2) {
39          // if we're in call and we're the senior member (oldest member in the channel), signal channel status to all users
40          this._rtmEngine
41            ?.sendMessageByChannelId(
42              'lobby',
43              channelName + ':' + (peerIds.length + 1),
44            )
45            .catch((e) => console.log(e));
46        }
47      }
48    });
49
50    this._rtmEngine.on('channelMessageReceived', (evt) => {
51      // received message is of the form - channel:membercount, add it to the state
52      let {text} = evt;
53      let data = text.split(':');
54      this.setState({rooms: {...this.state.rooms, [data[0]]: data[1]}});
55    });
56
57    this._rtmEngine.on('messageReceived', (evt) => {
58      // received message is of the form - channel:membercount, add it to the state
59      let {text} = evt;
60      let data = text.split(':');
61      this.setState({rooms: {...this.state.rooms, [data[0]]: data[1]}});
62    });
63
64    await this._rtmEngine.createClient(appId).catch((e) => console.log(e));
65    await this._rtmEngine
66      ?.login({uid: myUsername})
67      .catch((e) => console.log(e));
68    await this._rtmEngine?.joinChannel('lobby').catch((e) => console.log(e));
69    this.setState({inLobby: true});
70  };
71...

我们用RTM发送我们的房名和会员数。我们维护了一个资深成员的数组，也就是在我们之前加入通话的成员。如果资深成员数<2，说明我们是最老的成员，负责发送信号。(本地用户也是数组的一部分）。

首先，我们附加 channelMemberJoined 和 channelMemberLeft 监听器，当用户加入或离开RTM频道时，会触发这两个监听器。当用户加入大厅频道时，如果我们是资历最深的成员，我们会给他们发送一条对等消息。如果资深成员离开当前的视频聊天频道，我们会更新数组（如果他们在我们之前到达，我们会从数组中删除他们）。如果我们是更新计数的资深成员，我们也会向大厅发送一个频道消息。

接下来，我们附加 channelMessageReceived 和 messageReceived 事件监听器， 它们分别在我们收到频道消息和对等消息时触发。我们拆分 channelName:memberCount 字符串（例如， ‘helloWorld:5’ ）， 并使用这两块数据来更新我们的字典。（例如，房间：rooms: { ‘helloWorld’: 5, ‘roomTwo’: 3 } ）。

加入一个通话

 1...
 2  /**
 3    * @name joinCall
 4   * @description Function to join a room and start the call
 5   */
 6  joinCall = async (channelName: string) => {
 7    this.setState({channelName});
 8    let {token} = this.state;
 9    // Join RTC Channel using null token and channel name
10    await this._rtcEngine?.joinChannel(token, channelName, null, 0);
11    await this._rtmEngine
12      ?.joinChannel(channelName)
13      .catch((e) => console.log(e));
14    let {members} = await this._rtmEngine?.getChannelMembersBychannelId(
15      channelName,
16    );
17    // if we're the only member, broadcast to room to all users on RTM
18    if (members.length === 1) {
19      await this._rtmEngine
20        ?.sendMessageByChannelId('lobby', channelName + ':' + 1)
21        .catch((e) => console.log(e));
22    }
23    this.setState({
24      inLobby: false,
25      seniors: members.map((m: any) => m.uid),
26    });
27  };
28...

我们定义了一个加入调用的函数，它将频道名作为参数。我们用频道名更新状态，并在RTM和RTC上使用 joinChannel 方法加入频道。

我们使用RTM上的 getChannelMembersBychannelId 方法来获取频道上用户的UID。如果我们是唯一的成员，我们就在RTM上向大厅频道发送频道消息让大家更新创建房间的信息。

离开通话

 1...
 2  /**
 3   * @name endCall
 4   * @description Function to end the call and return to lobby
 5   */
 6  endCall = async () => {
 7    let {channelName, myUsername, peerIds, seniors} = this.state;
 8    // if we're the senior member, broadcast room to all users before leaving
 9    if (seniors.length < 2) {
10      await this._rtmEngine
11        ?.sendMessageByChannelId('lobby', channelName + ':' + peerIds.length)
12        .catch((e) => console.log(e));
13    }
14    await this._rtcEngine?.leaveChannel();
15
16    await this._rtmEngine?.logout();
17    await this._rtmEngine?.login({uid: myUsername});
18    await this._rtmEngine?.joinChannel('lobby');
19
20    this.setState({
21      peerIds: [],
22      inCall: false,
23      inLobby: true,
24      seniors: [],
25      channelName: '',
26    });
27  };
28...

我们离开RTM和RTC视频聊天室频道，但保持连接到RTM的大厅频道以保持接收更新。我们通过清除 peerIds 数组、 seniors 数组和 channelName 来更新我们的状态。我们还将 inCall 设置为false， inLobby 设置为true 来渲染大厅用户界面。

渲染我们的用户界面

 1...
 2  render() {
 3    const {inCall, channelName, inLobby} = this.state;
 4    return (
 5      <SafeAreaView style={styles.max}>
 6        <View style={styles.spacer}>
 7          <Text style={styles.roleText}>
 8            {inCall ? "You're in " + channelName : 'Lobby: Join/Create a room'}
 9          </Text>
10        </View>
11        {this._renderRooms()}
12        {this._renderCall()}
13        {!inLobby && !inCall ? (
14          <Text style={styles.waitText}>Please wait, joining room...</Text>
15        ) : null}
16      </SafeAreaView>
17    );
18  }
19...

我们定义了显示按钮的渲染函数，如果我们在通话或者大厅里，就可以显示状态。

 1...
 2  _renderRooms = () => {
 3    const {inLobby, rooms, input} = this.state;
 4    return inLobby ? (
 5      <View style={styles.fullView}>
 6        <Text style={styles.subHeading}>Room List</Text>
 7        <ScrollView>
 8          {Object.keys(rooms).map((key, index) => {
 9            return (
10              <TouchableOpacity
11                key={index}
12                onPress={() => this.joinCall(key)}
13                style={styles.roomsBtn}>
14                <Text>
15                  <Text style={styles.roomHead}>{key}</Text>
16                  <Text style={styles.whiteText}>
17                    {' (' + rooms[key] + ' users)'}
18                  </Text>
19                </Text>
20              </TouchableOpacity>
21            );
22          })}
23          <Text>
24            {Object.keys(rooms).length === 0
25              ? 'No active rooms, please create new room'
26              : null}
27          </Text>
28        </ScrollView>
29        <TextInput
30          value={input}
31          onChangeText={(val) => this.setState({input: val})}
32          style={styles.input}
33          placeholder="Enter Room Name"
34        />
35        <TouchableOpacity
36          onPress={async () => {
37            input ? await this.joinCall(input) : null;
38          }}
39          style={styles.button}>
40          <Text style={styles.buttonText}>Create Room</Text>
41        </TouchableOpacity>
42      </View>
43    ) : null;
44  };
45...
46

我们使用 _renderRooms 函数来渲染一个滚动视图， 该视图在房间字典上迭代，以显示一个创建的房间列表及其成员数。用户可以点击任何房间来加入它，这就调用了 joinCall 函数。我们还渲染一个文本输入，让用户创建一个使用该输入调用相同的 joinCall 函数的房间。

 1...
 2   _renderCall = () => {
 3    const {inCall, peerIds, channelName} = this.state;
 4    return inCall ? (
 5      <View style={styles.fullView}>
 6        <RtcLocalView.SurfaceView
 7          style={styles.video}
 8          channelId={channelName}
 9          renderMode={VideoRenderMode.Hidden}
10        />
11        <ScrollView>
12          {peerIds.map((key, index) => {
13            return (
14              <RtcRemoteView.SurfaceView
15                channelId={channelName}
16                renderMode={VideoRenderMode.Hidden}
17                key={index}
18                uid={key}
19                style={styles.video}
20              />
21            );
22          })}
23        </ScrollView>
24        <TouchableOpacity onPress={this.endCall} style={styles.button}>
25          <Text style={styles.buttonText}>Leave Room</Text>
26        </TouchableOpacity>
27      </View>
28    ) : null;
29  };
30}

当我们连接到视频聊天室后，我们使用 _renderCall 函数来渲染视频。我们使用SDK中的 RtcLocalView 组件来渲染我们自己（本地用户）的视频。我们在滚动视图中使用 RtcRemoteView 来渲染用存储在 peerIds 数组中的UID 连接用户的视频。我们还会显示一个按钮来离开房间。

权限

 1import {PermissionsAndroid} from 'react-native'
 2
 3/**
 4 * @name requestCameraAndAudioPermission
 5 * @description Function to request permission for Audio and Camera
 6 */
 7export default async function requestCameraAndAudioPermission() {
 8    try {
 9        const granted = await PermissionsAndroid.requestMultiple([
10            PermissionsAndroid.PERMISSIONS.CAMERA,
11            PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
12        ])
13        if (
14            granted['android.permission.RECORD_AUDIO'] === PermissionsAndroid.RESULTS.GRANTED
15            && granted['android.permission.CAMERA'] === PermissionsAndroid.RESULTS.GRANTED
16        ) {
17            console.log('You can use the cameras & mic')
18        } else {
19            console.log('Permission denied')
20        }
21    } catch (err) {
22        console.warn(err)
23    }
24}

我们正在导出一个辅助函数，向Android操作系统申请麦克风权限。

样式

Style.ts文件包含了组件的样式。

 1import {StyleSheet} from 'react-native';
 2
 3export default StyleSheet.create({
 4  max: {
 5    flex: 1,
 6    backgroundColor: '#F7F7F7',
 7  },
 8  button: {
 9    paddingHorizontal: 16,
10    paddingVertical: 8,
11    backgroundColor: '#38373A',
12    marginBottom: 16,
13  },
14  buttonText: {
15    color: '#fff',
16    textAlign: 'center',
17  },
18  fullView: {
19    flex: 5,
20    alignContent: 'center',
21    marginHorizontal: 24,
22  },
23  subHeading: {
24    fontSize: 16,
25    fontWeight: '700',
26    marginBottom: 10,
27  },
28  waitText: {
29    marginTop: 50,
30    fontSize: 16,
31    fontWeight: '700',
32    textAlign: 'center',
33  },
34  roleText: {
35    textAlign: 'center',
36    // fontWeight: '700',
37    color: '#fbfbfb',
38    fontSize: 18,
39  },
40  spacer: {
41    width: '100%',
42    padding: '2%',
43    marginBottom: 32,
44    // borderWidth: 1,
45    backgroundColor: '#38373A',
46    color: '#fbfbfb',
47    // borderColor: '#38373A',
48  },
49  input: {
50    height: 40,
51    borderColor: '#38373A',
52    borderWidth: 1.5,
53    width: '100%',
54    alignSelf: 'center',
55    padding: 10,
56    marginBottom: 10,
57  },
58  roomsBtn: {
59    padding: 8,
60    marginBottom: 4,
61    backgroundColor: '#38373A',
62  },
63  roomHead: {fontWeight: 'bold', color: '#fff', fontSize: 16},
64  whiteText: {color: '#fff'},
65  video: {width: 150, height: 150},
66});

下一步是什么？

同样的技术可以用来传达其他信息，比如连接的用户名称、房间描述和房间标题。我们甚至可以使用同样的机制，通过发送一个RTM消息把用户踢出通话，当评估时，调用远程用户设备上的离开频道方法。

结论

您已经看到了我们如何利用Agora RTM SDK来分享信息和动态创建视频聊天室。您可以查阅Agora React Native API参考（https://docs.agora.io/cn/Video/API%20Reference/react_native/index.html）来了解可以帮助您快速为下一个实时参与应用程序添加更多功能的方法。