炸裂，用JS建立一個錄屏功能

作者：Lokender Singh
譯者：前端小智
來源：dev

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

OBS studio很酷，但 JavaScript 更酷，現在，我們用 JavaScript 建立自己的錄屏功能。

首先，建立一個HTML檔案，包含記錄按鈕和一個播放標籤，內容如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <video class="video" width="600px" controls></video>
    <button class="record-btn">record</button>

    <script src="./index.js"></script>
  </body>
</html>

然後在建立 index.js，監聽按鈕的點選：

let btn = document.querySelector(".record-btn");

btn.addEventListener("click", function () {
  console.log("hello");
});

在瀏覽器中開啟 html檔案，點選按鈕，我們可以在控制檯看到列印的 hello。

現在把列印去掉，換成如下的內容：

let btn = document.querySelector(".record-btn");

btn.addEventListener("click", async function () {
  let stream = await navigator.mediaDevices.getDisplayMedia({
    video: true
  });
});

現在點選按鈕，會彈出螢幕選擇框：

因為，我現在用的是兩個螢幕，所以會出現兩個選擇。

現在你可能認為選擇一個螢幕，然後點選分享，就開始錄製了。非也，這個比我們想象中的複雜點。我們要使用 MediaRecorder 來錄製我們的視訊。

let btn = document.querySelector(".record-btn")

btn.addEventListener("click", async function () {
  let stream = await navigator.mediaDevices.getDisplayMedia({
    video: true
  })

  // 需要更好的瀏覽器支援
  const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") 
             ? "video/webm; codecs=vp9" 
             : "video/webm"
    let mediaRecorder = new MediaRecorder(stream, {
        mimeType: mime
    })
    // 必須手動啟動
    mediaRecorder.start()
})

當我們的螢幕被錄製下來時，mediaRecorder 會給我們提供分塊的資料，我們需要將這些資料儲存在一個變數中。

let btn = document.querySelector(".record-btn")

btn.addEventListener("click", async function () {
  let stream = await navigator.mediaDevices.getDisplayMedia({
    video: true
  })

  // 需要更好的瀏覽器支援
  const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") 
             ? "video/webm; codecs=vp9" 
             : "video/webm"
    let mediaRecorder = new MediaRecorder(stream, {
        mimeType: mime
    })

    let chunks = []
    mediaRecorder.addEventListener('dataavailable', function(e) {
        chunks.push(e.data)
    })

    // 必須手動啟動
    mediaRecorder.start()
})

現在，當我們點選停止共享按鈕時，希望在我們的 video元素中播放錄製的視訊，可以這麼做：

let btn = document.querySelector(".record-btn")

btn.addEventListener("click", async function () {
  let stream = await navigator.mediaDevices.getDisplayMedia({
    video: true
  })

  // 需要更好的瀏覽器支援
  const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") 
             ? "video/webm; codecs=vp9" 
             : "video/webm"
    let mediaRecorder = new MediaRecorder(stream, {
        mimeType: mime
    })

    let chunks = []
    mediaRecorder.addEventListener('dataavailable', function(e) {
        chunks.push(e.data)
    })

     mediaRecorder.addEventListener('stop', function(){
          let blob = new Blob(chunks, {
              type: chunks[0].type
          })

          let video = document.querySelector(".video")
          video.src = URL.createObjectURL(blob)
      })


    // 必須手動啟動
    mediaRecorder.start()
})

現在基本就可以完成了，可以在潤色下，如自動下載錄製的視訊，可以這麼做：

let btn = document.querySelector(".record-btn")

btn.addEventListener("click", async function () {
  let stream = await navigator.mediaDevices.getDisplayMedia({
    video: true
  })

  // 需要更好的瀏覽器支援
  const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") 
             ? "video/webm; codecs=vp9" 
             : "video/webm"
    let mediaRecorder = new MediaRecorder(stream, {
        mimeType: mime
    })

    let chunks = []
    mediaRecorder.addEventListener('dataavailable', function(e) {
        chunks.push(e.data)
    })

   mediaRecorder.addEventListener('stop', function(){
      let blob = new Blob(chunks, {
          type: chunks[0].type
      })
      let url = URL.createObjectURL(blob)

      let video = document.querySelector("video")
      video.src = url

      let a = document.createElement('a')
      a.href = url
      a.download = 'video.webm'
      a.click()
  })


    // 必須手動啟動
    mediaRecorder.start()
})

現在，最基本的一個錄製功能就完善了，動手來試試吧！！

~完，我是刷碗智，勵志等退休後，要回家擺地攤的人，我們下期見！

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：https://dev.to/0shuvo0/lets-c...

交流

文章每週持續更新，可以微信搜尋【大遷世界】第一時間閱讀，回覆【福利】有多份前端視訊等著你，本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，歡迎Star。

炸裂，用JS建立一個錄屏功能

交流

相關文章