我想将HTML5画布中的动画转换为可以上传到YouTube的视频文件。是否有任何类型的屏幕捕获API或其他东西可以让我通过编程来实现这一点?
有一个whammy库声称使用JavaScript从剧照中生成webm视频:
http://antimatter15.com/wp/2012/08/whammy-a-real-time-javascript-webm-encoder/
请注意,存在一些限制(正如预期的那样)。这个编码器基于webp图像格式,目前只有Chrome支持这种格式(也许新的Opera也支持,但我还没有检查)。这意味着您不能在其他浏览器中进行编码,除非您首先找到一种方法对要用作webp图像的图像进行编码(请参阅此链接以了解可能的解决方案)。
除此之外,没有办法使用JavaScript从图像中创建视频文件,也没有办法使用本地浏览器API从画布中创建视频文件。
Firefox有一个实验功能(默认禁用),称为HTMLCanvasElement.captureStream()
本质上,它将画布元素捕获为视频流,然后可以使用RTPeerConnection()将其发送到另一台计算机,或者您可以使用YouTube实时流媒体API直接流媒体。
见:https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream
也:https://developers.google.com/youtube/v3/live/getting-started
使用MediaRecorderAPI解决了这个问题。它的构建正是为了做到这一点。
这里有一个解决方案,可以录制X毫秒的画布视频,您可以使用按钮UI扩展它,以启动、暂停、恢复、停止、生成URL。
function record(canvas, time) {
var recordedChunks = [];
return new Promise(function (res, rej) {
var stream = canvas.captureStream(25 /*fps*/);
mediaRecorder = new MediaRecorder(stream, {
mimeType: "video/webm; codecs=vp9"
});
//ondataavailable will fire in interval of `time || 4000 ms`
mediaRecorder.start(time || 4000);
mediaRecorder.ondataavailable = function (event) {
recordedChunks.push(event.data);
// after stop `dataavilable` event run one more time
if (mediaRecorder.state === 'recording') {
mediaRecorder.stop();
}
}
mediaRecorder.onstop = function (event) {
var blob = new Blob(recordedChunks, {type: "video/webm" });
var url = URL.createObjectURL(blob);
res(url);
}
})
}
本文向大家介绍HTML5画布转换,包括了HTML5画布转换的使用技巧和注意事项,需要的朋友参考一下 HTML5 canvas提供了允许直接修改转换矩阵的方法。转换矩阵最初必须是身份转换。然后可以使用转换方法对其进行调整。 示例 让我们看一个画布转换的例子:
问题内容: 是否可以将html5-视频显示为画布的一部分? 基本上与您在画布上绘制图像的方式相同。 谢谢! 问题答案: var canvas = document.getElementById(‘canvas’); var ctx = canvas.getContext(‘2d’); var video = document.getElementById(‘video’); 我猜上面的代码是自我解
我想在画布上画一段视频。为了实现这一点,我在Javascript中捕获onMouseDown和onMouseUp事件,以获得每个事件的x和y坐标(我需要在画布中设置视频的位置、宽度和高度)。 因此,每次我在画布上绘制视频时,我创建的上一个视频都应该停止,并且必须播放新的视频。两个问题: 1)视频不播放(功能只画第一帧),但他的音频可以 2) 如何停止以前绘制的视频? 演示:http://jsfid
我有一个应用程序,它只是一个动画(一些圆圈在移动)。 我想知道如何将这个动画保存为MP4之类的视频? 或者可以记录(捕获)节点内发生的事情并将其保存为视频格式吗?
我在这里和谷歌上到处都找了--没有一个有效的命令适用于IE9。IE9缺少了什么。我所尝试的一切都适用于其他地方:chrome,safari,移动设备等等。我想要一个命令,将转换它,我可以使用它在每一个设备假设支持mp4在HTML5视频标签。 我使用以下命令: 等等。同样,所有这些命令会生成一个有效的mp4文件,可以在chrome,safari等上运行。即使我使用windows media Play
我曾尝试使用GStreamer管道将mp4视频转换为avi视频,但它是在没有声音的情况下转换的 gst launch-t-v filesrc location=源。mp4!qtdemux!ffdec\U h264!视频/x-raw-yuv!avimux!filesink location=结果yuv。avi公司