OBS录屏软件很酷，但我们也可以使用JavaScript创建我们自己的录屏程序。
猜猜会怎么样？结果并不仅限于记录浏览器屏幕哦。
是的，你没有看错。尽管JavaScript在浏览器上运行，但我们不但可以使用JS来记录活动标签页，而且还可以记录任意标签页或整个屏幕。
现在让我们开始吧。
首先我们需要一个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>
我们还需要一个JS文件，所以让我们创建index.js
let btn = document.querySelector(".record-btn");
btn.addEventListener("click", function () {
console.log("hello");
});
现在如果我们在浏览器中打开它并单击按钮，我们应该可以在控制台中看到hello
。
好的，现在替换console.log
，显示视频信息流。
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()
})
现在，当点击停止共享按钮时，我们希望录制的视频在视频元素中播放，所以我们这样做：
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()
})
最后，自动下载录制的视频。
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 = url
let a = document.createElement('a')
a.href = url
a.download = 'video.webm'
a.click()
})
//开始手动录制
mediaRecorder.start()
})
现在我们有了一个功能齐全的录屏应用程序。撒花！
感谢大家的阅读。我们下次再见。
每日分享前端插件干货，欢迎关注！
点赞和在看就是最大的支持❤️
文章转载自前端新世界，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。
