JS实现PC端涂鸦照片小程序/移动端实时展示结果的技术实现方式？

Question

我们是一家教育公司，公司目前在研究线上批改作业的案例。
需要实现老师在PC端查看学生的作业并进行批改，批改时开始录制老师的声音并记录老师对学生作业的涂鸦，批改完学生在移动端/小程序查看老师批改的结果（要求声音与涂鸦实现PC端操作时机一致）。就此需求我应该使用哪些技术，或有哪些方案么，求各路大神指导。

Answer 1

用canvas实现批改功能，老师在作业上批改的同时记录下轨迹点和发生的时间，学生查看的时候根据轨迹点和时间重新在canvas上绘制一遍
demo

Answer 2

我理解的是PC端实现涂鸦操作+录屏+录音这3个操作，学生端其实只需要播放视频即可。

那么第一步的涂鸦可以用YYGraft-在线涂鸦工具

后续的录屏可参考MDN Using_Screen_Capture
一个可以录音录屏的js库Audio+Video+Screen Recording using RecordRTC

Answer 3

这个确实是类似配音录屏操作。
但就类似操作来说，本身就有专门的软件可以支持的，如果想在线上实现，其实在很多做会议/教学直播类似的应用中有案例。
大致用到的技术方向是：

1. 音频录制
2. canvas操作重现

音频录制不细说，这里的canvas操作重现其实有两种途径：

1. 类似录屏，把canvas的变化存储为图片序列实现，它又分为全帧和局部变化

   1. 所谓全帧就是按一定速率存储变化后的全画幅内容
   2. 所谓局部变化，是按一定速率存储变化的部分
2. 真正记录canvas涉及的操作实现

其实这两种方式间并不存在绝对的优劣，要从最终效果来看到底采用那种。