本文將介紹如何用JS實現(xiàn)簡單的屏幕錄像機。

一、錄制準備

創(chuàng)建一個按鈕

<button id="recording-toggle">Start recording</button>

書寫JavaScript

var RECORDING_ONGOING = false;
var recordingToggle = document.getElementById("recording-toggle"); // 按鈕

recordingToggle.addEventListener("click", function(){
     RECORDING_ONGOING = !RECORDING_ONGOING; // 開始 / 停止 錄制
     if(RECORDING_ONGOING){
         recordingToggle.innerHTML = "Stop Recording";
         startRecording(); // 開始錄制
     } else {
         recordingToggle.innerHTML = "Start Recording";
         stopRecording(); // 停止錄制
 }
});

看起來內容很多，但實際上，只是向按鈕添加一個事件偵聽器來開始和停止記錄并相應地更改文本。

二、開始錄制

在寫功能函數(shù)之前，聲明 3 個全局變量（在函數(shù)之外）。

var blob, mediaRecorder = null;
var chunks = [];

現(xiàn)在，開始屏幕錄制

async function startRecording(){
     var stream = await navigator.mediaDevices.getDisplayMedia(
         {video: {mediaSource: "screen"}, audio: true}
     );

     deviceRecorder = new deviceRecorder(stream, {mimeType: "video/webm"});
}

在用戶屏幕之外創(chuàng)建媒體流。媒體記錄器有一個mimeType. 這是你想要的輸出文件類型。

可以mimeTypes 在此處閱讀更多相關信息。

Edge 支持video/webmmime 類型。這是文件擴展名.webm?？梢酝ㄟ^以下方式檢查瀏覽器是否支持mimeType：

console.log(MediaRecorder.isTypeSupported("video/webm"))
console.log(MediaRecorder.isTypeSupported("video/mp4"))
console.log(MediaRecorder.isTypeSupported("video/mp4;codecs=avc1"))

向該函數(shù)添加幾行startRecording

 deviceRecorder.ondataavailable = (e) => {
     if(e.data.size > 0){
         chunks.push(e.data);
     }
 }
 deviceRecorder.onstop = () => {
     chunks = [];
 }
 deviceRecorder.start(250)

每當有數(shù)據時，都會將其添加到塊數(shù)組（之前定義）中。當停止錄制時，將調用該stopRecording() 函數(shù)。

三、停止錄制

function stopRecording(){
     var filename = window.prompt("File name", "video"); // Ask the file name

     deviceRecorder.stop(); // 停止錄制
     blob = new Blob(chunks, {type: "video/webm"})
     chunks = [] // 重置數(shù)據塊
     var dataDownloadUrl = URL.createObjectURL(blob);

     // 將其下載到用戶的設備上
     let a = document.createElement('a')
     a.href = dataDownloadUrl;
     a.download = `${filename}.webm`
     a.click()
 
     URL.revokeObjectURL(dataDownloadUrl)
}

用JS做錄屏就是這么簡單。如果你想要 mp4 或其他格式，則必須使用 API 進行轉換或自己進行轉換。

瀏覽器會通知是否正在共享屏幕

作者：京東保險?張潔

來源：京東云開發(fā)者社區(qū) 轉載請注明來源文章來源地址http://www.zghlxwxcb.cn/news/detail-760456.html

到了這里，關于用JS實現(xiàn)簡單的屏幕錄像機的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！