用了 Fabric.js 后突然想到了...
交代背景
我们公司有一个在线导播台的产品,是利用腾讯云音视频提供的接口自行封装的一个在线推流工具。
用过腾讯云这个产品的小伙伴肯定都知道,再 TRTC 的产品中,提供了一个云端混流的功能,腾讯云提供了几种混流模板,除了几种固定模板,还提供了一种自定义模板的方式。再自定义模板里,用户可以自行编辑推流窗口的布局风格。
在之前,我们使用这个自定义模板的时候,都是自己再开发环境人力来试,通过繁琐的调试,配置好相关参数后,然后把配置信息做固化存储,最后线上系统直接调用。
这样做的痛点就是每次如果想用新的布局,就得一点点的耐心调参,非常苦逼。
直到昨天,我终于忍不了了。。。
必须要做一个可视化的操作界面来解放双手!
邂逅 Fabric.js
由于有几次苦逼调参的经历,所以我的脑海里对整个过程其实是有画面感的。
大体思路就是需要有一个背景画布,然后再画布上可以添加任意色块来代表混流画面,同时色块可以任意缩放和移动。设置完成后,可以将配置好的画面序列化成 json 结构的配置文字,当然在读取的时候也可以方便的反序列化。
简单总结一下,具体的需求就是一下 4 点
支持设定背景
支持自由添加图形
支持自由缩放和平移
支持序列化和反序列化
这时候,就该主角儿登场啦!(邂逅过程,略!)
以上几点需求,遇上 Farbic.js,纯纯就是小 case。
老规矩,先上官方文档👉:http://fabricjs.com/,
再来看一下我这边的应用场景,我这边主要用到的是上述几个需求,直接看代码吧
加载图片
创建图形
这里只用到了矩形,同时叠加了文字显示,以组合形式添加
上述两个步骤完成后,就可以看到预览图了
保存/读取配置(序列化和反序列化)
Fabric 提供了序列化和反序列化的接口,可以非常方便的把自己构造的最终图形保存起来,同时读取也十分方便
根据实际场景,可以使用“canvas.toJSON()”方法把内容生成结构化的数据保存,也可以直接通过”JSON.stringfiy(canvas)“把数据结构转换成字符串保存。
同样,读取的时候直接“canvas.loadFromJSON(data)”就可以了。
推流效果
当可以可视化的编辑推流模板之后,就可以看一下最终的推流效果了,这里我放个小视频看一眼吧
如此,便完成了我全部的需求。
结束了?不!
以上几段代码根本不值一提,贴出来只是给还没用过 Fabric 的小伙伴简单参考,实际的案例还是要到官方的文档去看,那里可不止我这点东西,你还会看到,Fabric 还支持,渐变,裁剪,各种事件的监听,动画,分组等等。总之就是你能想到的在图形软件里能做的事情,用 Fabric 几乎都可以很轻易的完成。
那写到这里,我还想说,大家再用这种线上会议的组件时,应该都会看到类似“互动白板”之类的产品。之前我还说,这个白板真是不赖,开发起来肯定不容易,倒不是说“互动”的部分有多难,而是真的像“白板”一样可以随意挥洒,图文混排,手工书写等等,这个部分应该更加困难。
用完 Fabric,我感觉这个部分好像也可以很顺利的解决了,因为白板提供的所有自由定义的东西,用 Fabric 几乎都可以完成。
虽然都知道原理是基于 canvas 组件的,但正如它的官方教程所说👇
如今,Canvas 使我们能够在网络上创建一些绝对令人惊叹的图形。但它提供的 API 低级令人失望。如果我们只是想在画布上绘制一些基本形状而忘记它们,那是一回事。但是,一旦需要进行任何类型的交互、随时更改图片或绘制更复杂的形状,情况就会发生巨大变化。
Fabric 旨在解决这个问题。
其实“互动白板”这个产品的主要的逻辑点在“互动”的部分,这一趴应该是业务逻辑复杂,但技术难度不高,而我本以为技术难度高的“白板”部分,在有了 Fabric 之后,也把门槛降低了许多
到这里,就可以大胆设想一下,结合即使通信技术,是不是可以 DIY 一个自己的“互动白板”出来!
有机会一定要试试。今天就到这啦!
最后,祝大家中秋节快乐啊!!
版权声明: 本文为 InfoQ 作者【为自己带盐】的原创文章。
原文链接:【http://xie.infoq.cn/article/76c8bc8e8447696b6440267df】。
本文遵守【CC-BY 4.0】协议,转载请保留原文出处及本版权声明。
评论