自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

炸裂，用JS創(chuàng)建一個錄屏功能

作者：前端小智
開發(fā) 前端
OBS studio很酷，但 JavaScript 更酷，現(xiàn)在，我們用 JavaScript 創(chuàng)建自己的錄屏功能。首先，創(chuàng)建一個HTML文件，包含記錄按鈕和一個播放標(biāo)簽。

[[434260]]

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

首先，創(chuàng)建一個HTML文件，包含記錄按鈕和一個播放標(biāo)簽，內(nèi)容如下：

  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4.     <title>Parcel Sandbox</title> 
  5.     <meta charset="UTF-8" /> 
  6.   </head> 
  7.   <body> 
  8.     <video class="video" width="600px" controls></video> 
  9.     <button class="record-btn">record</button> 
  10.  
  11.     <script src="./index.js"></script> 
  12.   </body> 
  13. </html> 

然后在創(chuàng)建 index.js，監(jiān)聽按鈕的點(diǎn)擊：

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

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


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

  1. let btn = document.querySelector(".record-btn"); 
  2.  
  3. btn.addEventListener("click", async function () { 
  4.   let stream = await navigator.mediaDevices.getDisplayMedia({ 
  5.     video: true 
  6.   }); 
  7. }); 

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

因為，我現(xiàn)在用的是兩個屏幕，所以會出現(xiàn)兩個選擇。

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

  1. let btn = document.querySelector(".record-btn") 
  2.  
  3. btn.addEventListener("click", async function () { 
  4.   let stream = await navigator.mediaDevices.getDisplayMedia({ 
  5.     video: true 
  6.   }) 
  7.  
  8.   // 需要更好的瀏覽器支持 
  9.   const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")  
  10.              ? "video/webm; codecs=vp9"  
  11.              : "video/webm" 
  12.     let mediaRecorder = new MediaRecorder(stream, { 
  13.         mimeType: mime 
  14.     }) 
  15.     // 必須手動啟動 
  16.     mediaRecorder.start() 
  17. }) 

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

  1. let btn = document.querySelector(".record-btn") 
  2.  
  3. btn.addEventListener("click", async function () { 
  4.   let stream = await navigator.mediaDevices.getDisplayMedia({ 
  5.     video: true 
  6.   }) 
  7.  
  8.   // 需要更好的瀏覽器支持 
  9.   const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")  
  10.              ? "video/webm; codecs=vp9"  
  11.              : "video/webm" 
  12.     let mediaRecorder = new MediaRecorder(stream, { 
  13.         mimeType: mime 
  14.     }) 
  15.  
  16.     let chunks = [] 
  17.     mediaRecorder.addEventListener('dataavailable', function(e) { 
  18.         chunks.push(e.data) 
  19.     }) 
  20.  
  21.     // 必須手動啟動 
  22.     mediaRecorder.start() 
  23. }) 

現(xiàn)在，當(dāng)我們點(diǎn)擊停止共享按鈕時，希望在我們的 video元素中播放錄制的視頻，可以這么做：

  1. let btn = document.querySelector(".record-btn") 
  2.  
  3. btn.addEventListener("click", async function () { 
  4.   let stream = await navigator.mediaDevices.getDisplayMedia({ 
  5.     video: true 
  6.   }) 
  7.  
  8.   // 需要更好的瀏覽器支持 
  9.   const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")  
  10.              ? "video/webm; codecs=vp9"  
  11.              : "video/webm" 
  12.     let mediaRecorder = new MediaRecorder(stream, { 
  13.         mimeType: mime 
  14.     }) 
  15.  
  16.     let chunks = [] 
  17.     mediaRecorder.addEventListener('dataavailable', function(e) { 
  18.         chunks.push(e.data) 
  19.     }) 
  20.  
  21.      mediaRecorder.addEventListener('stop', function(){ 
  22.           let blob = new Blob(chunks, { 
  23.               type: chunks[0].type 
  24.           }) 
  25.  
  26.           let video = document.querySelector(".video") 
  27.           video.src = URL.createObjectURL(blob) 
  28.       }) 
  29.  
  30.  
  31.     // 必須手動啟動 
  32.     mediaRecorder.start() 
  33. }) 

現(xiàn)在基本就可以完成了，可以在潤色下，如自動下載錄制的視頻，可以這么做：

  1. let btn = document.querySelector(".record-btn") 
  2.  
  3. btn.addEventListener("click", async function () { 
  4.   let stream = await navigator.mediaDevices.getDisplayMedia({ 
  5.     video: true 
  6.   }) 
  7.  
  8.   // 需要更好的瀏覽器支持 
  9.   const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")  
  10.              ? "video/webm; codecs=vp9"  
  11.              : "video/webm" 
  12.     let mediaRecorder = new MediaRecorder(stream, { 
  13.         mimeType: mime 
  14.     }) 
  15.  
  16.     let chunks = [] 
  17.     mediaRecorder.addEventListener('dataavailable', function(e) { 
  18.         chunks.push(e.data) 
  19.     }) 
  20.  
  21.    mediaRecorder.addEventListener('stop', function(){ 
  22.       let blob = new Blob(chunks, { 
  23.           type: chunks[0].type 
  24.       }) 
  25.       let url = URL.createObjectURL(blob) 
  26.  
  27.       let video = document.querySelector("video") 
  28.       video.src = url 
  29.  
  30.       let a = document.createElement('a') 
  31.       a.href = url 
  32.       a.download = 'video.webm' 
  33.       a.click() 
  34.   }) 
  35.  
  36.  
  37.     // 必須手動啟動 
  38.     mediaRecorder.start() 
  39. }) 

現(xiàn)在，最基本的一個錄制功能就完善了，動手來試試吧!!

作者：Lokender Singh 譯者：前端小智

來源：dev 原文：https://dev.to/0shuvo0/lets-create-a-screen-recorder-with-js-3leb

 

責(zé)任編輯：姜華 來源： 大遷世界
JS 錄屏功能JavaScript
相關(guān)推薦

2022-03-04 14:17:08

JS工具庫錄音

2023-05-10 08:05:41

GoWeb應(yīng)用

2018-12-04 15:10:56

Python微信備忘錄

2021-04-23 16:40:49

Three.js前端代碼

2023-10-18 08:03:40

2022-06-21 08:52:47

Node.js服務(wù)端JavaScript

2018-12-04 13:30:28

Javascript編譯原理前端

2012-06-07 09:00:06

2016-03-01 14:37:47

華為

2022-06-05 13:52:32

Node.jsDNS 的原理DNS 服務(wù)器

2022-03-07 09:20:00

JavaScripThree.jsNFT

2022-10-20 11:49:49

JS動畫幀，CSS

2013-04-06 18:52:20

2012-04-24 09:22:16

軟件測試

2016-03-08 09:52:22

xcode插件開發(fā)

2020-12-02 13:00:17

Recast.AI聊天機(jī)器人人工智能

2022-07-07 08:50:26

Python可視化模塊代碼

2020-04-09 08:47:38

Java對象線程

2023-06-05 05:50:52

GNOMEShell

2013-01-15 11:42:50

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號