主頁(yè) > 知識(shí)庫(kù) > 詳解如何將 Canvas 繪制過(guò)程轉(zhuǎn)為視頻

詳解如何將 Canvas 繪制過(guò)程轉(zhuǎn)為視頻

熱門(mén)標(biāo)簽:江西ai電銷(xiāo)機(jī)器人如何 西安金倫外呼系統(tǒng) 高德地圖標(biāo)注廁所 中國(guó)地圖標(biāo)注城市的 通遼地圖標(biāo)注app 地圖標(biāo)注員工作內(nèi)容 地圖標(biāo)注沿海城市房?jī)r(jià) 智能語(yǔ)音電銷(xiāo)機(jī)器人客戶(hù)端 威海語(yǔ)音外呼系統(tǒng)平臺(tái)

如果我們用Canvas實(shí)現(xiàn)了一些動(dòng)畫(huà)效果,需要將它回放出來(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)單的例子。

錄制視頻

首先我們寫(xiě)一個(gè)非常簡(jiǎn)單的Canvas動(dòng)畫(huà)效果,代碼如下:

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寬高的矩形在畫(huà)布中心旋轉(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ù)寫(xiě)入到頁(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ì)象,可以看這篇文章。

最后,我們開(kāi)始錄制視頻,并設(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é)開(kāi)發(fā)了一個(gè)非常好用的封裝,項(xiàng)目地址在這里,可以在這里看到具體的例子。

到此這篇關(guān)于詳解如何將 Canvas 繪制過(guò)程轉(zhuǎn)為視頻的文章就介紹到這了,更多相關(guān)Canvas 繪制過(guò)程轉(zhuǎn)為視頻內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

標(biāo)簽:青海 阜陽(yáng) 營(yíng)口 眉山 北海 晉中 河池 崇左

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《詳解如何將 Canvas 繪制過(guò)程轉(zhuǎn)為視頻》,本文關(guān)鍵詞  詳解,如何,將,Canvas,繪制,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《詳解如何將 Canvas 繪制過(guò)程轉(zhuǎn)為視頻》相關(guān)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于詳解如何將 Canvas 繪制過(guò)程轉(zhuǎn)為視頻的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章