Parcel Sandbox

> 作者：Lokender Singh > 译者：前端小智 > 来源：dev > 有梦想，有干货，微信搜索 **【大迁世界】** 关注这个在凌晨还在刷碗的刷碗智。 > > 本文 GitHub [https://github.com/qq449245884/xiaozhi](https://github.com/qq449245884/xiaozhi) 已收录，有一线大厂面试完整考点、资料以及我的系列文章。 [我们正在招聘，年薪：25-60万+奖金，有兴趣的可以点我了解详情。]( http://mp.weixin.qq.com/s?__biz=MzI0NDQ0ODU3MA==&mid=2247504813&idx=1&sn=ee63154735cbd3cb62cb162539fafc7c&chksm=e95f3ff8de28b6ee78903569ae182f21e7a1ebb8891a8adcddf254c46c37652ede962745890f#rd) OBS studio很酷，但 JavaScript 更酷，现在，我们用 JavaScript 创建自己的录屏功能。首先，创建一个HTML文件，包含记录按钮和一个播放标签，内容如下： ``` Parcel Sandbox

``` 然后在创建 `index.js`，监听按钮的点击： ``` let btn = document.querySelector(".record-btn"); btn.addEventListener("click", function () { console.log("hello"); }); ``` 在浏览器中打开 html文件，点击按钮，我们可以在控制台看到打印的 `hello`。 ![011.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa9e7a5726c84a60b172b82e640439ad~tplv-k3u1fbpfcp-watermark.image?) 现在把打印去掉，换成如下的内容： ``` let btn = document.querySelector(".record-btn"); btn.addEventListener("click", async function () { let stream = await navigator.mediaDevices.getDisplayMedia({ video: true }); }); ``` 现在点击按钮，会弹出屏幕选择框： ![012.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b337d89faf9436aa751888a3ed922c4~tplv-k3u1fbpfcp-watermark.image?) 因为，我现在用的是两个屏幕，所以会出现两个选择。现在你可能认为选择一个屏幕，然后点击分享，就开始录制了。非也，这个比我们想象中的复杂点。我们要使用 **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://www.fundebug.com/?utm_source=xiaozhi)。** 原文：https://dev.to/0shuvo0/lets-create-a-screen-recorder-with-js-3leb ## 交流文章每周持续更新，可以微信搜索**【大迁世界】**第一时间阅读，回复**【福利】**有多份前端视频等着你，本文 GitHub [https://github.com/qq449245884/xiaozhi](https://github.com/qq449245884/xiaozhi) 已经收录，欢迎Star。