我将使用网络摄像头作为资源并在网页上显示我的视图,然后我将像操纵自己的视图(blacknwhite,fiseye等)并在画布中显示操纵的视频。
一个例子(http://photobooth.orange-coding.net/

好吧,现在一切都很好。我可以将操纵的画布捕获为图像。

有什么方法可以将操作过的画布记录为视频吗?

我也找到了一个例子(https://www.webrtc-experiment.com/ffmpeg/audio-plus-canvas-recording.html

但是,当我在网络摄像头录制项目中尝试该代码时,它只是在录制我的源代码视图(不是blacknwhite)。录制并没有达到我的效果。

任何想法或有可能吗?
谢谢。

最佳答案

在浏览器中录制视频就像在流血。如果用力撞击头部并持续足够长的时间,最终会有血迹。但这是一次痛苦的经历,您一定会感到头痛!

当前无法从canvas元素实时录制视频。但是提出了一个Mediastream Recording API,其中包含视频(并且不包括画布部分)。当前仅支持音频,并且仅支持FF。

您可以尽可能频繁地获取图像并将其用作序列,但是您将遇到以下几个问题:


如果选择以JPEG或PNG格式抓取图像,您将无法获得完整的帧率(由于没有Alpha,PNG对于视频不是很有用)
如果选择获取原始数据,则可能会达到全帧速率(请注意,视频的帧速率通常不会超过30 FPS),但是会很快填满内存,因此需要时间来处理帧可以传输到服务器或下载的内容。 JavaScript是单线程的,无论您如何扭转和扭转这个阶段,调用此过程都将在视频中留下空白(除非您有很多内存,并且可以等到结束为止-但这对公众而言是不利的)解决方案(如果这是目标)。
您将没有像时间码这样的正确信号(要通过其进行同步),因此视频将像Chaplins当天的电影一样,可变。您可以通过绑定高分辨率时间戳来接近,但不够准确,因为在获取图像时您将无法获得戳记。
没有声音记录;如果您确实使用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 / min的速度。
您也可以将它们处理成视频格式,这是有可能的,但是目前几乎没有解决方案(虽然有一个解决方案,但是结果却有所不同,这可能就是为什么很难找到它的原因……),所以剩下的事-这是一个涉及编写编码器,压缩器等的完整项目。由于您需要在单独的缓冲区中创建每个帧,直到知道全长,然后创建一个存储缓冲区来保存,因此内存使用量将很高。他们全部等等。即使您这样做,压缩超过6 GB的数据(或事件“仅” 2 GB)也不会使用户或浏览器感到非常满意(如果还有剩余的内存)...
或咬灰尘并使用commercial Flash based solution(但这不包括图像处理功能,并且几乎接管了相机的工作,因此在这种情况下实际上不是一种选择)。


唯一可行的选择IMO是等待上述API-这将使您的浏览器以经过编译的优化代码完成所有艰苦的工作,启用逐帧压缩,使内存几乎完好无损,并且与上述替代方案。可以选择将着色器一次应用于流,或者将其与某些画布处理集成(不在此建议AFAICS的表格中),因此从画布实时记录仍然是一个挑战。

这是服务器端处理进来的地方。

(当然,屏幕记录器是一个完全不集成的选项,但是至少可以使您演示效果...)。

09-10 11:15
查看更多