如果我們用Canvas實(shí)現(xiàn)了一些動(dòng)畫效果，需要將它回放出來(lái)，很多人通常就是用錄屏工具將屏幕內(nèi)容錄下來(lái)播放，很少有人知道，Canvas可以直接通過(guò)現(xiàn)代瀏覽器支持的 Media Streams API 來(lái)轉(zhuǎn)成視頻。
Canvas對(duì)象支持captureStream方法，這個(gè)方法會(huì)返回一個(gè)MediaStream對(duì)象。然后，我們可以通過(guò)這個(gè)對(duì)象創(chuàng)建一個(gè)MediaRecorder來(lái)錄屏。
我們看一個(gè)簡(jiǎn)單的例子。
錄制視頻
首先我們寫一個(gè)非常簡(jiǎn)單的Canvas動(dòng)畫效果，代碼如下：
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const {width, height} = canvas;
ctx.fillStyle = 'red';
function draw(rotation = 0) {
ctx.clearRect(0, 0, 1000, 1000);
ctx.save();
ctx.translate(width / 2, height / 2);
ctx.rotate(rotation);
ctx.translate(-width / 2, -height / 2);
ctx.beginPath();
ctx.rect(200, 200, 200, 200);
ctx.fill();
ctx.restore();
}
function update(t) {
draw(t / 500);
requestAnimationFrame(update);
}
update(0);
這個(gè)效果實(shí)現(xiàn)一個(gè)200寬高的矩形在畫布中心旋轉(zhuǎn)。
接下來(lái)，我們將這個(gè)效果錄制下來(lái)，假設(shè)我們錄制6秒的視頻，首先我們要獲取MediaStream對(duì)象：
const stream = canvas.captureStream();
然后，我們創(chuàng)建一個(gè)MediaRecorder：
const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
接著我們可以注冊(cè)ondataavailable事件，將數(shù)據(jù)記錄下來(lái)：
const data = [];
recorder.ondataavailable = function (event) {
if (event.data && event.data.size) {
data.push(event.data);
}
};
在onstop事件里，我們通過(guò)Blob對(duì)象，將數(shù)據(jù)寫入到頁(yè)面上的video標(biāo)簽中。
recorder.onstop = () => {
const url = URL.createObjectURL(new Blob(data, { type: 'video/webm' }));
document.querySelector("#videoContainer").style.display = "block";
document.querySelector("video").src = url;
};
如果你不了解 Blob 對(duì)象，可以看這篇文章。
最后，我們開始錄制視頻，并設(shè)定在6秒鐘之后停止錄制：
recorder.start();
setTimeout(() => {
recorder.stop();
}, 6000);
這樣，就可以達(dá)到我們想要的錄屏效果了。
完整的代碼在https://codepen.io/akira-cn/pen/LYNVewy。
與音頻結(jié)合
Canvas 錄制好的視頻，我們還可以將它和音頻結(jié)合，方法是通過(guò) ffmpeg 的 Web 端來(lái)合成。
瀏覽器可以通過(guò) WebAssembly 來(lái)集成 ffmpeg，具體的項(xiàng)目在這里，有興趣的同學(xué)可以研究下。
ffmpeg 的 Web API 用起來(lái)還比較復(fù)雜，奇舞團(tuán)的同學(xué)開發(fā)了一個(gè)非常好用的封裝，項(xiàng)目地址在這里，可以在這里看到具體的例子。
到此這篇關(guān)于詳解如何將 Canvas 繪制過(guò)程轉(zhuǎn)為視頻的文章就介紹到這了,更多相關(guān)Canvas 繪制過(guò)程轉(zhuǎn)為視頻內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
