前端新世界 - 讓我們用 JavaScript 創建一個錄屏程序－鑽石舞台

喜歡就關注我們吧

OBS錄屏軟件很酷，但我們也可以使用JavaScript創建我們自己的錄屏程序。

猜猜會怎麼樣？結果並不僅限於記錄瀏覽器屏幕哦。

是的，你沒有看錯。儘管JavaScript在瀏覽器上運行，但我們不但可以使用JS來記錄活動標籤頁，而且還可以記錄任意標籤頁或整個屏幕。

現在讓我們開始吧。

首先我們需要一個HTML文件，因為得有錄製按鈕和視頻元素，我們將在這個視頻元素里播放錄製的視頻。

<!DOCTYPEhtml><html><head><title>ParcelSandbox</title><metacharset="UTF-8"/></head><body><videoclass="video"width="600px"controls></video><buttonclass="record-btn">record</button><scriptsrc="./index.js"></script></body></html>

我們還需要一個JS文件，所以讓我們創建index.js

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

現在如果我們在瀏覽器中打開它並單擊按鈕，我們應該可以在控制台中看到hello。

好的，現在替換console.log，顯示視頻信息流。

letbtn=document.querySelector(".record-btn");btn.addEventListener("click",asyncfunction(){letstream=awaitnavigator.mediaDevices.getDisplayMedia({video:true});});

現在，如果你點擊按鈕，你會看到這個彈出窗口。

你可能認為我們已經選定了窗口或屏幕並單擊了共享，然後應該可以開始錄製了？還不行，還要更複雜一些。我們必須自己錄製視頻。這裡我們使用MediaRecorder來錄製。

當錄製屏幕時，mediaRecorder將以塊的形式為我們提供數據，我們需要將這些數據存儲在一個變量中。

現在，當點擊停止共享按鈕時，我們希望錄製的視頻在視頻元素中播放，所以我們這樣做：

letbtn=document.querySelector(".record-btn")btn.addEventListener("click",asyncfunction(){letstream=awaitnavigator.mediaDevices.getDisplayMedia({video:true})//判斷瀏覽器是否支持constmime=MediaRecorder.isTypeSupported("video/webm;codecs=vp9")?"video/webm;codecs=vp9":"video/webm"letmediaRecorder=newMediaRecorder(stream,{mimeType:mime})letchunks=[]mediaRecorder.addEventListener('dataavailable',function(e){chunks.push(e.data)})mediaRecorder.addEventListener('stop',function(){letblob=newBlob(chunks,{type:chunks[0].type})letvideo=document.querySelector(".video")video.src=URL.createObjectURL(blob)})//開始手動錄製mediaRecorder.start()})

最後，自動下載錄製的視頻。

letbtn=document.querySelector(".record-btn")btn.addEventListener("click",asyncfunction(){letstream=awaitnavigator.mediaDevices.getDisplayMedia({video:true})//判斷瀏覽器是否支持constmime=MediaRecorder.isTypeSupported("video/webm;codecs=vp9")?"video/webm;codecs=vp9":"video/webm"letmediaRecorder=newMediaRecorder(stream,{mimeType:mime})letchunks=[]mediaRecorder.addEventListener('dataavailable',function(e){chunks.push(e.data)})mediaRecorder.addEventListener('stop',function(){letblob=newBlob(chunks,{type:chunks[0].type})leturl=URL.createObjectURL(blob)letvideo=document.querySelector("video")video.src=urlleta=document.createElement('a')a.href=urla.download='video.webm'a.click()})//開始手動錄製mediaRecorder.start()})

現在我們有了一個功能齊全的錄屏應用程序。撒花！

感謝大家的閱讀。我們下次再見。