我正在从canvas
到canvas.getDataURL()
获取相应内容。
但是,现在我有一系列png图像,但我想要一个视频文件。
我该怎么做?
var canvas = document.getElementById("mycanvaselementforvideocapturing");
var pngimages = [];
...
setInterval(function(){pngimages.push(canvas.toDataURL())}, 1000);
答案 0 :(得分:7)
对于完整的浏览器支持方式,您必须将映像批处理发送到服务器,然后使用某些服务器端程序进行编码。
FFmpeg might be able to do it.
但是在最新的浏览器中,canvas.captureStream
方法已经实现。
它会将您的画布图形转换为webm视频流,可以使用MediaRecorder
进行记录。
所有这些仍然没有稳定,并且只能在最新版本的浏览器中使用,可能在用户的首选项中设置了一些标志(例如,chrome需要"实验性Web平台"一个)。
var cStream,
recorder,
chunks = [];
rec.onclick = function() {
this.textContent = 'stop recording';
// set the framerate to 30FPS
var cStream = canvas.captureStream(30);
// create a recorder fed with our canvas' stream
recorder = new MediaRecorder(cStream);
// start it
recorder.start();
// save the chunks
recorder.ondataavailable = saveChunks;
recorder.onstop = exportStream;
// change our button's function
this.onclick = stopRecording;
};
function saveChunks(e) {
chunks.push(e.data);
}
function stopRecording() {
recorder.stop();
}
function exportStream(e) {
// combine all our chunks in one blob
var blob = new Blob(chunks)
// do something with this blob
var vidURL = URL.createObjectURL(blob);
var vid = document.createElement('video');
vid.controls = true;
vid.src = vidURL;
vid.onended = function() {
URL.revokeObjectURL(vidURL);
}
document.body.insertBefore(vid, canvas);
}
// make something move on the canvas
var x = 0;
var ctx = canvas.getContext('2d');
var anim = function() {
x = (x + 2) % (canvas.width + 100);
// there is no transparency in webm,
// so we need to set a background otherwise every transparent pixel will become opaque black
ctx.fillStyle = 'ivory';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'black';
ctx.fillRect(x - 50, 20, 50, 50)
requestAnimationFrame(anim);
};
anim();

<canvas id="canvas" width="500" height="200"></canvas>
<button id="rec">record</button>
&#13;
由于您要求为此视频添加音频,请注意您可以在调用cStream.addTrack(anAudioStream.getAudioTracks()[0]);
之前使用new MediaRecorder(cStream)
,但这目前仅适用于Chrome,FF似乎有一个错误在MediaRecorder中,它只记录具有定义的轨道的流... FF的解决方法是调用new MediaStream([videoTrack, audioTrack]);
[非常感谢@jib让我知道如何使用它...]
修改:video.onend
- &gt; video.onended
答案 1 :(得分:0)
Kaiido的答案中的MediaRecorder
+ canvas.captureStream
方法肯定是目前的做法-不幸的是,撰写本文时仅Chrome和Firefox支持。
当浏览器采用webp编码支持(当前仅Chrome支持)时,另一种可行的方法是:
let frames = []; // <-- frames must be *webp* dataURLs
let webmEncoder = new Whammy.Video(fps);
frames.forEach(f => webmEncoder.add(f));
let blob = await new Promise(resolve => webmEncoder.compile(false, resolve));
let videoBlobUrl = URL.createObjectURL(blob);
它使用whammy库将一堆webp图像合并为一个webm视频。在支持webp编码的浏览器中,您可以编写canvas.toDataURL("image/webp")
以便从画布中获取webp dataURL。 This是与Firefox Webp支持有关的错误报告。
在撰写本文时,一种跨浏览器方法似乎是使用libwebp.js将canvas.toDataURL()
输出的png dataURLs转换为webp图像,然后将其输入到whammy编码器中以获取最终的webm视频。不幸的是,png-> webp编码过程非常慢(在笔记本电脑上播放几秒钟的视频需要几分钟)。
编辑:我发现,与“笨拙”方法相比,使用MediaRecorder
/ captureStream
方法可以得到低质量的输出视频。因此,除非有某种方法可以控制捕获的流的质量,否则whammy
方法似乎是最好的方法,而其他两种方法是后备方法。有关更多详细信息,请参见this question。使用此代码段来检测浏览器是否支持webp
编码(并因此支持笨拙的方法):
let webPEncodingIsSupported = document.createElement('canvas').toDataURL('image/webp').startsWith('data:image/webp');