共计 3477 个字符，预计需要花费 9 分钟才能阅读完成。
作者：Lokender Singh
译者：前端小智
起源：dev
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
咱们正在招聘，年薪：25-60 万 + 奖金，有趣味的能够点我理解详情。
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。
当初把打印去掉，换成如下的内容：
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()})当初，当咱们点击进行共享按钮时，心愿在咱们的 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()})当初根本就能够实现了，能够在润色下，如主动下载录制的视频，能够这么做：
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()})当初，最根本的一个录制性能就欠缺了，入手来试试吧！！
~ 完，我是刷碗智，励志等退休后，要回家摆地摊的人，咱们下期见！
代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
原文：https://dev.to/0shuvo0/lets-c…
交换
文章每周继续更新，能够微信搜寻 【大迁世界】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送 Star。
