簡單的學(xué)習(xí)下 JavaScript 錄屏API
學(xué)習(xí)如何使用這個(gè)簡單易用的API進(jìn)行屏幕共享、屏幕錄制等操作。
盡管需要對(duì)JavaScript有一定的了解，但我相信你已經(jīng)具備了這方面的知識(shí)。
讓我們創(chuàng)建一個(gè)按鈕：
<button id="recording-toggle">Start recording</button>
JavaScript 代碼
var RECORDING_ONGOING = false;
var recordingToggle = document.getElementById("recording-toggle"); // The button
recordingToggle.addEventListener("click", function(){
RECORDING_ONGOING = !RECORDING_ONGOING; // Start / Stop recording
if(RECORDING_ONGOING){
recordingToggle.innerHTML = "Stop Recording";
startRecording(); // Start the recording
} else {
recordingToggle.innerHTML = "Start Recording";
stopRecording(); // Stop screen recording
}
});
看起來這里似乎有很多內(nèi)容，但實(shí)際上，我們只是在按鈕上添加了一個(gè)事件監(jiān)聽器，以便啟動(dòng)和停止錄制，并相應(yīng)地更改文本。
編寫錄制核心代碼在函數(shù)之前，聲明3個(gè)全局變量（在函數(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)建一個(gè)媒體流。媒體記錄器有一個(gè) mimeType，它是您所希望的輸出文件的類型。
您可以在這里閱讀更多關(guān)于 mimeType 的信息。
Edge 瀏覽器支持 video/webm mimeType。該文件擴(kuò)展名為 .webm。您可以使用以下方式檢查瀏覽器是否支持某個(gè) mimeType：
console.log(MediaRecorder.isTypeSupported("video/webm"))
console.log(MediaRecorder.isTypeSupported("video/mp4"))
console.log(MediaRecorder.isTypeSupported("video/mp4;codecs=avc1"))
在這篇文章中，我將使用 Webm，但您可以根據(jù)需要更改 mimeType。
在 startRecording 函數(shù)中添加幾行代碼：
deviceRecorder.ondataavailable = (e) => {
if(e.data.size > 0){
chunks.push(e.data);
}
}
deviceRecorder.onstop = () => {
chunks = [];
}
deviceRecorder.start(250)
每當(dāng)我們有數(shù)據(jù)時(shí)，我們將其添加到之前定義的 chunks 數(shù)組中。當(dāng)我們停止錄制時(shí)，我們將調(diào)用 stopRecording() 函數(shù)。
停止錄制
function stopRecording(){
var filename = window.prompt("File name", "video"); // Ask the file name
deviceRecorder.stop(); // Stopping the recording
blob = new Blob(chunks, {type: "video/webm"})
chunks = [] // Resetting the data chunks
var dataDownloadUrl = URL.createObjectURL(blob);
// Downloadin it onto the user's device
let a = document.createElement('a')
a.href = dataDownloadUrl;
a.download = `${filename}.webm`
a.click()
URL.revokeObjectURL(dataDownloadUrl)
}
這就是在 JavaScript 中進(jìn)行屏幕錄制的簡單方法。如果您想要使用 mp4 或其他格式，您將需要使用 API 進(jìn)行轉(zhuǎn)換或自行處理。
在本文中，我們介紹了使用 JavaScript 進(jìn)行屏幕錄制的簡單方法。通過使用瀏覽器提供的媒體記錄器 API，我們可以輕松地捕捉用戶屏幕的內(nèi)容并創(chuàng)建錄屏文件。無論是進(jìn)行教學(xué)演示、演講稿錄制還是創(chuàng)建應(yīng)用程序演示視頻，屏幕錄制都是一個(gè)非常有用的工具。您可以根據(jù)需要選擇不同的輸出文件類型，并根據(jù)自己的需求進(jìn)行擴(kuò)展和定制。我希望本文對(duì)您理解和使用 JavaScript 的錄屏 API 有所幫助。
謝謝您閱讀本文，如果您對(duì)其他 JavaScript API 和功能感興趣，請(qǐng)繼續(xù)關(guān)注我的系列文章。在接下來的文章中，我將繼續(xù)介紹更多有趣和實(shí)用的內(nèi)容，如通知、瀏覽器歷史記錄以及音頻和視頻錄制等。請(qǐng)留意我的更新，獲取最新的技術(shù)資訊和教程。
希望您喜歡這篇文章，如果您有任何問題或意見，請(qǐng)隨時(shí)與我聯(lián)系。再次感謝您的閱讀！
由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請(qǐng)別忘了點(diǎn)贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時(shí)，如果您想獲取更多前端技術(shù)的知識(shí)，歡迎關(guān)注我，您的支持將是我分享最大的動(dòng)力。我會(huì)持續(xù)輸出更多內(nèi)容，敬請(qǐng)期待。