炸裂，用JS创建一个录屏功能

最新推荐文章于 2025-06-30 09:06:53 发布

原创

最新推荐文章于 2025-06-30 09:06:53 发布 · 542 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#经验分享 #前端 #前端框架

本文介绍了如何使用JavaScript创建一个录屏功能，包括获取屏幕共享流、利用MediaRecorder进行视频录制，以及处理录制数据和播放回放的过程。通过监听按钮点击事件，调用navigator.mediaDevices.getDisplayMedia获取屏幕流，并使用MediaRecorder开始录制。当停止录制时，已分块的录制数据可以通过video元素回放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

record

然后在创建 index.js，监听按钮的点击：

let btn = document.querySelector(“.record-btn”);

btn.addEventListener(“click”, function () {

console.log(“hello”);

});

在浏览器中打开 html文件，点击按钮，我们可以在控制台看到打印的 hello。

现在把打印去掉，换成如下的内容：

let btn = document.querySelector(“.record-btn”);

btn.addEventListener(“click”, async function () {

let stream = await navigator.mediaDevices.getDisplayMedia({

video: true

});

现在点击按钮，会弹出屏幕选择框：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q3I3Ckpv-1636589217256)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b337d89faf9436aa751888a3ed922c4~tplv-k3u1fbpfcp-watermark.image?)]

因为，我现在用的是两个屏幕，所以会出现两个选择。

现在你可能认为选择一个屏幕，然后点击分享，就开始录制了。非也，这个比我们想象中的复杂点。我们要使用 MediaRecorder