小编fri*_*urd的帖子

我需要以自动方式录制网页并将其保存为视频，无需人工交互。

我正在创建一个 NodeJS 应用程序，它根据用户的请求生成 MP4 视频。用户提供一个 MP3 文件，应用程序在插图顶部为声音文件生成动画波形。

到目前为止，我想出了一个系统，它在后端打开一个生成的网页，播放音频文件，并在 HTML 画布元素上显示音频文件的音频可视化。在另一个主要包含静态组件（例如图像）的画布之上，这些组件不具有动画效果。系统对此进行记录，输出将是一个视频文件。最后，我会将视频文件与声音文件合并为用户创建最终文件。

我想出了 2 种可能的解决方案，但它们都存在我目前无法解决的问题。

解决方案#1

使用无头浏览器 API（例如 Phantomjs 或 Puppeteer）每秒抓取 x 次屏幕截图并将其通过管道传输到 FFmpeg。

问题

问题在于该过程不是实时的。如果它只是一个动画，它会工作得很好，但我的依赖于音频文件。音频文件将在渲染过程中播放，从而产生 1FPS 风格的视频。

可能的解决方案？

不要实时播放音频文件，而是将音频文件转换为原始数据。而是根据原始数据对音频可视化进行动画处理。不知道如何做到这一点，如果它甚至可能。

解决方案#2

在前端播放、录制和保存动画。可以使用ccapture.js来记录和保存画布。使用无头浏览器打开页面并在播放完成后将其保存到磁盘。听起来这不是最好的解决方案。

问题

我有超过 1 个画布。这需要一段时间，尤其是当音频文件超过 10 分钟时。让用户等待很长时间可能会破坏交易。

可能的解决方案？

将画布合并为一个。

不知道如何加快渲染时间，我怀疑这种方式是否可行。

我已经被这个问题困扰了好几天了。这意味着你们中的很多人可以花一分钟的时间来为我指明正确的方向。非常感谢您提前抽出时间！

我试图将一个类添加到列表元素,只有它由开始和结束括号中的strong元素组成li.我觉得我很亲密,但我错过了一些东西.

这是我到目前为止的代码:

$('.section-header__subtext ul li').each(function() {      
  if ($(this).is('strong')) {
    $(this).addClass('selected');
  }
});

提前致谢!