快捷導(dǎo)航

使用JavaScript實現(xiàn)一個錄屏插件

更新時間：2024年10月23日 09:57:09 作者：JYeontu

不知道大家平時都是使用什么錄屏軟件呢,有沒有想過只用JavaScript我們也可以快速實現(xiàn)一個錄屏插件呢,感興趣的小伙伴就跟隨小編一起學(xué)習(xí)一下吧

準備工作

開始寫代碼前我們需要先了解一下以下幾點：

1、getDisplayMedia

navigator.mediaDevices.getDisplayMedia() 是一種基于Web的API，它允許網(wǎng)站在獲得用戶同意的情況下，捕獲用戶的屏幕或屏幕的特定部分作為媒體流。這個API是Media Capture and Streams API的一部分，通常用于實現(xiàn)屏幕共享功能，例如遠程協(xié)作、視頻會議或直播。

基本用法

getDisplayMedia() 方法返回一個Promise，該Promise解析為一個MediaStream對象，其中包含屏幕捕獲的數(shù)據(jù)。使用此方法的基本步驟如下：

調(diào)用 getDisplayMedia() 并傳入配置對象，指定所需的媒體類型和可選的約束條件。
處理Promise解析后的MediaStream對象，例如將其用作MediaRecorder的源或顯示在<video>元素中。

if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
  const displayMediaOptions = {
    video: {
      cursor: "always" // 捕獲鼠標(biāo)指針
    },
    audio: false // 不捕獲音頻
  };

  navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .then(stream => {
      // 屏幕捕獲成功，'stream' 包含屏幕的媒體流
    })
    .catch(error => {
      // 捕獲屏幕失敗
      console.error("Error: ", error);
    });
}

重要特性

用戶授權(quán)：出于安全和隱私的考慮，瀏覽器要求用戶明確授權(quán)才能進行屏幕捕獲。
異步操作：getDisplayMedia() 是異步的，返回一個Promise對象。
媒體類型：可以捕獲視頻和/或音頻，具體取決于getDisplayMedia()調(diào)用中的配置選項。
瀏覽器兼容性：不同的瀏覽器可能有不同的實現(xiàn)和支持程度，需要檢查navigator.mediaDevices.getDisplayMedia是否存在。

安全和隱私

屏幕捕獲是一個敏感操作，因為它可能涉及到捕獲用戶的敏感信息。因此，瀏覽器會要求用戶明確授權(quán)。
網(wǎng)站在使用getDisplayMedia()時應(yīng)該明確告知用戶，并在獲得用戶同意后進行。

應(yīng)用場景

視頻會議：用戶可以共享他們的屏幕或應(yīng)用程序窗口，以便在遠程會議中展示內(nèi)容。
直播：游戲直播者可以共享他們的游戲畫面。
遠程支持：技術(shù)支持人員可以請求訪問用戶的屏幕來幫助解決問題。

getDisplayMedia() 提供了一種強大的方式，允許Web應(yīng)用以用戶控制的方式捕獲和使用屏幕內(nèi)容。

2、快速開發(fā)一個插件

可以通過腳手架快速生成一個插件基本框架。

安裝jyeontu腳手架

npm install jyeontu

使用腳手架快速創(chuàng)建新項目

jyeontu create

選擇 Chrome 插件模板 即可

初始化

npm run init

打包

npm run build

插件開發(fā)

目標(biāo)

1、在瀏覽器中頁面右鍵菜單加上開始錄屏按鈕

2、點擊開始錄屏按鈕后彈出新頁面選擇錄取的屏幕

3、結(jié)束錄屏后輸出視頻文件

功能實現(xiàn)

1、瀏覽器右鍵菜單添加按鈕

const id = "screenRecording"; //generateRandomString(8);
chrome.contextMenus.create({
  title: "開始錄屏", //菜單的名稱
  id: id, //一級菜單的id
  contexts: ["page"], // page表示頁面右鍵就會有這個菜單，如果想要當(dāng)選中文字時才會出現(xiàn)此右鍵菜單，用：selection
});

2、監(jiān)聽右鍵菜單點擊事件

這里直接借用百度首頁做個中間頁面來觸發(fā)錄屏事件

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId == id) {
    var createData = {
      url: "https://baidu.com?isStartMediaRecorder=1",
      // url: chrome.runtime.getURL("recorder.html"),
      type: "normal",
      top: 200,
      left: 300,
      width: 1300,
      height: 800,
    };
    // 創(chuàng)建（打開）一個新的瀏覽器窗口，可以提供大小、位置或默認 URL 等可選參數(shù)
    chrome.windows.create(createData);
  }
});

3、判斷是否錄屏彈窗

直接判斷路徑參數(shù)isStartMediaRecorder即可

localStorage.setItem("isMediaRecorderEnd", false);
const url = new URL(location.href);
const isStartMediaRecorder = url.searchParams.get("isStartMediaRecorder");
if (isStartMediaRecorder) {
  document.body.style.display = "flex";
  document.body.innerHTML = `<div
    style="
      font-size: large;
      margin: auto;
      font-weight: bold;
      text-align: center;
    "
  >
    錄制中
  </div>`;
  startMediaRecorder();
}

4、開始錄屏

function startRecorder(stream) {
  var mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
    ? "video/webm; codecs=vp9"
    : "video/webm";
  var mediaRecorder = new MediaRecorder(stream, { mimeType: mime }); // 錄制

  var chunks = [];
  mediaRecorder.addEventListener("dataavailable", function (e) {
    chunks.push(e.data);
  });

  // 監(jiān)聽用戶取消屏幕共享
  stream.getTracks().forEach((track) => {
    track.addEventListener("ended", function (e) {
      console.log("軌道結(jié)束: ", e);
      // 用戶取消屏幕共享，執(zhí)行清理操作
      mediaRecorder.stop(); // 停止錄制
    });
  });

  mediaRecorder.start(); // 手動啟動錄制
}
function startMediaRecorder() {
  navigator.mediaDevices
    .getDisplayMedia({
      video: true,
    })
    .then((stream) => {
      startRecorder(stream);
    })
    .catch((err) => {
      console.warn(err);
      localStorage.setItem("isMediaRecorderEnd", true);
    });
}

5、錄屏結(jié)束

監(jiān)聽錄屏結(jié)束事件，并使用a標(biāo)簽將錄制視頻下載到本地。

function getFormattedCurrentTime() {
  const now = new Date(); // 獲取當(dāng)前時間
  const year = now.getFullYear(); // 年份
  const month = (now.getMonth() + 1).toString().padStart(2, "0"); // 月份，加1因為月份是從0開始的
  const day = now.getDate().toString().padStart(2, "0"); // 日期
  const hours = now.getHours().toString().padStart(2, "0"); // 小時
  const minutes = now.getMinutes().toString().padStart(2, "0"); // 分鐘
  const seconds = now.getSeconds().toString().padStart(2, "0"); // 秒
  return `${year}${month}${day}${hours}${minutes}${seconds}`;
}

mediaRecorder.addEventListener("stop", function () {
  var blob = new Blob(chunks, { type: "video/webm" }); // 確保Blob的MIME類型正確
  var url = URL.createObjectURL(blob);
  var a = document.createElement("a");
  a.href = url;
  a.download = getFormattedCurrentTime() + "-video.webm";
  a.click();
  setTimeout(() => {
    localStorage.setItem("isMediaRecorderEnd", true);
  }, 200);
});