在 React 应用程序中将一组图像渲染为视频

Question

我正在构建一个 React 应用程序，我必须调用一些外部 API 来获取表示视频帧的图像，因此，每个请求我都会得到一个图像，并且视频最多有 1000 帧，因此我目前的方法是我请求一个图像，将其存储在“框架”组件的状态中，然后渲染它，获取下一个图像，更新状态等等。我使用react-konva 来渲染图像，因为我还需要在其上绘制一些对象。 （例如，我使用从另一个 API 获得的一些数据获取面部图像并在眼睛周围绘制框）

这种方法似乎不是正确的方法，因为一些图像没有得到渲染的时间，而且应用程序不断从 API 请求图像并且只有很少的图像被缓存。

• 有没有更好的方法来做到这一点？知道我无法控制上述 API。
• 是否有任何 NPM 包可以帮助解决这个问题？

Answer 1

这种方法效率非常低，可能会消耗大量网络和内存。

我看到的唯一有效解决方案是在显示“视频”之前预加载所有图像，或者逐部分进行块下载。比如下载 100 张图片 -> 显示视频 -> 暂停 -> 下载下 100 张图片 -> 等等。