用JS創(chuàng)建一個(gè)錄屏功能

更新時(shí)間：2021年11月10日 09:38:48 作者：前端小智

這篇文章主要介紹了利用JS創(chuàng)建一個(gè)錄屏功能，創(chuàng)建這個(gè)功能錢我們首先創(chuàng)建一個(gè)HTML文件，包含記錄按鈕和一個(gè)播放標(biāo)簽，下面來(lái)看看創(chuàng)建的詳細(xì)過(guò)程

OBS studio很酷，但 JavaScript 更酷，現(xiàn)在，我們用 JavaScript 創(chuàng)建自己的錄屏功能。

首先，創(chuàng)建一個(gè)HTML文件，包含記錄按鈕和一個(gè)播放標(biāo)簽，

內(nèi)容如下：

<!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>

然后在創(chuàng)建 index.js，

監(jiān)聽按鈕的點(diǎn)擊：

let btn = document.querySelector(".record-btn"); 
 
btn.addEventListener("click", function () { 
  console.log("hello"); 
});

在瀏覽器中打開 html文件，點(diǎn)擊按鈕，我們可以在控制臺(tái)看到打印的 hello。

現(xiàn)在把打印去掉，換成如下的內(nèi)容：

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

現(xiàn)在點(diǎn)擊按鈕，會(huì)彈出屏幕選擇框：

因?yàn)?，我現(xiàn)在用的是兩個(gè)屏幕，所以會(huì)出現(xiàn)兩個(gè)選擇。

現(xiàn)在你可能認(rèn)為選擇一個(gè)屏幕，然后點(diǎn)擊分享，就開始錄制了。非也，這個(gè)比我們想象中的復(fù)雜點(diǎn)。我們要使用 MediaRecorder 來(lái)錄制我們的視頻。

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 
    }) 
    // 必須手動(dòng)啟動(dòng) 
    mediaRecorder.start() 
})

當(dāng)我們的屏幕被錄制下來(lái)時(shí)，mediaRecorder 會(huì)給我們提供分塊的數(shù)據(jù)，我們需要將這些數(shù)據(jù)存儲(chǔ)在一個(gè)變量中。

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) 
    }) 
 
    // 必須手動(dòng)啟動(dòng) 
    mediaRecorder.start() 
})

現(xiàn)在，當(dāng)我們點(diǎn)擊停止共享按鈕時(shí)，希望在我們的 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) 
      }) 
 
 
    // 必須手動(dòng)啟動(dòng) 
    mediaRecorder.start() 
})

現(xiàn)在基本就可以完成了，可以在潤(rùn)色下，如自動(dòng)下載錄制的視頻，

可以這么做：

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() 
  }) 
 
 
    // 必須手動(dòng)啟動(dòng) 
    mediaRecorder.start() 
})

現(xiàn)在，最基本的一個(gè)錄制功能就完善了，動(dòng)手來(lái)試試吧!!

到此這篇關(guān)于用JS創(chuàng)建一個(gè)錄屏功能的文章就介紹到這了,更多相關(guān)JS創(chuàng)建一個(gè)錄屏功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: