如何JS写一个简单的录屏功能,代码是什么
Admin 2022-07-06 群英技术资讯 622 次浏览
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() })
现在,最基本的一个录制功能就完善了,动手来试试吧!!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要给大家介绍keep-alive,keep-alive的设计初衷就是为了保持组件的状态,避免组件的重复渲染,那么keep-alive是如何保持组件状态的呢?为什么keep-alive可以直接使用?下面我们来具体的了解看看。
这篇文章主要为大家详细介绍了vue实现div高度可拖拽,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这篇文章主要为大家详细介绍了layui实现登陆界面验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
不少朋友应该都有玩过俄罗斯方块小游戏吧,俄罗斯方块是个很经典的小游戏,下面我们就来尝试一下用JS实现实现俄罗斯方块游戏,下文有实现思路和代码,感兴趣的朋友可以参考学习。
这篇文章给大家分享的是JS中设置表格高度的方法和操作。小编觉得挺实用的,因此分享给大家做个参考,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008