声网在 GitHub 上提供一个开源的视频通话示例项目 Agora-RN-Quickstart,本文介绍如何快速跑通该示例项目,体验声网视频通话效果。
如果你的目标平台为 iOS,你的开发环境需要满足以下需求:
如果你的目标平台为 Android,你的开发环境需要满足以下需求:
一个有效的声网开发者账号。
参考以下步骤创建一个声网项目:
声网会给每个项目自动分配一个 App ID 作为项目唯一标识。
在声网控制台的项目管理页面,找到你的项目,点击 App ID 右侧的 图标,即可获取项目的 App ID。
为提高项目的安全性,声网推荐使用 Token 对即将加入频道的用户进行鉴权。
为了方便测试,声网控制台提供生成 RTC 临时 Token 的功能。参考以下步骤获取 RTC 临时 Token:
testroom
,然后点击生成。后续调用 API 加入频道时,请确保填入的频道名与这里的频道名一致。下载 Agora-RN-Quickstart 仓库。打开 Agora-RN-Quickstart-master/App.tsx
文件并填入获取到的项目 App ID,临时 Token 和频道名。
constructor(props) {
super(props)
this.state = {
// 把 YourAppId 替换成你的 App ID,并加引号,如'xxxxxx'。
// 把 YourToken 替换成你的临时 Token,并加引号,如'xxxxxxxxx'。
// 将频道名 channel-x 替换为生成临时 Token 时使用的频道名。
appId: YourAppId,
token: YourToken,
channelName: 'channel-x',
joinSucceed: false,
peerIds: [],
}
在项目根目录下运行 npm install
或 yarn
命令安装依赖项。
如果目标平台为 iOS,在 Agora-RN-Quickstart-master/ios
路径下执行 pod install
。
运行示例项目。
运行 Android 应用:
启动 Android 模拟器或连接真机,在项目根目录下执行 npx react-native run-android
运行应用。
运行 iOS 应用:
npx react-native run-ios
运行应用。(该方法仅支持在模拟器上运行项目。)Agora-RN-Quickstart-master\ios\AgoraRNQuickstart.xcworkspace
文件夹,启动模拟器或连接真机,点击 Build and run 按钮。下表列出示例项目的代码结构,你可以参考示例项目的代码,根据自己的需求进行调整。
.
├── android
├── components
│ └── Permission.ts
│ └── Style.ts
├── ios
├── App.tsx
├── index.js
.
文件/文件夹 | 描述 |
---|---|
android |
原生 Android 项目文件夹 |
components/Permission.ts |
声明组件所需的设备权限 (仅适用于 Android 平台) |
components/Style.ts |
定义组件的样式 |
ios |
原生 iOS 项目文件夹 |
App.tsx |
示例项目默认显示内容的源码文件 |
index.js |
React Native 项目的入口文件 |
如果运行项目时遇到 Error: listen EADDRINUSE: address already in use :::8081
报错,表示端口号 8081 被占用,你可以尝试更换端口号并重新运行项目。
运行 Android 应用:
npx react-native run-android --port xxxx
运行 iOS 应用:
Agora-RN-Quickstart-master\ios\AgoraRNQuickstart.xcworkspace
文件夹,连接模拟器或真机,点击 Build and run 按钮。