快捷導(dǎo)航

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

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

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

準(zhǔn)備工作

開始寫代碼前我們需要先了解一下以下幾點(diǎn)：

1、getDisplayMedia

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

基本用法

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

調(diào)用 getDisplayMedia() 并傳入配置對(duì)象，指定所需的媒體類型和可選的約束條件。
處理Promise解析后的MediaStream對(duì)象，例如將其用作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)才能進(jìn)行屏幕捕獲。
異步操作：getDisplayMedia() 是異步的，返回一個(gè)Promise對(duì)象。
媒體類型：可以捕獲視頻和/或音頻，具體取決于getDisplayMedia()調(diào)用中的配置選項(xiàng)。
瀏覽器兼容性：不同的瀏覽器可能有不同的實(shí)現(xiàn)和支持程度，需要檢查navigator.mediaDevices.getDisplayMedia是否存在。

安全和隱私

屏幕捕獲是一個(gè)敏感操作，因?yàn)樗赡苌婕暗讲东@用戶的敏感信息。因此，瀏覽器會(huì)要求用戶明確授權(quán)。
網(wǎng)站在使用getDisplayMedia()時(shí)應(yīng)該明確告知用戶，并在獲得用戶同意后進(jìn)行。

應(yīng)用場(chǎng)景

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

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

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

可以通過(guò)腳手架快速生成一個(gè)插件基本框架。

安裝jyeontu腳手架

npm install jyeontu

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

jyeontu create

選擇 Chrome 插件模板 即可

初始化

npm run init

打包

npm run build

插件開發(fā)

目標(biāo)

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

2、點(diǎn)擊開始錄屏按鈕后彈出新頁(yè)面選擇錄取的屏幕

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

功能實(shí)現(xiàn)

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

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

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

這里直接借用百度首頁(yè)做個(gè)中間頁(yè)面來(lái)觸發(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)建（打開）一個(gè)新的瀏覽器窗口，可以提供大小、位置或默認(rèn) 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(); // 手動(dòng)啟動(dòng)錄制
}
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)前時(shí)間
  const year = now.getFullYear(); // 年份
  const month = (now.getMonth() + 1).toString().padStart(2, "0"); // 月份，加1因?yàn)樵路菔菑?開始的
  const day = now.getDate().toString().padStart(2, "0"); // 日期
  const hours = now.getHours().toString().padStart(2, "0"); // 小時(shí)
  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);
});