使用瀏覽器錄製螢幕

老毛發表於2022-01-08
瀏覽器
最近有一個錄製螢幕的需求，類似於錄製軟體的操作教程給別人演示。在網上搜了一下錄製螢幕，結果大多需要下載安裝，而且有收費或者廣告。無意間找到一個使用瀏覽器線上錄屏的網站，出於好奇，研究了一下實現的方式，並完成了一個可以使用的小作品和大家分享，連結放到了文末。
找到的線上錄屏的網站地址是 SOOGIF 它是需要你註冊登入才能使用螢幕錄製功能，而且錄製完成，不花錢只能獲得有限的幾次下載機會。因此，我打算自己做一個類似的應用。

Web API 介面

要實現這個功能，主要用到的介面有2個：

下面具體記錄一下實現的細節。

填充基本的頁面元素

如果你熟悉一些Web前端的知識，那麼下面的內容你就再熟悉不過了：

<p>This example shows you the contents of the selected part of your display.
Click the Start Capture button to begin.</p>
<q>點選開始捕獲按鈕，選擇你要捕獲的視窗。</q>

<p>
<button id="start">開始捕獲</button>&nbsp;
<button id="stop">停止捕獲</button>
<button id="recordBtn">開始錄製</button>
<button id="downloadBtn">下載</button>
</p>

<video id="video" autoplay></video>
<br>

<strong>Log:</strong>
<br>
<pre id="log"></pre>

加入簡單的樣式：

#video {
      border: 1px solid #999;
      width: 98%;
      max-width: 860px;
}
.error {
      color: red;
}
 .warn {
      color: orange;
}
.info {
      color: darkgreen;
}

頁面大概的樣子
demo

JavaScript處理點選按鈕邏輯

首先獲取到頁面上的元素，並宣告相關變數：

const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");
const videoElem = document.getElementById("video");
const logElem = document.getElementById("log");
const recordBtn = document.getElementById("recordBtn");
const downloadBtn = document.getElementById("downloadBtn");
let captureStream = null;
let mediaRecorder = null;
let isRecording = false;
let recordedBlobs = [];

處理點選 開始捕獲 按鈕的邏輯：

// Options for getDisplayMedia()
const displayMediaOptions = {
  video: {
    cursor: "always"
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100
  }
};

async function startCapture(displayMediaOptions) {
  try {
    videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    captureStream = videoElem.srcObject
    dumpOptionsInfo();
  } catch(err) {
    console.error("Error: " + err);
  }
}

function dumpOptionsInfo() {
  const videoTrack = videoElem.srcObject.getVideoTracks()[0];
  console.info("Track settings:");
  console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
  console.info("Track constraints:");
  console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
}

function stopCapture(evt) {
  let tracks = videoElem.srcObject.getTracks();
  tracks.forEach(track => track.stop());
  videoElem.srcObject = null;
  showMsg('使用者停止了分享螢幕');
}

// Set event listeners for the start and stop buttons 給按鈕新增監聽事件
startElem.addEventListener("click", function(evt) {
  startCapture();
}, false);

stopElem.addEventListener("click", function(evt) {
  stopCapture();
}, false);

當點選開始捕獲按鈕，瀏覽器會彈出下面的類似頁面：
capture
選擇你想要錄製的瀏覽器頁面或者視窗，甚至是整個螢幕都可以被錄製。

當選擇好視窗，點選了分享按鈕，被捕獲的視窗的資料流會被同步到我們頁面的video標籤中，實時取樣：
sample

這時我們就可以錄製了，下面處理 開始錄製 按鈕的邏輯：

function startRecording() {
  
  const mimeType = getSupportedMimeTypes()[0];
  const options = { mimeType };

  try {
    mediaRecorder = new MediaRecorder(captureStream, options);
  } catch (e) {
    showMsg(`建立MediaRecorder出錯: ${JSON.stringify(e)}`);
    return;
  }
  recordBtn.textContent = '停止錄製';
  isRecording = true;
  downloadBtn.disabled = true;
  mediaRecorder.onstop = (event) => {
    showMsg('錄製停止了: ' + event);
  };
  mediaRecorder.ondataavailable = handleDataAvailable;
  mediaRecorder.start();
  showMsg('錄製開始 mediaRecorder: ' + mediaRecorder);
}

function handleDataAvailable(event) {
  console.log('handleDataAvailable', event);
  if (event.data && event.data.size > 0) {
    recordedBlobs.push(event.data);
  }
}

function stopRecord() {
  isRecording = false;
  mediaRecorder.stop();
  downloadBtn.disabled = false;
  recordBtn.textContent = "開始錄製";
  recordedBlobs = []
}

處理下載按鈕邏輯：

downloadBtn.addEventListener('click', () => {
  const blob = new Blob(recordedBlobs, { type: 'video/webm' });
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = '錄屏_' + new Date().getTime() + '.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }, 100);
});

至此，這個錄屏的Demo就完成了。錄製的檔案格式是webm，你可以在瀏覽器中開啟它。

有需要馬上就用的小夥伴也可以直接使用我做好的版本，有比較好看的UI。傳送門

相關文章