如何將PNG圖像數據數組轉換爲視頻文件

Question

我從canvas到canvas.getDataURL()獲取幀。

但是，現在我有一個PNG圖像數組，但我想要一個視頻文件。

我該怎麼做？

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

Answer 1

對於一個完整的瀏覽器支持的方式，你有你的圖片批量發送到服務器，然後使用一些服務器端程序做編碼。

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

既然你問的方式來添加音頻視頻，請注意，你可以在調用new MediaRecorder(cStream)之前使用cStream.addTrack(anAudioStream.getAudioTracks()[0]);，但這將在Chrome目前只工作，FF似乎有MediaRecorder中的一個錯誤，它使得它只記錄流被定義的軌道...... FF的解決方法是致電new MediaStream([videoTrack, audioTrack]);

[非常感謝@jib讓我知道如何實際使用它。 ..]