用JS创建一个录屏功能
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()
})
现在，最基本的一个录制功能就完善了，动手来试试吧!!
到此这篇关于用JS创建一个录屏功能的文章就介绍到这了,更多相关JS创建一个录屏功能内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JS创建或填充任意长度数组的小技巧汇总
目录 前言 直接填充法 for 循环 push() 法 Array 构造函数法 在 Array 构造函数后面加上 fill() 方法 使用 undefined 填充数组 使用 Array.from() 进行映射 用值填充数组 使用唯一(非共享的)对象创建数组 用升序整数数列创建数组 用任意范围的整数进行创建 另一种创建升序整数数组的方法使用 keys() 总结 前言 在 JavaScript 开发中,经常需要有需要创建特性长度数组的场景,本文总结了几种创建或填充任意长度的数组的小技巧,学会了可以
-
用JS创建一个录屏功能
OBS studio很酷,但 JavaScript 更酷,现在,我们用 JavaScript 创建自己的录屏功能. 首先,创建一个HTML文件,包含记录按钮和一个播放标签, 内容如下: <!DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> </head> <body> <
-
js实现简单锁屏功能实例
本文实例讲述了js实现简单锁屏功能的方法.分享给大家供大家参考.具体实现方法如下: //********* 锁屏DIV *************************** function LockScreen(tag,title,width,height,url) { if (tag) //锁屏 { var lockdiv = document.getElementById("lockscreen"); if (lockdiv!=null) { lockdiv.style.dis
-
详解有关Android截图与录屏功能的学习
简单的截屏和录屏功能. 因为MediaProjection是5.0以上才出现的,所以今天所讲述功能实现,只在5.0以上的系统有效. 截屏: 步骤如下: 1:获取MediaProjectionManager 2:通过MediaProjectionManager.createScreenCaptureIntent()获取Intent 3:通过startActivityForResult传入Intent然后在onActivityResult中通过MediaProjectionManager.getMe
-
HTML+JS实现监控切屏功能
目录 项目描述 记录离开页面 创建html 监控是否离开页面 监控是否切屏 记录时间 离开次数 项目描述 该项目是我在网上看其他博客的时候无意中看到的,看见别人居然能实现这种操作很好奇 项目要求做到 监控网页状态 记录离开次数 离开时间 记录离开页面 实现这个切换页面功能需要用到一个web的APIvisiblitychange visibilitychange - Web API 接口参考 | MDN (mozilla.org) Document.visibilityState - Web AP
-
使用Vue.js创建一个时间跟踪的单页应用
Vue.js很简单.正因为如此简单,人们常常认为其适合于小项目.虽然真正的Vue.js核心知识只是一个视图层库,实际上有一组工具,将使您能够使用Vue.js构建完整的大规模SPA(单页应用程序). SPA应用可以在不完全重新加载网页,产生一个更流畅的用户体验到的用户交互响应.还有好的副作用,SPA还鼓励后端专注于展示数据端点,这使得整体架构更加分离,并且对于其他类型的客户端可能是可重用的. 从开发人员的角度来看,SPA和传统的后端呈现应用程序之间的主要区别是,我们必须将客户端视为具有自己架构的应
-
python实现录屏功能(亲测好用)
前言 由与上不了学,教我们Mastercam的老师提前给我们布置了4道习题.对我们太好了,谢谢老师� 没办法,干就完了. 只是要求附上制作过程视频,就想到了能不能用python做个录屏的程序,于是在网上看了好多文章,发现很多都不是很好用,要不就是太麻烦(我就录个屏,不用声音,也不用控件).最后看到了一个符合我要求的,可以去看看这里(感谢!) 不过呢,俗话说:适合自己的才是最好的.当我们用的时候,会发现录制的时间和视频播放的时间不一致,有的快了,有的慢了,所以就想出了原因与解决办法.接
-
python实现录制全屏和选择区域录屏功能
最近给客户演示程序运行结果,我就想到用Python写一个录屏程序,在网上能找到现成的源码,但是它的录屏是录制整个屏幕的.但是在屏幕桌面下方的任务栏工具栏里有些东西,不希望被录制到视频里,因此需要实现一个选择区域录屏,就像qq截图那样的.我编写的程序如下,在主函数的输入参数里有一个选项控制是全屏录制还是选择区域录制.在编写这个程序时,我有一个疑问,在初始化写视频VideoWriter函数的第4个参数,它表示视频帧的高和宽,全屏录制方式的参数是(height,width),选择区域录制的参数是(wi
-
详解node.js创建一个web服务器(Server)的详细步骤
前言 在 node.js 中创建一个服务器非常简单,只需要使用 node.js 为我们提供的 http 模块及相关 API 即可创建一个麻雀虽小但五脏俱全的web 服务器,相比 Java/Python/Ruby 搭建web服务器的过程简单的很. http model 要想创建一个基于 node.js 的 web 服务器,你就必须使用 node.js 提供的 http 模块,node.js 中的 http 接口旨在支持传统上难以使用的协议的许多特性, 特别是,大块的.可能块编码的消息,接口永远不会
-
python基于tkinter实现gif录屏功能
一.主界面实现 (一)实现最简单的窗体 from tkinter import * if __name__ == '__main__': tk = Tk() tk.geometry('500x400+500+150') tk.title('有趣的透明窗体-开篇了!!!') canvas = Canvas(tk) canvas.pack(fill=BOTH, expand=Y) tk.mainloop() 太简单了,不详细说了,相信大家都看得懂. (二)把灰色设置成透明色 TRANSCOLOUR
-
js实现自动锁屏功能
1.使用场景 有这么一个需求,开发了一套系统,当用户离开桌面或者一段时间不操作的话,需要把该系统所有打开页面锁定起来,就跟桌面锁屏一样,只能输入密码验证成功后,或者重新登录,才可以继续操作页面,如果刷新页面,也要保持锁定.就像下图一样.当然用户也可以手动触发锁屏.目的是防止他人随意操作系统的重要内容.那么该如何去实现呢? 5s锁屏效果如下: 2.思路 首先需要一个变量isLock表示页面是否锁定.由于多个页面需要共享这个数据,且刷新后依然能够获取到,所以我使用了localStorage储存在本地