whiteboard

这是一个轻量级NodeJS协作白板/画板工具，可轻松自定义，支持多人实时协作，适用于PC、平板和移动设备。

!start

演示白板

演示地址（每晚重置）

核心功能

• 显示远程用户绘图时的光标
• 每位用户的撤销/重做功能
• 拖放/复制粘贴图片或PDF文件（来自电脑和浏览器）
• 调整大小、移动、旋转图像并绘制到画布或背景
• 文本和便签书写
• 将白板保存为图像和JSON格式
• 绘制角度线（使用直线工具时按住Shift键）
• 绘制正方形（使用矩形工具时按住Shift键）
• 显示参与设备中的最小屏幕指示器
• 所有功能的键盘快捷键支持
• REST API接口
• 支持PC、平板和移动设备

使用该白板的项目

• Meetzi - WebRtc会议工具
• LAMS - 管理和交付在线协作学***活动
• Accelerator - WebRtc会议工具
• 你的项目可以在这里...

安装应用

你可以使用或不使用Docker运行此应用

不使用Docker

1. 安装最新NodeJs（版本≥12）
2. 克隆项目
3. 在文件夹内运行npm ci
4. 运行npm run start:prod
5. 访问 [***]

使用Docker

1. docker run -d -p 8080:8080 rofl256/whiteboard
2. 访问 [***]

开发环境

安装应用后，运行npm run start:dev启动后端和前端开发服务器，网站可通过 http://localhost:8080 访问。

默认键盘快捷键

使用键盘快捷键可提高使用白板的效率，特别适用于XP-Pen Artist、Huion Kamvas和Wacom Cintiq等交互式显示器。以下是预定义快捷键（可在./src/js/keybinds.js中自定义）：

URL参数

通过GET参数调用网站可修改白板ID或用户名：

[***]

• whiteboardid：相同ID的用户将在同一个白板上协作
• username：绘图时显示给其他用户的名称
• title：修改浏览器标签页名称
• randomid：设为true时，若未指定whiteboardid则生成随机ID
• copyfromwid：指定要复制内容的白板ID，仅当当前白板为空时复制

配置

项目的许多设置可通过简单的yaml文件进行配置，以更改行为或调整性能。

配置文件

使用自定义设置运行项目：

1. 基于config.default.yml创建config.run.yml文件
2. 修改设置
3. 使用自定义配置运行项目（将与默认配置合并）：

• 本地：node scripts/server.js --config=./config.run.yml
• Docker：docker run -d -p 8080:8080 -v $(pwd)/config.run.yml:/config.run.yml:ro rofl256/whiteboard --config=/config.run.yml

主要配置项

安全 - 访问令牌（可选）

为防止客户端滥用服务器上传文件，可在服务器启动时设置访问令牌（见配置文件）。

客户端需设置相同令牌：

客户端（无论是否使用Docker）： [***]

REST API

可通过REST API完全控制白板。访问[你的白板根URL]/apidoc/index.html探索和测试服务器版本的API。演示版API地址：DemoAPI

注意：此API较新，请确保使用最新版本的白板。

WebDAV（可选）

此功能允许用户直接将白板保存到WebDAV服务器（如Nextcloud）作为图像，无需下载。

在配置文件中设置enableWebdav: true启用。

客户端需设置参数：

客户端（无论是否使用Docker）： [***]

刷新页面后，顶部面板将显示额外的保存按钮，设置WebDav参数即可使用。

注意：大多数ownCloud/Nextcloud设置需将WebDav服务器URL设为：[***]

其他配置（性能等）

更多设置可调整，详见默认配置文件。

注意事项

• 服务器重启后白板内容会丢失，启用配置中的“enableFileDatabase”或导出白板可防止此问题。
• 无需修改whiteboard.js即可自定义布局（查看index.html和main.js）。

待办事项

• 改进文本的撤销功能可靠性

Nginx反向代理配置

在服务器配置中添加：

    location /whiteboard/ {
        proxy_set_header HOST $host;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection upgrade;
        proxy_pass [***]
    }

使白板运行在/whiteboard路径下，记得替换“你的IP”。

Apache反向代理配置

<VirtualHost example.org:443>
...
# 将/whiteboard/代理到白板容器
ProxyPass "/whiteboard/" "[***]"
ProxyPassReverse "/whiteboard/" "[***]"
...
</VirtualHost>

使白板运行在/whiteboard路径下，记得替换“你的IP”。

Nextcloud集成

1. 在服务器上安装此应用
2. 在Nextcloud中启用并进入“外部站点”应用
3. 添加链接到服务器：[***]{uid}
   可通过更改URL中的“白板名称”为每个组设置独立白板。

注意：若Nextcloud使用HTTPS，此应用需通过HTTPS提供服务，建议使用反向代理（见上文）。

（可选）在Nextcloud中设置白板图标

!start

将/doc/nextcloud_icons/中的两个图标上传到Nextcloud的“外部站点”管理部分，然后将其设置为链接的图标。

_ MIT许可证 _