快捷導(dǎo)航

使用20行JS代碼實(shí)現(xiàn)屏幕錄制功能

更新時(shí)間：2023年11月10日 08:27:48 作者：南城FE

在開發(fā)中可能有遇到過屏幕錄制的需求,無論是教學(xué)、演示還是游戲錄制,都需要通過屏幕錄制來記錄和分享內(nèi)容,MediaRecorder?是一種強(qiáng)大的技術(shù),可以在瀏覽器端實(shí)現(xiàn)屏幕錄制功能,本文將介紹如何使用JS?MediaRecorder?實(shí)現(xiàn)屏幕錄制,需要的朋友可以參考下

代碼實(shí)現(xiàn)

要實(shí)現(xiàn)屏幕錄制，我們需要通過 navigator.mediaDevices.getDisplayMedia() 方法獲取屏幕媒體流，這個(gè)方法會(huì)彈出一個(gè)選擇窗口，讓用戶選擇要錄制的屏幕或窗口。但出于安全原因，發(fā)起錄制時(shí)必須確保用戶手勢(shì)觸發(fā)捕獲，例如點(diǎn)擊按鈕：

const button = document.createElement("button");
button.innerHTML = "capture";
document.body.append(button);
button.addEventListener("click", async () => {
  // TODO
});

點(diǎn)擊后，獲取視頻流并錄制，獲取到媒體流后，我們可以將其傳給 MediaRecorder 對(duì)象后開始屏幕錄制。

const stream = await navigator.mediaDevices.getDisplayMedia();
const recoder = new MediaRecorder(stream);
recoder.start();

當(dāng)用戶停止共享屏幕時(shí)停止錄制，調(diào)用 recoder.stop()即可停止錄制。

const [video] = stream.getVideoTracks();
video.addEventListener("ended", () => {
  recoder.stop();
});

監(jiān)聽recoder的dataavailable事件獲取錄制文件并通過URL.createObjectURL()方法將其轉(zhuǎn)換為可下載的URL，供用戶下載錄制的視頻文件。

recoder.addEventListener("dataavailable", (evt) => {
  const a = document.createElement("a");
  a.href = URL.createObjectURL(evt.data);
  a.download = "capture.webm";
  a.click();
});

這樣一個(gè)簡(jiǎn)單的屏幕記錄器就完成了，不到20行代碼就實(shí)現(xiàn)了整個(gè)屏幕錄制的核心功能。完整代碼如下：

button.addEventListener("click", async () => {
  const stream = await navigator.mediaDevices.getDisplayMedia();
  const recoder = new MediaRecorder(stream);
  recoder.start();

  const [video] = stream.getVideoTracks();
  video.addEventListener("ended", () => {
    recoder.stop();
  });

  recoder.addEventListener("dataavailable", (evt) => {
    const a = document.createElement("a");
    a.href = URL.createObjectURL(evt.data);
    a.download = "capture.webm";
    a.click();
  });
});

瀏覽器兼容

目前的瀏覽器支持情況，對(duì)于較低的版本需要升級(jí)才能使用。

實(shí)現(xiàn)這么強(qiáng)大的功能只需要這么少的代碼確實(shí)是很不錯(cuò)的感覺，但是這只是一個(gè)簡(jiǎn)單的錄制功能，實(shí)際開發(fā)中要考慮的因素相對(duì)會(huì)比較多，由于屏幕錄制可能消耗較多的資源，因此在長(zhǎng)時(shí)間錄制時(shí)，我們應(yīng)該提示用戶錄制時(shí)間或大小的限制，并提供相應(yīng)的操作和反饋。

使用 MediaRecorder 我們可以方便地實(shí)現(xiàn)屏幕錄制功能。這種功能在教學(xué)、演示等場(chǎng)景下非常有用，同時(shí)也為開發(fā)者提供了更多創(chuàng)造性的可能性。有興趣的可以體驗(yàn)使用看看效果，在實(shí)際使用中也要合理使用此功能，確保用戶隱私和數(shù)據(jù)安全。

以上就是使用20行JS代碼實(shí)現(xiàn)屏幕錄制功能的詳細(xì)內(nèi)容，更多關(guān)于JS屏幕錄制的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: