我将使用我的网络摄像头作为来源，并在网页上显示我的 View ，然后我将操纵我的 View (例如blacknwhite、fiseye等)并在 Canvas 中显示操纵后的视频。 示例 ( http://photobooth.orange-coding.net/ )
好的，现在一切都很酷。我可以将经过操作的 Canvas 捕获为图像。
有什么方法可以将操作过的 Canvas 录制为视频吗？
我还找到了一个示例( https://www.webrtc-experiment.com/ffmpeg/audio-plus-canvas-recording.html )
但是当我在网络摄像头录制项目上尝试该代码时，它只是记录我的源 View (而不是黑白)。它没有实现我的录制效果。
有什么想法或者可能吗？ 谢谢。
最佳答案
在浏览器中录制视频就像从石头中取出血液一样。如果你用力击打头部并持续足够长的时间，最终就会流血。但这是一次痛苦的经历，你肯定会头疼!
目前无法从 Canvas 元素实时录制视频。但有人提出了Mediastream Recording API 其中包括视频(并且不包括 Canvas 部分)。目前仅支持音频，且仅支持 FF。
您可以尽可能多地抓取图像并将其用作序列，但您会遇到几个问题:
- 如果您选择以 JPEG 或 PNG 格式抓取图像，您将无法获得完整的帧速率(PNG 对于视频来说不是很有用，因为没有 Alpha)
- 如果您选择获取原始数据，您可能会获得全帧速率(请注意，视频的帧速率通常不会超过 30 FPS)，但您会很快填满内存，并且需要一个时间点来将帧处理成可以传输到服务器或下载的内容。 JavaScript 是单线程的，无论你如何扭转这个阶段，当调用这个过程时，你都会在视频中出现间隙(除非你有足够的内存并且可以等到最后 - 但这对于公众可用来说并不好)解决方案(如果这是目标)。
- 您将没有像时间码这样的适当的sinc(用于同步)，因此视频将像卓别林当天的电影一样，可变。您可以通过绑定(bind)高分辨率时间戳来接近，但不够准确，因为您无法在抓取图像时获取时间戳。
- 没有录制声音；如果您使用 API 在 FF 中录制音频，则无论如何都无法正确同步音频与视频(这已经有其自身的问题，请参阅上面的内容)
- 到目前为止，我们仍处于单帧序列。如果您以 30 fps 录制一分钟，您将获得 60x30 帧，或每分钟 1800 张图片/缓冲区。如果您在 HD720 中录制并选择抓取原始缓冲区(这里最现实的选项)，您最终将得到每分钟 1800 x 1280 x 720 x 4 (RGBA) 字节，或 6,635,520,000 字节，即。每分钟 6.18 GB - 这只是原始大小。即使您将分辨率降低到 720x480，最终的速度仍为 2.32 GB/分钟。
- 您也可以将它们处理成视频格式，这是可能的，但目前几乎没有解决方案(已经有一个，但结果各不相同，这可能就是为什么很难找到它的原因......)，所以你就只能自己完成了——这是一个完整的项目，涉及编写编码器、压缩器等。并且内存使用量会非常高，因为你需要在单独的缓冲区中创建每个帧，直到知道完整长度，然后创建一个存储缓冲区来容纳它们等等。即使您这样做了，压缩超过 6 GB 的数据(或事件“仅”2 GB)也不会让用户或浏览器感到非常高兴(如果还有剩余内存)...
- 或者咬紧牙关，选择 commercial Flash based solution (但这排除了你的图像处理并且几乎接管了相机......所以在这种情况下并不是一个真正的选择)。
在我看来，唯一现实的选择是等待上述 API - 这将使您的浏览器在编译的优化代码中完成所有艰苦的工作，启用逐帧压缩，使内存几乎完好无损，并且只提供很少的空间与上述替代方案相比，头痛。可能有一个选项可以将着色器应用到流中的某个点，或者将其与某些 Canvas 处理集成(不在本提案 AFAICS 中)，因此从 Canvas 实时记录仍然是一个挑战。
这就是服务器端处理的用武之地......
(当然，屏幕录像机是一个完全未集成的选项，但至少可以让您演示您的效果......)。
关于javascript - HTML 5 如何记录过滤的 Canvas ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29071730/