1、创建一个HTML

OBS studio很酷，但 JavaScript 更酷，现在，我们用 JavaScript 创建自己的录屏功能。

首先，创建一个HTML文件，包含记录按钮和一个播放标签，内容如下：

<!DOCTYPE html>
<html><head><title>Parcel Sandbox</title><meta charset="UTF-8" /></head><body><video class="video" width="600px" controls></video><button class="record-btn">record</button><script src="./index.js"></script></body>
</html>

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

let btn = document.querySelector(".record-btn");btn.addEventListener("click", function () {console.log("hello");
});

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

2、使用mediaRecorder录制并存入变量中

let btn = document.querySelector(".record-btn");btn.addEventListener("click", async function () {let stream = await navigator.mediaDevices.getDisplayMedia({video: true});
});

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

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

let btn = document.querySelector(".record-btn")btn.addEventListener("click", async function () {let stream = await navigator.mediaDevices.getDisplayMedia({video: true})// 需要更好的浏览器支持const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ? "video/webm; codecs=vp9" : "video/webm"let mediaRecorder = new MediaRecorder(stream, {mimeType: mime})// 必须手动启动mediaRecorder.start()
})

当我们的屏幕被录制下来时，mediaRecorder 会给我们提供分块的数据，我们需要将这些数据存储在一个变量中。

let btn = document.querySelector(".record-btn")btn.addEventListener("click", async function () {let stream = await navigator.mediaDevices.getDisplayMedia({video: true})// 需要更好的浏览器支持const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ? "video/webm; codecs=vp9" : "video/webm"let mediaRecorder = new MediaRecorder(stream, {mimeType: mime})let chunks = []mediaRecorder.addEventListener('dataavailable', function(e) {chunks.push(e.data)})// 必须手动启动mediaRecorder.start()
})

3、停止屏幕共享播放录制视频

现在，当我们点击停止共享按钮时，希望在我们的 video元素中播放录制的视频，可以这么做：

let btn = document.querySelector(".record-btn")btn.addEventListener("click", async function () {let stream = await navigator.mediaDevices.getDisplayMedia({video: true})// 需要更好的浏览器支持const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ? "video/webm; codecs=vp9" : "video/webm"let mediaRecorder = new MediaRecorder(stream, {mimeType: mime})let chunks = []mediaRecorder.addEventListener('dataavailable', function(e) {chunks.push(e.data)})mediaRecorder.addEventListener('stop', function(){let blob = new Blob(chunks, {type: chunks[0].type})let video = document.querySelector(".video")video.src = URL.createObjectURL(blob)})// 必须手动启动mediaRecorder.start()
})

4、自动下载录制的视频

现在基本就可以完成了，可以在润色下，如自动下载录制的视频，可以这么做：

let btn = document.querySelector(".record-btn")btn.addEventListener("click", async function () {let stream = await navigator.mediaDevices.getDisplayMedia({video: true})// 需要更好的浏览器支持const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ? "video/webm; codecs=vp9" : "video/webm"let mediaRecorder = new MediaRecorder(stream, {mimeType: mime})let chunks = []mediaRecorder.addEventListener('dataavailable', function(e) {chunks.push(e.data)})mediaRecorder.addEventListener('stop', function(){let blob = new Blob(chunks, {type: chunks[0].type})let url = URL.createObjectURL(blob)let video = document.querySelector("video")video.src = urllet a = document.createElement('a')a.href = urla.download = 'video.webm'a.click()})// 必须手动启动mediaRecorder.start()
})

现在，最基本的一个录制功能就完善了，大家动手来试试吧！

