关于腾讯云:基于云函数全景录制用-Markdown-和-Tailwind-CSS写视频

30次阅读

共计 3014 个字符,预计需要花费 8 分钟才能阅读完成。

01. 传统视频制作的毛病

以往咱们都曾经习惯了通过专门的软件来制作视频,然而这些软件往往有很高的学习老本,须要花很多的工夫去相熟它的性能、菜单以及它本人制作的一些概念,了解当前,能力得心应手的做出想要的成果。

另一方面,这些软件简直都是通过图形界面来操作,当咱们有内容要进行批改时,必须关上这个软件,手工的去调整。比方你想改掉视频中一个名词,只能一个一个中央的去找,而不能像咱们在编辑器中间接批量替换。

在过来,咱们把这些作为老本承受了下来。然而当初,随着各种技术的倒退和成熟,咱们多了一个抉择。

02. 用 Web 全景录制来制作视频

腾讯云云函数上线了基于 Chrome Web 全景录制服务, 只须要用户提供一个可供拜访的公网链接,能够主动进行页面渲染、录制、转码,并实时生成视频文件。

这个服务能够用来录制网课、也能够用来生成录制视频,用这种形式生成视频的益处是:

1. 只有在网页上看得见的,听得见的,都能够间接录制成视频。 不存在「因为你用的这个视频制作软件它不反对、或者性能太多你不会用,而导致最终没有方法实现」的状况产生。

2. 对于程序员来讲,能够重用整个 Web 技术栈来制作视频,而无需学习新而视频的预览和调整也会变得很简略, 间接通过浏览器就能够,速度快负载低,不必把电脑风扇弄得呼呼转。

3. 从更高层次上来讲,全景录制计划把「内容制作」和「视频生成」离开了,能够让咱们的精力从新回归到前者 ,而不是在创作时动不动就要去翻手册看菜单和参数再哪个中央。

还有一个不得不说的长处,就是咱们能够很容易的做到网页内容自动化,而录制接口云函数曾经筹备好了,所以整个过程很容易做到全程自动化,齐全不须要人工干预。这对批量制作视频有十分大的劣势。

03. WindMark,用 Markdown 和 tailwind「写」视频

咱们就在云函数的全景录制服务根底上,开发了 WindMark 这个工具。要让普通人书写 HTML 来组织内容的难度太高,所以咱们退了一步,应用 Markdown 和 tailwind 来组织内容。说起里比拟形象,大家能够看看这个不到两分钟的演示视频,点击查看具体视频。(因为全景录制服务尚未反对海内节点,所以咱们把录制性能拆散为了独立服务「录像姬」,稍后会内置到 WindMark 里边)

  • 如果你对这个产品感兴趣,能够拜访 windmark.pro 理论体验一下,我还在 GitHub 上有一个我的项目,开源了不少带动画成果的视频源文件, 点击 GitHub 地址立刻查看

新世界的大门

其实 WindMark 针对的只是一个十分小的场景,全景录制关上的,却是一扇新世界的大门, 它其实意味着今后 Web 就略等于视频了 。比方咱们能够:

  • 用 CSS 和 JS 编写炫酷的动画特效,依据输出的品牌主动生成 OP 和 ED 视频,卖给企业和自媒体;
  • 通过 Live2D Web SDK 对模型编写剧本,并录制成动画短片;
  • 实时抓取数据并生成图表,主动生成视频并公布到各个平台;

如何应用全景录制服务,文档其实曾经很具体了。下边咱们就来讲讲在做 WindMark 这类全新的视频生成工具(后文称全景视频生成工具)过程中,发现的须要留神的一些中央:

1. 内容组织

全景视频生成工具的重点不是视频,而是内容组织。所以更多的是去思考如何组织内容。惯例的图片和文字大家可能都很相熟了,但 * 音频和视频之间按什么程序来播放,是否能够同时播放,音视频和字幕如何同步等新问题是更须要思考的 *

2. 自播放

被录制的网页必须有一套自动播放机制,不然咱们录制的就是动态页面了。一般来讲,须要确定一个驱动页面更新的元素。在 WindMark 中,这个元素是音视频,一旦它们播放完,就会触发翻页,进入新的内容。而如果你做的是动画,那么就应该在动画实现后开始触发。在编写代码之前把这个问题想分明能够节俭不少工夫。

