用了 Fabric.js 后突然想到了...

语言: CN / TW / HK

交代背景

我们公司有一个在线导播台的产品,是利用腾讯云音视频提供的接口自行封装的一个在线推流工具。

用过腾讯云这个产品的小伙伴肯定都知道,再 TRTC 的产品中,提供了一个云端混流的功能,腾讯云提供了几种混流模板,除了几种固定模板,还提供了一种自定义模板的方式。再自定义模板里,用户可以自行编辑推流窗口的布局风格。

在之前,我们使用这个自定义模板的时候,都是自己再开发环境人力来试,通过繁琐的调试,配置好相关参数后,然后把配置信息做固化存储,最后线上系统直接调用。

这样做的痛点就是每次如果想用新的布局,就得一点点的耐心调参,非常苦逼。

直到昨天,我终于忍不了了。。。

必须要做一个可视化的操作界面来解放双手!

邂逅 Fabric.js

由于有几次苦逼调参的经历,所以我的脑海里对整个过程其实是有画面感的。

大体思路就是需要有一个背景画布,然后再画布上可以添加任意色块来代表混流画面,同时色块可以任意缩放和移动。设置完成后,可以将配置好的画面序列化成 json 结构的配置文字,当然在读取的时候也可以方便的反序列化。

简单总结一下,具体的需求就是一下 4 点

  • 支持设定背景

  • 支持自由添加图形

  • 支持自由缩放和平移

  • 支持序列化和反序列化

这时候,就该主角儿登场啦!(邂逅过程,略!)

以上几点需求,遇上 Farbic.js,纯纯就是小 case。

老规矩,先上官方文档:point_right::http://fabricjs.com/,

再来看一下我这边的应用场景,我这边主要用到的是上述几个需求,直接看代码吧

加载图片

function loadImage(url) {  new fabric.Image.fromURL(url, function (oImg) {    imgBack = oImg;    imgBack.url = url;    imgBack.lockMovementX = true    imgBack.lockMovementY = true    // 禁止水平缩放    imgBack.lockScalingX = true    // 禁止垂直缩放    imgBack.lockScalingY = true    imgBack.scaleX = 0.5;    imgBack.scaleY = 0.5;    canvas.add(imgBack);  })}

复制代码

创建图形

这里只用到了矩形,同时叠加了文字显示,以组合形式添加

function makeRect() {  let num = $("#number").val();  if (num > 9) {    TT.error("最多创建9个画面")    return;  }  clearRect();
for (let i = 0; i < num; i++) {
var rect = new fabric.Rect({ left: 100 * i, top: 100 * i, fill: colors[i], width: 100, height: 100 }); var text = new fabric.Text((i + 1).toString(), { left: 100 * i + 50, top: 100 * i + 50, fontSize: 30, originX: 'center', originY: 'center', fill: 'white' }); var group = new fabric.Group([rect, text], { left: 100 * i, top: 100 * i, width: 100, height: 100 }); rectArr.push(group); // 将矩形添加到canvas里 canvas.add(group); }}

复制代码

上述两个步骤完成后,就可以看到预览图了

保存/读取配置(序列化和反序列化)

Fabric 提供了序列化和反序列化的接口,可以非常方便的把自己构造的最终图形保存起来,同时读取也十分方便

根据实际场景,可以使用“canvas.toJSON()”方法把内容生成结构化的数据保存,也可以直接通过”JSON.stringfiy(canvas)“把数据结构转换成字符串保存。

同样,读取的时候直接“canvas.loadFromJSON(data)”就可以了。

推流效果

当可以可视化的编辑推流模板之后,就可以看一下最终的推流效果了,这里我放个小视频看一眼吧

如此,便完成了我全部的需求。

结束了?不!

以上几段代码根本不值一提,贴出来只是给还没用过 Fabric 的小伙伴简单参考,实际的案例还是要到官方的文档去看,那里可不止我这点东西,你还会看到,Fabric 还支持,渐变,裁剪,各种事件的监听,动画,分组等等。总之就是你能想到的在图形软件里能做的事情,用 Fabric 几乎都可以很轻易的完成。

那写到这里,我还想说,大家再用这种线上会议的组件时,应该都会看到类似“互动白板”之类的产品。之前我还说,这个白板真是不赖,开发起来肯定不容易,倒不是说“互动”的部分有多难,而是真的像“白板”一样可以随意挥洒,图文混排,手工书写等等,这个部分应该更加困难。

用完 Fabric,我感觉这个部分好像也可以很顺利的解决了,因为白板提供的所有自由定义的东西,用 Fabric 几乎都可以完成。

虽然都知道原理是基于 canvas 组件的,但正如它的官方教程所说:point_down:

如今,Canvas 使我们能够在网络上创建一些绝对令人惊叹的图形。但它提供的 API 低级令人失望。如果我们只是想在画布上绘制一些基本形状而忘记它们,那是一回事。但是,一旦需要进行任何类型的交互、随时更改图片或绘制更复杂的形状,情况就会发生巨大变化。

Fabric 旨在解决这个问题。

其实“互动白板”这个产品的主要的逻辑点在“互动”的部分,这一趴应该是业务逻辑复杂,但技术难度不高,而我本以为技术难度高的“白板”部分,在有了 Fabric 之后,也把门槛降低了许多

到这里,就可以大胆设想一下,结合即使通信技术,是不是可以 DIY 一个自己的“互动白板”出来!

有机会一定要试试。今天就到这啦!

最后,祝大家中秋节快乐啊!!