App下載

將Canvas繪制過程轉(zhuǎn)為視頻方法分享!

猿友 2021-08-04 10:51:36 瀏覽數(shù) (2673)
反饋

我們在平常的開發(fā)中可以通過html5中的canvas進行動畫效果實現(xiàn),那么今天小編就來和大家講講有關(guān)于:“將Canvas繪制過程轉(zhuǎn)為視頻方法分享!”這個方法的相關(guān)內(nèi)容吧!

如果我們用Canvas實現(xiàn)了一些動畫效果,需要將它回放出來,很多人通常就是用錄屏工具將屏幕內(nèi)容錄下來播放,很少有人知道,Canvas可以直接通過現(xiàn)代瀏覽器支持的 Media Streams API 來轉(zhuǎn)成視頻。

Canvas對象支持captureStream方法,這個方法會返回一個MediaStream對象。然后,我們可以通過這個對象創(chuàng)建一個MediaRecorder來錄屏。

我們看一個簡單的例子。

錄制視頻

首先我們寫一個非常簡單的Canvas動畫效果,代碼如下:

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);

這個效果實現(xiàn)一個200寬高的矩形在畫布中心旋轉(zhuǎn)。

接下來,我們將這個效果錄制下來,假設(shè)我們錄制6秒的視頻,首先我們要獲取MediaStream對象:

const stream = canvas.captureStream();

然后,我們創(chuàng)建一個MediaRecorder:

const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });

接著我們可以注冊ondataavailable事件,將數(shù)據(jù)記錄下來:

const data = [];
recorder.ondataavailable = function (event) {
  if (event.data && event.data.size) {
    data.push(event.data);
  }
};

在onstop事件里,我們通過Blob對象,將數(shù)據(jù)寫入到頁面上的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 對象,可以看這篇文章。

最后,我們開始錄制視頻,并設(shè)定在6秒鐘之后停止錄制:

recorder.start();

setTimeout(() => {
  recorder.stop();
}, 6000);

這樣,就可以達到我們想要的錄屏效果了。

完整的代碼在https://codepen.io/akira-cn/pen/LYNVewy。

與音頻結(jié)合

Canvas 錄制好的視頻,我們還可以將它和音頻結(jié)合,方法是通過 ffmpeg 的 Web 端來合成。
瀏覽器可以通過 WebAssembly 來集成 ffmpeg,具體的項目在這里,有興趣的同學(xué)可以研究下。
ffmpeg 的 Web API 用起來還比較復(fù)雜,奇舞團的同學(xué)開發(fā)了一個非常好用的封裝,項目地址在這里,可以在這里看到具體的例子。

以上就是關(guān)于“將Canvas繪制過程轉(zhuǎn)為視頻方法分享!”這篇文章方法的詳解,更多相關(guān)Canvas的內(nèi)容請搜索W3Cschool進行了解! 


0 人點贊