@m-fe/whiteboard
TypeScript icon, indicating that this package has built-in type declarations

0.0.4 • Public • Published

Design Principles

Web whiteboard screencasting(both live and playback mode) with background slides, can be used as a graphics tablet for online tutoring or remote collaboration.

You can try it in online demo.

演示者视图

学生视图

仅在 WhiteBoard 与 WhitePage 级别提供了事件的响应,而在 Drawboard 与 Marker 级别提供了事件的触发。事件类型分为 Snapshot(snap)与 Key Actions(ka)两种。

Mushi-Chat 中,我们使用了简单的 WebSocket 来透传转发即可:

const wsEventHub = new EventEmitter();

if (isPresenter) {
  wsEventHub.on('sync', data => {
    if (data.event === 'finish') {
      // 单独处理结束事件
      if (typeof callback === 'function') {
        callback();
      }
    }
    const msg = {
      from: `${currentUser.id}`,
      type: 'room',
      to: `${chatroom.room_id}`,
      msg: {
        type: 'cmd',
        action: 'whiteboard/sync',
        message: JSON.stringify(data)
      }
    };
    socket.sendMessage(msg);
  });
} else {
  socket.onMessage(([data]) => {
    const {
      msg: { type, message }
    } = data;

    if (type === 'whiteboard/sync') {
      wsEventHub.emit('sync', JSON.parse(message));
    }
  });
}

回放视图

Todos

  • [x] 结构化事件信息,添加绝对时间戳以适应重放的需求;将 WhitePage 中的事件响应统一提取到 Whiteboard 中。
  • [x] 引入全量的状态订正,每 5 秒订正一次,设置线性 Marker 的全量同步规则
  • [x] 设置矩形类 Marker 的全量同步规则,设置仅全量同步模式
  • [x] 将白板划分为 Whiteboard, MirrorWhiteboard, ReplayWhiteboard 三种模式,开始编写录播模式,修复增量同步与全量同步冲突的问题。
  • [x] 根据获得到的事件的时间进行重播,完善录播模式功能。
  • [x] 优化 Toolbar 样式
  • [x] 增加拖拽绘制功能
  • [x] 工具栏优化:添加 destroy API,添加当前页与全部页指示
  • [x] 优化图片的缩放情况,添加结束的按钮与触发事件
  • [ ] 添加取色器,
  • [ ] 添加全屏的绘制功能,全屏绘制会基于新的全局 div 元素,而非直接将当前元素扩大化
  • [ ] 添加 Whiteboard 的 Loading 界面
  • [ ] 支持编辑中途的缩放能力,将全屏的画板与局部画板的事件达到同步

Motivation & Credits

Readme

Keywords

Package Sidebar

Install

npm i @m-fe/whiteboard

Weekly Downloads

0

Version

0.0.4

License

none

Unpacked Size

505 kB

Total Files

86

Last publish

Collaborators

  • lotuc
  • dylatos
  • wxyyxc1992