想做这个工具平台的目的是想取代传统录制 mp4 视频方式来做体验更好的微课。
由于视频占用空间巨大,耗费流量也不小,同样录制剪辑成本较高,所以我想如果能用新技术 基于 浏览器 HTML5 技术来打造一套能渲染矢量书写笔迹,配以背景课件,同步音频效果的 录制&播放 工具,可以大大改良微课制作及微课观看的体验~
经过一段时间的技术攻关和产品打磨,目前已支持大致功能有 PDF 课件上传,手写笔迹,文字,贴图,在线交互测试题,语音录制,动画效果等
配套的 H5 播放器提供发弹幕,截屏提问,支持手机、pad 上 chrome 浏览器观看
目前很遗憾还没能好好录制一份 Demo 微课做为产品使用介绍
欢迎大家来用用,目前主要用途定义为微课录制,但是我想也能用在其他很多地方,比如可以用来练习演讲,练习 presentation
体验地址: https://17up.org
作为一次尝试,肯定会遇到很多问题,今后将努力完善,尝试改进,之后的改进将不定期更新在下方,也算是经验分享,感谢大家的关注!
2017-02-13 已修复一个重大兼容性 bug
由于课件图片采用了 webp 格式存储在 upyun 上,所有不支持 webp 格式图片的浏览器在播放视频时都卡在了“加载图片中...”,现已修复,测试通过于 Firefox
解决方案: upyun 可以直接在图片访问路径后加自定义版本号来转换图片,所以只要预先判断当前浏览器不支持 webp,则加上一个指定的版本号去读取 jpg 或者 png 格式图片,就可以解决兼容性问题了。
但是在测试 safari 时,发现 safari 目前仍然不支持 opus 编码的 ogg 音频,所以播放时,仍然会卡在“正在加载音轨...“ 移动端浏览器,最新 chrome mobile 是可以正常播放的,包括音频。safari mobile 预计肯定无法播放音频,QQ mobile 浏览器,无法播放音轨,canvas 渲染能力也比 chrome 差不少。
总结:在移动端只有 chrome 才算可以正常体验,未来将尝试下微信小程序版本的播放器开发,希望可以在移动端得到更佳体验~~
*2017-02-19 优化曲线算法,消除锯齿 *
之前也一直想优化下曲线算法,减少记录的轨迹点数量,看到过 paperjs 的 simplify ,今天偶尔发现了一个纯算法 npm 包 simplify-path,加上以后果然笔迹从此圆润多了,记录轨迹点大大减少。
后续尝试增加压感效果响应支持...