3. 不确定性和预加载

最开始咱们没有留神到这个问题,因为在本地测试,拜访都很快。然而当咱们把服务部署到公网上当前,我发现通过公开网络录制充斥了不确定性。比方咱们常常就会呈现网页外面的资源文件,加载的时候卡住了。这样就会造成录制的视频也会卡顿,甚至停到一个中央不再往前播放了。

这时候咱们就须要做预加载了。其实是一个很简略的技术,在做网页游戏的时候用得曾经很多了。把资源文件提取进去全副用浏览器拜访一遍缓存上,而后再开始播放时,就不容易卡住了。

4. 开始录制开关

预加载解决了一个问题,但又带来了一个新的问题:在资源加载实现前,网页始终不播放,会多进去一段视频。这时候咱们能够采纳手动调用开始开关的形式来录制。依据文档,在发动视频录制申请时候,传递一个 ManualStart 为 true 的参数,这样全景录制服务就不会主动开始录制。而在资源文件的预加载实现后,再调用 window.startRecord 才会开始录制。

5. 进行录制开关

同样的,咱们还有一个播放时长不确定的问题。严格来说,咱们的网页每一次在进行播放的时候,它的工夫都是不一样的。它不像齐全在本地,播完一个音频后接着就是另一个音频。它两头还有一个加载等待时间,这个工夫依据网络的状况会不同。这让咱们很难预估时长。不过和 window.startRecord 相似,全景录制服务也提供 window.stopRecord,这样咱们在网页播放实现后能够被动调用这个办法来进行录制(此办法咱们还没来得及测试)。

6. 字体

咱们在进行录制的时候,实际上是从全景服务容器里的浏览器去拜访网页。装在咱们电脑上的字体并不会被带过来,所以 网页上用的字体要和浏览器内置字体对应 ,否则录制下来成果就会和你电脑上预览的相差很大。如果是英文字体的话,咱们能够用过 webfont 来解决。中文字体的话,目前腾讯默认反对宋体和文泉译文,如果你须要其余的字体,能够采取镜像的模式,我也和云函数团队反馈是否有更优雅的的应用姿态,期待他们给出好的解决方案。

7. 冷启动

在测试晚期咱们还遇到了第一次发动录制申请时太慢,导致 API 网关超时呈现 504 谬误。起初全景服务优化过后,曾经很少遇到了。如果你仍然碰到了,能够调整下 API 网关的后端超时工夫。

04. 更大的设想空间

当我给腾讯云云函数的同学提「是否反对 Puppeteer 脚本」的倡议时,他们仿佛曾经在后续版本中思考了,这会激活更多的场景。全景录制服务只是摄像机,但有了脚本反对,它就变成了自带摄像头的机器人,咱们甚至能够写一个脚本在网上随机冲浪,而后把整个过程录下来直播。

总之,全景录制是个很有前途又很好玩的服务,没有试过的同学能够尝试下。

本文作者:Easy,互联网科技博主(微博账号:Easy),方糖气球(ftqq.com)博主,系列课程主讲人,课猫互动课程平台负责人。


如何接入应用「全景录制」计划?

⽬前曾经有较多企业逐渐上线应用,如果您也想参加此⽅案的测试应用, 点此实现内测表单填写 ,将提供大客户专属 1 对 1 服务,咱们将在 1-3 个工作日与分割,感谢您的关注与反对。

辨认下方 👇 海报二维码,理解更多计划详情,立刻体验应用!

更有低至 1 元专属特惠资源包,限时支付!

05. 音视频实时互动 Serverless 系列解决方案

  1. 云函数和 Headless Chrome 进行实时渲染录制合流;
  2. 应用 Serverless 云函数为 TRTC 输出在线媒体流;
  3. 应用 Serverless 云函数实现 TRTC 单流 / 混流录制;

One More Thing

立刻体验腾讯云 Serverless Demo,支付 Serverless 新用户礼包 👉 腾讯云 Serverless 老手体验。

正文完
 0