快捷導(dǎo)航

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

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

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

代碼實現(xiàn)

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

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

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

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

當(dāng)用戶停止共享屏幕時停止錄制，調(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();
});

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

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