5、完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>wgchen</title><link rel="shortcut icon" href="#" /><meta name="keywords" content="https://wgchen.blog.csdn.net"><meta name="keywords" content="技术文章"><meta name="keywords" content="博客"><meta name="keywords" content="willem"><meta name="keywords" content="ycc">
</head>
<body><video class="video" width="600px" controls></video>
<button class="record-btn">record</button><script>let btn = document.querySelector(".record-btn")btn.addEventListener("click", async function () {let stream = await navigator.mediaDevices.getDisplayMedia({video: true})// 需要更好的浏览器支持const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ? "video/webm; codecs=vp9" : "video/webm"let mediaRecorder = new MediaRecorder(stream, {mimeType: mime})let chunks = []mediaRecorder.addEventListener('dataavailable', function(e) {chunks.push(e.data)})mediaRecorder.addEventListener('stop', function(){let blob = new Blob(chunks, {type: chunks[0].type})let url = URL.createObjectURL(blob)let video = document.querySelector("video")video.src = urllet a = document.createElement('a')a.href = urla.download = 'video.webm'a.click()})// 必须手动启动mediaRecorder.start()
})</script>  </body>
</html>

JavaScript实现一个录屏功能相关推荐

如何使用JS实现一个录屏功能
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取. 带大家用JavaScript实现一个录屏功能.OBS studio很好用,但JavaScript也一样好用, ...
苹果11怎么录屏_苹果手机隐藏着一个录屏功能，你还不知道吗？录屏软件怎么选？...
随着现在手机视频,手机直播的兴起,对于手机录屏的需求越来越多了,以前手机录屏都要借助专门的录屏APP,现在苹果手机在IOS11版本中加入了录屏功能,不需要第三方APP软件就可以了,但是好像还是有很多果 ...
win10如何打开摄像头_Win10专业版如何开启自带录屏功能？Win10录屏功能的开启方法...
在win10系统中有非常多实用的小功能,需要我们去挖掘使用,例如录屏功能.往常我们使用需要录制视频的时候要去下载安装第三方软件,微软为了让用户使用环境更加安全自带了一个录屏功能,方便快捷,确保系统不受 ...
为什么苹果录屏没有声音_原来苹果手机自带录屏功能，还能同时录制声音，教你这样开启...
最近有位朋友新买了一部苹果手机,发现不能录屏,其实苹果手机内置一个录屏功能,还能同时录制声音,下面教你如何开启. 一.自带的屏幕录制 1.首先我们需要把录屏的快捷键,添加到控制中心里面,先打开苹果手机 ...
JavaScript在chrome浏览器实现录屏功能
js实现录屏功能代码实现 <video class="video" controls width="600px"></video>&l ...
苹果录屏功能没有声音_其实苹果手机也有录屏功能！简单操作几步，就能轻松开启...
现在手机中的娱乐方式越来越多了,大家遇到有趣的事情就想分享给朋友,但是一些视频不能直接分享链接,还是挺麻烦的. 不过我们可以通过录屏的方式来进行分享的,其实苹果手机就自带录屏工具,简单操作几步,就能轻 ...
android 手机录屏功能,手机自带录屏功能在哪里找？轻松搞定屏幕录制
手机的录屏功能如何使用?智能手机发展到现在,除了无线通话功能.讯息发送功能之外,又逐渐发展出拍照功能.上网功能.各类应用交互功能.尤其近几年在手机上看视频成为打发碎片化时间的重要消遣,在手机上录屏的需 ...
为什么苹果6没有录屏_谁说苹果手机没有录屏功能的！教你这样开启，还能录制声音呢...
说到苹果手机,手机性能是真的强,而且系统也是非常的流畅和好用,网上许多人都说苹果手机没有录屏功能,其实苹果手机也是有录屏功能的,而且录制的画面非常的清晰,连声音都能录制,下面我们就来一起看看吧. (1 ...
Win10自带的录屏功能怎么用？
大家在使用电脑的时候可能需要录制屏幕上的一些东西,其实Win10系统自带录屏功能,使用起来非常方便,下面我们就来看看这款功能要怎么使用吧. Win10自带的录屏功能怎么使用?Win10自带录屏功能使用 ...

JavaScript实现一个录屏功能

阅读目录