1、开始录制
让我们创建一个按钮：
<button id="recording-toggle">Start recording</button>JavaScript 代码
代码语言：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
}
});看起来这里似乎有很多内容，但实际上，我们只是在按钮上添加了一个事件监听器，以便启动和停止录制，并相应地更改文本。
编写录制核心代码
在函数之前，声明3个全局变量（在函数外部）。
代码语言：javascript复制var blob, mediaRecorder = null;
var chunks = [];现在，让我们开始屏幕录制。
代码语言：javascript复制async function startRecording(){
var stream = await navigator.mediaDevices.getDisplayMedia(
{video: {mediaSource: "screen"}, audio: true}
);
deviceRecorder = new deviceRecorder(stream, {mimeType: "video/webm"});
}我们从用户的屏幕创建一个媒体流。媒体记录器有一个 mimeType，它是您所希望的输出文件的类型。
您可以在这里阅读更多关于 mimeType 的信息。
Edge 浏览器支持 video/webm mimeType。该文件扩展名为 .webm。您可以使用以下方式检查浏览器是否支持某个 mimeType：
代码语言：javascript复制console.log(MediaRecorder.isTypeSupported("video/webm"))
console.log(MediaRecorder.isTypeSupported("video/mp4"))
console.log(MediaRecorder.isTypeSupported("video/mp4;codecs=avc1"))在这篇文章中，我将使用 Webm，但您可以根据需要更改 mimeType。
在 startRecording 函数中添加几行代码：
代码语言：javascript复制 deviceRecorder.ondataavailable = (e) => {
if(e.data.size > 0){
chunks.push(e.data);
}
}
deviceRecorder.onstop = () => {
chunks = [];
}
deviceRecorder.start(250)每当我们有数据时，我们将其添加到之前定义的 chunks 数组中。当我们停止录制时，我们将调用 stopRecording() 函数。
停止录制
代码语言：javascript复制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 中进行屏幕录制的简单方法。如果您想要使用 mp4 或其他格式，您将需要使用 API 进行转换或自行处理。
结束
在本文中，我们介绍了使用 JavaScript 进行屏幕录制的简单方法。通过使用浏览器提供的媒体记录器 API，我们可以轻松地捕捉用户屏幕的内容并创建录屏文件。无论是进行教学演示、演讲稿录制还是创建应用程序演示视频，屏幕录制都是一个非常有用的工具。您可以根据需要选择不同的输出文件类型，并根据自己的需求进行扩展和定制。我希望本文对您理解和使用 JavaScript 的录屏 API 有所帮助。
谢谢您阅读本文，如果您对其他 JavaScript API 和功能感兴趣，请继续关注我的系列文章。在接下来的文章中，我将继续介绍更多有趣和实用的内容，如通知、浏览器历史记录以及音频和视频录制等。请留意我的更新，获取最新的技术资讯和教程。
希望您喜欢这篇文章，如果您有任何问题或意见，请随时与我联系。再次感谢您的阅读！
