使用JavaScript實現一個錄屏插件

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

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

準備工作

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

1、getDisplayMedia

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

基本用法

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

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

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

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

重要特性

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

安全和隱私

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

應用場景

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

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

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

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

安裝jyeontu腳手架

npm install jyeontu

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

jyeontu create

選擇 Chrome 插件模板 即可

初始化

npm run init

打包

npm run build

插件開發(fā)

目標

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

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

3、結束錄屏后輸出視頻文件

功能實現

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

const id = "screenRecording"; //generateRandomString(8);
chrome.contextMenus.create({
  title: "開始錄屏", //菜單的名稱
  id: id, //一級菜單的id
  contexts: ["page"], // page表示頁面右鍵就會有這個菜單，如果想要當選中文字時才會出現此右鍵菜單，用：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 等可選參數
    chrome.windows.create(createData);
  }
});

3、判斷是否錄屏彈窗

直接判斷路徑參數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("軌道結束: ", 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ān)聽錄屏結束事件，并使用a標簽將錄制視頻下載到本地。

function getFormattedCurrentTime() {
  const now = new Date(); // 獲取當前時間
  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);
});