将JS/Leaflet动画的数据流捕获为MP4 [英] Capturing data stream of a JS / Leaflet animation as MP4

问题描述

如何捕获JS/Leaflet动画的数据流并将其下载到MP4?

How can I capture the datastream of a JS / Leaflet animation and download it to MP4?

我正在寻找看起来像这些演示中跟踪的平滑路径的输出: https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim

I am looking for output that looks something like the smooth path traced in these demos: https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim

他们的作者似乎是在ffcast或一些截屏软件中完成的.

Their author appears to have done them in ffcast or some screencasting softare.

但是，我正在寻找一种可以作为脚本运行的自动化解决方案，最好是可以在数据流本身(而不是屏幕)上运行的解决方案，也许可以使用无头浏览器.

However, I am looking for an automated solution that can be run as script, ideally one that works on the data stream itself (not the screen), perhaps with a headless browser.

我尝试了 puppeteer-gif 和

I have tried puppeteer-gif and puppeteer-gif-cast but the best frame rate is jumpy.

我尝试了 WebRTC实验，但这需要我设置手动权限.同上提到的Screen Capture API

I have tried WebRTC-Experiment but it requires me to set manual permissions. Ditto the Screen Capture API mentioned here, though this at least seems to work on the data stream itself.

推荐答案

画布 MediaRecorder API 应该可以解决问题.

The canvas captureStream method combined with the MediaRecorder API should do the trick.

请注意，Chrome仅支持将webm作为容器格式(但会记录h264)，因此您可能需要对ffmpeg进行后处理.

Mind you that Chrome only supports webm as a container format (but does record h264) so you might need a postprocessing step with ffmpeg.

这篇关于将JS/Leaflet动画的数据流捕获为MP4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！