如何将 png 图像数据数组转换为视频文件 [英] How to convert array of png image data into video file

问题描述

我通过 canvas.getDataURL() 从 canvas 获取帧.

I am getting frames from canvas through canvas.getDataURL().

但是，现在我有一组 png 图像，但我想要一个视频文件.

However, now I have an array of png images, but I want a video file.

我该怎么做?

var canvas = document.getElementById("mycanvaselementforvideocapturing");
var pngimages = [];
...
setInterval(function(){pngimages.push(canvas.toDataURL())}, 1000);

推荐答案

对于完整的浏览器支持方式，您必须将图像批处理发送到服务器，然后使用一些服务器端程序进行编码.

For a full browser support way, you'll have to send your image batch to the server then use some server-side program to do the encoding.

FFmpeg 或许可以做到.

但在最新的浏览器中，canvas.captureStream 方法，已经实现.它将您的画布绘图转换为 webm 视频流，可使用 MediaRecorder.尽管如此，所有这些仍然不稳定，并且只能在最新版本的浏览器中使用，可能在用户首选项中设置了一些标志(例如，chrome 需要实验性网络平台").

But in newest browsers the canvas.captureStream method, has been implemented. It will convert your canvas drawings to a webm video stream, recordable with a MediaRecorder. All of this is still not stabilized though, and will only be available in latest version of browsers, probably with some flags set in user's preferences (e.g chrome needs the "Experimental Web Platforms" one).

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>

并且由于您要求一种向此视频添加音频的方法，请注意您可以在调用 new MediaRecorder 之前使用 cStream.addTrack(anAudioStream.getAudioTracks()[0]);(cStream)，但这目前仅适用于 chrome，FF 似乎在 MediaRecorder 中有一个错误，这使得它只记录带有定义为轨道的流......FF 的解决方法是调用 new MediaStream([videoTrack, audioTrack]);

And since you asked for a way to add audio to this video, note that you can use cStream.addTrack(anAudioStream.getAudioTracks()[0]); before calling new MediaRecorder(cStream), but this will currently only work in chrome, FF seems to have a bug in MediaRecorder which makes it record only the stream with the tracks it was defined to... A workaround for FF is to call new MediaStream([videoTrack, audioTrack]);

[非常感谢@jib 让我知道如何实际使用它...]

video.onend --> video.onended

这篇关于如何将 png 图像数据数组转换为视频文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！