2022.8.27(本周六) 09:00 ~ 23:00，早早聊低代码专场...报名戳：www.zaozao.run/conf/c49
感谢机械工业出版社-华章分社的赞助 20 本书籍，直播送出别错过：
- 微软中国 CTO 韦青领衔撰写《实战代低码》
- 大史新书《前端跨界开发指南 JavaScript 工具库原理析解与实战》
在线报名后，请加会议小助手（zaoeva 或 zaomicky）进直播群
本文是第二十一届 - 前端早早聊搭建专场，也是早早聊第 149 场，来自 腾讯-小蝌蚪 的分享图文讲稿。
开场介绍
大家好，我是“第一名的小蝌蚪”，大家叫我“小蝌蚪”就好了，我来自腾讯新闻前端团队。今天跟大家分享的主题是《企业级富媒体搭建技术原理与实践》。
目录
- 富媒体搭建
- 批量海报生成
- 可视化搭建视频
- 智能化生产短视频
我会从以下 4 个方面去介绍：
- 第一个就是富媒体搭建技术，就是常用的一些 H5 搭建；
- 第二点就是批量海报生成；
- 第三点是可视化搭建视频，教大家如何在 PC 端直接搭建一个短视频；
- 第四点是我们的一个创新项目，通过人工智能来智能化生产我们的短视频服务。
富媒体搭建
背景
我们当初为什么要做这个项目呢？因为现在很多编辑还有运营，他们的需求比较复杂，仅仅只是 H5 的话，已经满足不了他们的需求了，他们需要图片，还需要视频等等。我们做这个的原因是，现在很多技术团队和运营团队都是分开的，他们很多项目需要排期，但如果排期的话就会特别久，有些时候如果他们需要一些紧急项目的话，可能就没法及时满足需求，所以说我们就给他们做了一个“米鹿”的可视化搭建平台。
作品
当我们每个团队考虑要做一个可视化搭建平台的时候，针对 H5 主要就会分为这几大类，其实就是性价比最高的几个模板。第一个就是直播模板，像我们一些运营团队，他们会有很多活动的一些直播，他们之前是没有研发团队的，都是把这些直播外包出去，每一个直播作为一个项目都要花好几万块钱，而且会根据流量收费，每一个模板都会很贵。然后现在基于我们这个模板平台搭建了以后，他们现在可以直接很快速的实现直播的功能，所以现在保守估计已经节省了好几百万的一个开销，这就是最大一个收益。
然后还有一个比较火的模板，就是年度总结模板。大家将来如果要做可视化搭建的话，这些都是重点要建设的一些模板。像第三个模板当时已经是刷爆了朋友圈的一个年度总结的模板。第四个模板就是一些游戏活动的模板，像王者荣耀的安全周一些活动都会用我们的模板。
富媒体搭建
刚才给大家简单介绍了一下我们富媒体搭建的一个库。像刚才今天上午很多大神分享一样，我们的一些功能很多都是共同的，所以说这一块会比较快过。然后重点会讲 2、3、4 小节的内容。
可视化图表搭建
我们可视化搭建的模板，不仅能搭建一个 H5，我们还挖掘出一个性价比比较高的需求，就是可视化搭建一个图表。比如说我们一些运营同学，他们想要做一些财报、报表、图表等等。在业界的一些常规的富媒体搭建平台中，只能是搭建 H5 之类的东西，很少有同时支持图表可视化的功能。
但是如果运营同学想搭建一个图表怎么办呢？他需要要研发人去帮帮他开发。针对这样的业务痛点，我们就给他做了这个可视化的图表搭建平台，图表搭建其实特别简单，性价比也很高，将来大家可以在自己项目中实现。
可视化图表搭建本质上就是基于 ECharts 把它的 Options 挨个拿出来，进行一个可视化的编辑，就可以实现图表的可视化搭建平台。
下面是我们整个富媒体搭建平台的技术原理的架构图，跟今天上午很多分享讲师的原理都差不多。其实富媒体搭建平台的原理主要分两种，一种流式渲染，就是一个大 JSON 加一个中间态，将页面从上到下进行渲染。
另一种就是绝对定位的布局方式，我们米鹿就是这么实现的，通过 Draggable 把元素拖出来到画布里面去，通过拖拽到它的实时位置，然后从通过中间态进行一个渲染。这就是米鹿的重要实现原理。
大家会以为刚才的 H5 页面很复杂，其实特别简单。它们都是由一些通用组件组成的，实际上就是一些按钮，面板二维码，还有一些热区，以及一些点击区等等。然后还有一些业务组件，比如倒计时，一些图标组件，视频组件和一些抽奖组件、投票组件等等。
然后我们后端的实现是基于 Koa2 框架开发的，数据库用 MongoDB，这一块我觉得比较有价值的技术点是数据分割。上午的时候有人在问，当 JSON 数据量过大的时候怎么办？假设我们搭建了几千个富媒体，甚至上万个富媒体，我们不可能把它每一个 JSON 都拿出来渲染，然后列到那个表中给编辑人员看，那怎么办呢？
这时候我们就会用 GraphQL 做一个数据分割，通过配置 Schema，把生成嵌套的 JSON，按需取出我最想要的数据，进行渲染,，并呈现给大家查看、编辑操作等等。这样子的话就变相的加速了我们数据的获取、渲染、编辑操作等等。
缓存层我们用的是 Redis，批量海报生成，我们是基于 puppetter 做的。后面我会给大家具体介绍实现的原理，视频合成我用的是 FFmpeg，以及我们的一个自研库 FFCreator，这部分主要是给大家分享一下我们搭建平台的架构图。
基建生态
其实第一部分我最想讲的就是这一页，经济基础决定上层建筑。像刚才我们说的，我们每发布一个 H5 和一个富媒体，就会自带一个监控，可以监控它的错误率错误码等等；还能在用户点击 H5 的任何一个地方，进行自动的数据上报，数据统计和分析，以及用户调用链等等，同时支持自动集成代码的编译部署，服务的扩容、容灾、弹性伸缩等等。
刚才我们说的一个 H5 里面包含这么多的功能，其实都是因为我们有完善的基建，就像《前端早早聊》之前也有提到过的主题，就是要教大家怎么做基建，这就是基建的重要性。我们做出的每个 H5 都是将基建的每个模块有机组合在一起，形成了一个完善的一个项目。
大家可以看到这个基建分为 devOps、监控、上报、大前端、中台、审核等等模块。其中像大前端主要包括有 Node 框架、物料市场、跨端开发能力等等。中台相关的基建包括有富媒体搭建等等。其中我想重点说的一部分就是审核。
审核这个模块特别重要，我 8 年的开发经验经历过 2 个大厂，这些大厂每年都会在一些素材的版权方面打很多官司，赔很多钱。甚至在国外会有专门的公司针对这些大厂的素材的数据进行收集、并发起版权诉讼。所以我建议大一些的公司在做富媒体搭建平台的时候，一定要搭建一个审核平台。要进行图像审核、文本审核，还要把图像中的文字 OCR 识别出来，然后进行审核等等，这是一种素材审核的解决方案。第二个解决方法就是建立公司自己的素材库，就是说我们图片就从自己的素材库里面拿，而不是去外界去拿，外界拿就有风险。如果从我们自己素材库去拿，就可以避免这些风险。
所以说这就是我要讲的就是基建生态，基建生态是我们富媒体搭建的基石。
邀请大家一起思考一下，可视化搭建除了搭建 H5，我们还能做什么呢？除了搭建 H5，我们还可以用来做海报生成，批量生产海报；可以做可视化的一个短视频搭建，还能做智能化生产短视频，这都是可视化的一些很重要的需求场景。我们这些都是针对编辑和运营人员的一些需求痛点，有针对性开发的功能，所以特别有项目价值。
批量海报生成
接下来 Part 2 就是给大家介绍一下批量海报的生成。
首先，我们为什么要做批量海报？大家可以想一下，我们有很多的作者，要给作者生成对应的介绍，这样的需求包含 1 个作者的头像，以及他的文章等等。假设我们有 1000 个作者，我们就要做 1000 个图片，这样子的话重复劳动性太高了，而且他们的模板都是相同的。
那如何通过自动化和智能化的技术手段来解决这样问题呢？就是通过批量生成海报，这就是最重要的一点。大家可以看到左边这个图就是顶部的一个 Logo，然后后面是个背景，还有活动名称，作者头像和作者名称，以及作者数据等等。这其实是固死的。我们只要把这些固死的东西抽象成一个模板的数据，唯一标识用一个数据占位，这么我们只要用数据替换占位，就可以批量生成它。
接下来我会给大家讲一下怎么批量生成。首先整个批量生成，我们是用 Koa2 框架做一个 Node 服务，海报生成这个行为，我们用的是 Puppeteer ，这是业界比较火的一个开源项目。然后我先从部署给大家讲，大家在使用 Puppeteer 的之前应该更熟悉的是 Phantom 库，相比于 Puppeteer 来讲，Phantom 在云端更容易部署一些。在部署 Puppeteer 时，起码有90%的人第一次部署都会失败，包括我身边很多人在内都部署失败了。
这里我找了一个非常通用的解决方法，就在他们官网里面就有写，直接把官网的 Chromium 或者 Chrome 安装到到你的服务器上，然后通过 executablePath 指向下 Chromium 或者 Chrome ，这样就可以完美解决遇到的部署问题。
当用户选择好了模板，我们继续说实现原理。当批量海报生成的请求进来后，我们会自制一个调度器 Scheduler，会把这个项目中的 body 放到我们的缓存里面，然后生成对应的 task，然后进行了一个 processer 的处理。然后处理逻辑这部分大家可以看到，批量海波生成可能跟大家想的不太一样，其实我们都是基于中间态的一个 JSON，例如大家看一下作者名称，其实它都是一个 JSON 的占位符，我们只要替换它对应的占位符就可以了。所以说我们只要把 template-json，做成一个 JSON 数组传进来，再通过 ejs-render 把它生成一个个 HTML 放在我们对应的静态资源目录下面。
接下来就是我们的 Puppeteer 怎么生成，它基于刚才静态资源目录，我们会起一个服务的端口，然后我们会用 puppeteer.launch 一个 Chrome 实例，通过 executablePath 指向我们的启动器，启动 no-sandbox，去加速渲染减少性能损耗。
我为什么会用 Puppeteer 去做批量海报生成海报，是因为 Puppeteer 自带的一个就是 newPage，相当于变相帮我们实现了一个多进程。比如说我们有100个 newPage，那么就相当于在 Chrome 里面打开了100个 tab 页，它自动帮我们渲染出 100 个我们不同项目的 screenShot 的截图，所以它就相当于把我们自动优化好了进程的调度、截图等等。而且他也会利用 Chrome 的垃圾回收机制，帮我们把那些我们进程的性能优化处理好。
所以说我会把它通过每个 newPage 生成对应的微服务，通过 page.goto 指向刚才我们新起的端口，进行一个 screenShot，这样就可以把截图给复制出来，然后再把它给上传到 CDN，或者再做成一个 zip 压缩包返回给用户，这整个过程就是我们的批量生产海报的一个原理。
像前段时间掘金网就为前 100 名的作者做过一个月报功能的活动海报，里面会展示每个作者得了什么奖等等内容。
像这种活动，如果说有 100 个作者，就要做 100 张图片，这种场景就非常适合用这种批量海报生成。假如一张图片可能要做 10 分钟，我要做 100 张，那就是 1000 分钟。如果用我们批量生成海报功能的话，一分钟就能全部搞定。这其实就是一个利用前端技术极大的为运营同学提效的例子，也是我们批量海报生成的一个重要的需求场景。
可视化视频搭建
接下来给大家分享的部分是可视化的视频搭建。
大家想一下，如果我们前端人员想做一个短视频，应该怎么去做呢？我这里知道的有两种方法，第一种就是 FFmpeg，大家可以看一下用 FFmpeg 很快的生成了一个简单的动画。这个动画里面是每一个单独的元素，背景音乐，以及一个简单的转场动画。当然我设计能力比较差，只是随便搭了一个很简单的视频。其实我们经常刷到的那些抖音、视频号里面的一些视频，都可以通过这样的单个的元素、动效、背景转场等等做出来。比如说，我们把示例中的“马里奥”换成一个美女图片，把背景换成一个更漂亮的图片，就可以形成一个简单的抖音短视频了。
大家可以看到，如果用 FFmpeg 去生成刚才这一小段 20 秒的视频，会用这么多行代码，这样的灵活性是比较差的，更富在的动画实现起来也比较困难，尤其是需要去写一堆数学公式，比较有难度。
基于这个痛点我们自己封装了一个叫 ffcreator 的开源库，后面会把开源地址放出来。然后我给大家讲一下这 ffcreator 库是怎么实现的。首先我们在前端，如果要实现一个元素的旋转动画，可以根据 animate.css 这样的动画库，或者自己写一个动画效果来实现。在视频里面怎么做呢，我们要把动画效果映射到视频的后端去实现，那么我们可以用到一个 Tween.js 的库，然后我们只要把 from 和 to 设置好，然后用设置 delay 几百毫秒的延时，再调用 easing 动画效果就实现了。
我们通过 onUpdate 方法来实时更新单个元素的 alpha 透明度、锚点以及位置（也就是 x、y 轴坐标）等等。可以看到视频主要是有一帧一帧动画组成，所以只要我们能够得到图片的实时位置，控制它的帧频，也就是每帧的绘制频率，就可以实现这样的一个动画。
绘制器我们使用了月影大大的 SpriteJS ，通过它绘制一个图片，创建一个场景，会有一个 layer ，然后去封装我们对于的实例，最终将这个实例的元素信息打印出来，通过 screenShot 就可以得到每一帧。比如我们想要 60 帧，就可以打印 60 帧，想要 100 帧，就可以打印 100 帧。最终我们会通过 FFmpeg 把所有的帧合并起来，形成一个动画，再加上背景音乐，这样就实现了一个动画。
接下来还要讲的就是转场动画，大家可以看一下转场效果，这里是一个翻页的动效，这个是怎么实现？其实就是用了 webGL 的 Shading Language，我们去编写一个转场动效的代码，然后通过只要用 gl-transition 这个库，就可以实现我们对应的转场动画。
以上就是 FFCreator 实现一个动画的原理。
下面给大家展示一下 Demo，刚才我们说最重要就是动画映射这一块。我们只需要把这部分进行可视化封装，让动画可以可视化的配置出来。例如刚才我们说的页面元素的搭建，就是我们的 H5 页面搭建的那一套逻辑继承过来，把元素的位置、transition、动效过渡时长等等配置好，然后再通过我们 Node 服务生成。
这就刚才我说的，我们只要需要控制的每种元素进行一个可视化编辑，包括背景图片、静态元素、动效元素，还有转场动画、字幕、配音，然后背景音乐、视频音频等等，把这些元素传到我们视频制作的库里面，然后它对每个素材进行 screenShot 截屏封装，生成我们对应的帧，然后用 FFmpeg 和 FFCreator 生成最终的视频。
FFCreator 这个库我们已经封装并且开源了。欢迎大家使用。它是一个轻量级的短视频加工库，你只需要添加几个图片或者文字，就可以快速生成一个绚丽的短视频。大家只要把对应的图片和文字的位置信息，通过可视化配置出来，再基于这个库直接就可以生成对应的短视频了。所以这就是我们短视频可视化平台搭建的实现原理。
智能化生产短视频
第 4 点我要分享的是智能化生产短视频的服务。
这是我们第一次将人工智能机器放在前端的一个真实场景的落地。我先给大家演示一下 Demo，这是一个虚拟主播，大家可以看到，这个人是通过机器学习去训练出来的一个模型，可以看他的嘴唇、点头等等姿态动画，都是通过机器学习训练出来的一个模型。然后看一下第二个 Demo ，这个 Demo 是一个图文视频，大家可以看到，这是一张图片，以及对应的文字。
首先这些 Demo 里面智能化体现在哪里？其实这是通过一篇 2000 字的文章生成出来的一个短视频，它会把这 2000 字通过智能摘要提取，就是通过机器学习提取出对应的摘要，然后把 2000 字压缩成了三段话。然后再去搜索三张图片，最后生成一个新闻的图文视频。
然后它的价值在哪里？大家也知道，现在是一个新媒体的时代，大家全都在用短视频这种媒体，比如说抖音、视频号，还有微视等等，大家平时都会在这三个平台上面去浏览，现在用户可能对那种纯文字的内容不是很感兴趣，但是他们会愿意看一些视频形式的新闻，短视频形式的新闻。
所以说我们智能化生产短视频就可以通过这些智能化帮你快速生成对应的短视频。在我们这样的新闻团队里，新闻的时效性、响应性、实时性是非常重要的。比如说一个热点大事件出来，你必须要在 15 分钟之内快速的写出对应的文件稿、对应的 H5、以及对应的图片和视频，然后在抖音，视频号，微博等平台，在短短的 15 分钟内必须要把它全部分发出去，把用户全部吸引过来。
因为只有你是第一个出现的新闻端，你的产品才能吸引得用户，如果你的新闻是后面出来的，用户就会觉得你是在重复，会浪费他的时间，会让他觉得浮躁，会让他想要把你给删掉，所以说时时效性是最重要的。这个时候我们就要通过这种智能化去快速的辅助我们编辑和运营，快速的生成对应的图片，对应的视频，快速的去抢占市场。
所以说像我们做出这一套智能化生产短视频的产品，就可以根据当下热点事件的快速生成对应的摘要、图片，搜索出对应的图片，然后生成对应的短视频等等。而且它一个是自动生成，不需要用人工生成，一天就可以生成 1 万多条的视频，快速的在网络上分发出去，响应时效性也特别快。在热点事件发生后，30 分钟以内，我们可以快速的帮助编辑和运营生成对应的短视频。
接下来我给大家讲智能化短视频怎么实现呢？
首先刚才我们说的很重要的一点就是智能提取摘要，比如说现在有一个国家出台的文件，有大约 2000 多字，这 2000 多字我们编辑要理解可能需要一点时间，这时候我们就会用智能摘要提取辅助我们编辑去抽象出它对应的核心内容。而且像有一些新闻它是朗读的，比如新闻联播，有的一个小时，有的两个小时，那么我们可以用一些语音识别，把新闻联播里面的文字从语音识别出来，然后再通过智能摘要提取它对应的热点内容，这个就是它的价值。
所以我给大家讲一下智能摘要提取怎么实现的，首先原始文档就是刚刚说 2 万字或者 2000 字等等，然后我们对它做一个句子的切分，把句子切分出去，然后再对每个句子进行一个分词、语义拆分等等。接着我们会对句子进行打分。因为不是每个句子都是有效的，而且也不是每个句子都是符合机器理解的。所以说我们会对句子进行一个打分，我们会用一些算法模型，比如说 GDBT 的一个特征组合的算法，然后再加上一个逻辑回归 LR 算法会对句子进行统计特征、线索特征、句间特征、语义特征等等计算每个句子的重要性得分。
然后我们再通过句子的选择，就是我们会用一个 LR 摘要提取算法，会对这个句子进行选择和搭配，会选择重要性得分比较高的句子，进行一个具体的选择，尽量避免一些重复内容，并且保证句子尽可能涵盖文章的所有有效信息，最后我们再对这个句子进行合并，就能得到我们的摘要结果。
我们智能摘要已经拿到了，然后再加上刚才我们 FFCreator 库，通过图片还有文字转成图文视频，再选模板中虚拟主播的人物，就可以快速生成一个视频。把刚才我们前面所讲的每一个功能，组合起来就能实现我们智能化视频生成。
这里面我主要讲一个场景，就是刚才我说的，当我们得到智能摘要以后，我们再提取出它的关键词，然后将这关键词输入刚才我们前面所说的素材库中台，通过素材库中台面，通过这个关键词拿到了对应的图片，比如说 NBA 10 佳球，它就可以帮你搜索出今天 NBA 的 10 佳球的对应的图片，然后再把刚才的图片文字贴进去，在每一幕可视化的贴进去以后，然后再用我们的 FFCreator 工具生成出一个短视频，再加上对应的背景音乐，那么智能化的一个短视频就完成了。
总结
前端可视化提效
- 富媒体搭建
- 图表搭建
- 组件市场
- 可视化打点 + 无痕埋点
- 海报生成 + 批量生产 paas 化服务
- 可视化搭建短视频
- 智能化生产短视频
未来规划
- 视频生成结合 webassembly
- 更多智能化场景探索
- 智能布局
- 智能配色
- 智能化运营
团队介绍
我们是 TNT 腾讯新闻前端团队。
我们团队的 github 地址是：github.com/tnfe
我们的开源项目有：
- 短视频制作：github.com/tnfe/FFCrea…
- react 状态管理库：github.com/concentjs/c…
推荐书籍
推荐大家的书是《断舍离》。我为什么推荐这本书？就是现在前端技术真是日新月异，每天都有层出不穷的库和新技术，我们就很容易浮躁，什么都想学，什么都想要。但最后你会发现什么都没得到，什么都没精通，我们其实需要把一些东西给排除掉，学会割掉，我们只学个东西，未来三个月内我只学一个东西，我什么都不学，别小看这个东西，未来三个月你要是真能学会的东西，其实比别人什么都要学，那种人都要厉害很多。
😍别忘了给文章点赞喔😍
也别忘了早早聊第四十九届|前端无/低代码专场，点我上车👉 zaozao.run/conf/c49
所有往期都有全程录播和 PPT，通过年票一次性解锁
