使用简单的JavaScript创建一个屏幕录屏工具

欢迎大家来到IT世界,在知识的湖畔探索吧!

转载说明：原创不易，未经授权，谢绝任何形式的转载

学习如何使用这个简单易用的API进行屏幕共享、屏幕录制等操作。尽管需要对JavaScript有一定的了解，但我相信你已经具备了这方面的知识。

1、开始录制

让我们创建一个按钮：

欢迎大家来到IT世界,在知识的湖畔探索吧!

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

欢迎大家来到IT世界,在知识的湖畔探索吧!

JavaScript 代码

欢迎大家来到IT世界,在知识的湖畔探索吧!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个全局变量（在函数外部）。

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

现在，让我们开始屏幕录制。

欢迎大家来到IT世界,在知识的湖畔探索吧!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：

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

在这篇文章中，我将使用 Webm，但您可以根据需要更改 mimeType。

在 startRecording 函数中添加几行代码：

欢迎大家来到IT世界,在知识的湖畔探索吧! deviceRecorder.ondataavailable = (e) => { if(e.data.size > 0){ chunks.push(e.data); } } deviceRecorder.onstop = () => { chunks = []; } deviceRecorder.start(250)

每当我们有数据时，我们将其添加到之前定义的 chunks 数组中。当我们停止录制时，我们将调用 stopRecording() 函数。

停止录制

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 和功能感兴趣，请继续关注我的系列文章。在接下来的文章中，我将继续介绍更多有趣和实用的内容，如通知、浏览器历史记录以及音频和视频录制等。请留意我的更新，获取最新的技术资讯和教程。

希望您喜欢这篇文章，如果您有任何问题或意见，请随时与我联系。再次感谢您的阅读！

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。