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