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

问题描述

我从画布到 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需要实验Web平台）。

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.onend = 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>

由于您要求添加音频注意，在调用之前可以使用 cStream.addTrack（anAudioStream.getAudioTracks（）[0]）; new MediaRecorder（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让我知道实际使用它...]

[big thanks to @jib for letting me know how to actually use it...]

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