分享 分享下自己做的微课制作平台,持续更新 bug 修复经验

veggie · February 10, 2017 · Last by veggie replied at February 14, 2017 · 2171 hits

想做这个工具平台的目的是想取代传统录制 mp4 视频方式来做体验更好的微课。

由于视频占用空间巨大,耗费流量也不小,同样录制剪辑成本较高,所以我想如果能用新技术 基于 浏览器 HTML5 技术来打造一套能渲染矢量书写笔迹,配以背景课件,同步音频效果的 录制&播放 工具,可以大大改良微课制作及微课观看的体验~

经过一段时间的技术攻关和产品打磨,目前已支持大致功能有 PDF 课件上传,手写笔迹,文字,贴图,在线交互测试题,语音录制,动画效果等

配套的 H5 播放器提供发弹幕,截屏提问,支持手机、pad 上 chrome 浏览器观看

目前很遗憾还没能好好录制一份 Demo 微课做为产品使用介绍😓

欢迎大家来用用,目前主要用途定义为微课录制,但是我想也能用在其他很多地方,比如可以用来练习演讲,练习 presentation

体验地址: https://17up.org

作为一次尝试,肯定会遇到很多问题,今后将努力完善,尝试改进,之后的改进将不定期更新在下方,也算是经验分享,感谢大家的关注!

Bug 修复记录

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,加上以后果然笔迹从此圆润多了,记录轨迹点大大减少。

后续尝试增加压感效果响应支持...

这么牛,只能给自己拍砖了

感谢关注!

很多功能只能注册会员才能使用

#3 楼 @nil 是啊,比如图片上传什么的必须得存在一个账户名下吧,还有个人制作的视频也得属于某个账户吧,直播的话也得根据某个账户来产生一个频道,目前注册很方便,不要求验证邮箱,而且都是免费的

You need to Sign in before reply, if you don't have an account, please Sign up first.