【源码】基于 React 框架的互动白板系统

项目简介

netless-react-whiteboard 是 netless 提供的 web 实践项目，借助 React 前端框架和 Typescript 编程语言开发。此项目旨在让用户更具体地了解 netless 白板的功能和应用场景，且项目易于维护和迭代。项目集成了互动白板、云存储以及音视频通讯服务，提供了丰富的协作功能。

项目的主要特性和功能

1. 互动白板：采用 netless 自研的互动白板，支持多人实时在线协作，可进行涂鸦、书写、标注等操作。
2. 云存储：利用阿里云的云存储服务，实现互动白板的图片、PPT 等静态资源的存储。
3. 音视频通讯：接入声网的音视频通讯服务，实现实时的音视频通信功能。

安装使用步骤

前提条件

1. 确保已安装 node >= 8。
2. 可以使用 npm 或者 yarn 管理依赖库，以下示例使用 yarn。

具体步骤

1. 获取项目源码：可自行下载本项目的源码文件。
2. 进入项目目录 shell cd netless-react-whiteboard
3. 安装依赖 shell yarn

4. 填写配置文件 需要接入三个类型的云服务，获取对应的 token 并填写到 appTokenConfig.ts 文件中： ```typescript export const netlessToken = "xxx";

   export const ossConfigObj = { accessKeyId: "xxx", accessKeySecret: "xxx", region: "oss-cn-xxx", bucket: "xxx", folder: "xxx", prefix: "https://xxx.oss-cn-xxx.aliyuncs.com/", };

   export const rtcAppId = "xxx"; ``` - 白板 Token：用于白板的权限管理，从 https://console.herewhite.com/zh-CN/ 获取。 - 云存储 Token：用于存储互动白板的静态资源，从 https://oss.console.aliyun.com/overview 获取。 - 音视频 Token：用于音视频实时通信，从 https://dashboard.agora.io/ 获取。

   注意：以上 token 是用户的核心资产，正式商用时请妥善保管。 5. 启动项目 shell yarn dev 6. 构建项目 shell yarn build

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】