videosdk rtc react sdk example下载 - videosdk rtc react sdk example源码下载

videosdk rtc react sdk example

Ai源码

1.0.0

下载

React JS 视频 SDK

在 Video SDK，我们正在构建工具来帮助公司创建世界一流的协作产品，这些产品具有实时音频/视频、云录制、RTMP/HLS 流媒体和交互 API 的功能。

？每月免费获得 10,000 分钟！现在就试试吧！

⚡️从克隆到启动 - 5 分钟内开始使用示例！

演示应用程序

很想看看它的实际效果吗？在这里查看我们的现场演示。

⚡ 快速设置

注册 VideoSDK 以获取您的 API 密钥和秘密。
熟悉 Token

？先决条件

React v16 或更高版本
节点v10 或更高版本
有效的视频 SDK 帐户

？运行示例应用程序

请按照以下步骤启动并运行示例应用程序：

第 1 步：克隆存储库

git clone https://github.com/videosdk-live/videosdk-rtc-react-sdk-example.git

第2步：设置环境变量

打开您最喜欢的代码编辑器并复制示例环境文件：

cp .env.example .env

步骤 3：配置您的`.env`文件

从您的视频 SDK 帐户生成临时令牌并更新.env文件：

 REACT_APP_VIDEOSDK_TOKEN = " YOUR_TEMPORARY_TOKEN "

第 4 步：安装依赖项

安装必要的软件包：

npm install

第 5 步：启动应用程序

宾果，是时候按下启动按钮了。

npm run start

会议特色

解锁一系列强大的功能来增强您的会议效果：

特征	文档	描述
？预呼叫设置	设置预呼叫	加入会议前配置音频、视频设备和其他设置。
⏳候车大厅	等候大厅	供参与者在加入会议之前等待的虚拟空间。
？加入会议	加入会议	允许参与者加入会议。
？离开会议	离开会议	允许参与者离开会议。
？切换麦克风	麦克风控制	在会议期间打开或关闭麦克风。
？切换相机	相机控制	在会议期间打开或关闭摄像机。
屏幕共享	屏幕共享	在通话期间与其他参与者共享您的屏幕。
？图像捕捉	图像捕捉器	从视频流中捕获其他参与者的图像，这对于视频 KYC 和身份验证场景特别有用。
？更改输入设备	开关输入设备	在不同的音频和视频输入设备之间切换。
？更改音频输出	切换音频输出	选择会议期间的音频输出设备。
优化曲目	赛道优化	提高媒体轨道的质量和性能。
聊天	会议中聊天	通过发布-订阅机制与参与者交换消息。
白板	白板	通过在共享白板上绘图和注释来进行视觉协作。
？文件共享	文件共享	在会议期间与参与者共享文件。
？记录	记录	记录会议以供将来参考。
？ RTMP 直播	RTMP 直播	将会议直播到 YouTube 或 Facebook 等平台。
实时转录	实时转录	生成会议的实时转录。
？切换远程媒体	远程媒体控制	控制远程参与者的麦克风或摄像头。
将所有参与者静音	全部静音	在通话过程中同时将所有参与者静音。
?️删除参与者	删除参与者	从会议中逐出参与者。

？关键概念

了解我们的SDK的核心组件：

Meeting - 会议代表实时音频和视频通信。
Note: Don't confuse the terms Room and Meeting; both mean the same thing ?
Sessions - 您在给定会议中花费的特定持续时间称为会话，您可以拥有特定会议 ID 的多个会话。
Participant - 参与者是指参加会议的任何人。 local participant代表您自己 (You)，而所有其他与会者都被视为remote participants 。
Stream - 流是指由local participant或remote participants发布的视频或音频媒体内容。

？代币生成

该令牌用于使用 API 创建和验证会议以及初始化会议。

Development Environment ：

您可以使用临时令牌进行开发。要创建临时令牌，请转到 VideoSDK 的仪表板。

Production Environment ：

您必须设置身份验证服务器来授权用户进行生产。要设置身份验证服务器，请查看我们的官方示例存储库。 videosdk-rtc-api-服务器-示例

？项目概况

1. 在加入屏幕上进行预呼叫设置

Components/DropDown.js ：一个下拉组件，用于选择音频输入设备（麦克风）、通过 Web Audio API 监控音频以及管理麦克风设置。
Components/DropDownCam.js ：用于选择相机设备和管理相机权限的下拉组件。
Components/DropDownSpeaker.js ：允许用户选择扬声器，使用示例声音对其进行测试，并跟踪播放进度以进行确认。
Components/NetworkStats.js ：显示实时网络统计信息，例如上传和下载速度。

2. 创建或加入会议

components/screens/JoiningScreen.js ：为用户提供创建或加入会议、管理网络摄像头和麦克风状态、选择设备（麦克风、摄像头、扬声器）、检查权限、预览视频和监控网络统计数据的选项，以确保在会议之前进行正确的设置进入会议。
api.js ：包括用于创建和验证会议的所有 API 调用。
components/MeetingDetailsScreen.js ：显示用于创建或加入会议的选项。

3. 等待画面

components/screens/WaitingToJoin.js ：在等待加入会议时显示带有消息的 Lottie 动画。此屏幕会一直显示，直到isMeetingJoined标志为 true，该标志是从使用来自@videosdk.live/react-sdk的useMeeting()初始化的meeting接收到的。

4. 与会者视图

components/ParticipantView.js ：显示单个参与者的视频，并在角落显示参与者的姓名。
components/ParticipantGrid.js ：显示主屏幕上显示的参与者网格。
meeting/components/ParticipantView.js ：管理参与者网格中将显示多少参与者。

5. 会议底栏

meeting/components/BottomBar.js
包含屏幕底部显示的按钮：
- 显示会议 ID，左侧带有复制图标按钮。
- 在中间显示录制指示器、举手按钮、麦克风按钮（带有可用麦克风列表）、网络摄像头按钮（带有可用网络摄像头列表）、屏幕共享按钮和离开会议按钮。
- 最右角包含聊天按钮和参与者计数按钮。
- 在手机、平板电脑或更小的屏幕上，底部栏会重新排序以显示离开按钮、录音按钮、麦克风/网络摄像头按钮和more actions按钮。 more actions按钮可打开包含剩余选项的抽屉。