原生 js 录屏功能
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>在线屏幕录制</title>
<style>
body{
font-family: Arial;
margin: 4vh auto;
width: 90vw;
max-width: 600px;
text-align: center;
}
#controls{
text-align: center;
}
.btn{
margin: 10px 5px;
padding: 15px;
background-color: #2bcbba;
border: none;
color: white;
font-weight: bold;
border-radius: 6px;
outline: none;
font-size: 1.2em;
width: 120px;
height: 50px;
}
.btn:hover{
background-color: #26de81;
cursor: hand;
}
.btn:disabled{
background-color: #2bcbba80;
}
#stop{
background-color: #fc5c65;
}
#video{
margin-top: 10px;
margin-bottom: 20px;
border: 12px solid #a5adb0 ;
border-radius: 15px;
outline: none;
width: 100%;
height: 400px;
background-color: black;
}
h1{
color: #2bcbba;
letter-spacing:-2.5px;
line-height: 30px;
}
.created{
color: lightgrey;
letter-spacing: -0.7px;
font-size: 1em;
margin-top: 40px;
}
.created > a{
color: #4b7bec;
text-decoration: none;
}
</style>
</head> <body>
<h1><u style='color:#fc5c65'>在线屏幕录制</u><br>支持 :新版本 Chrome,Edge,Firefox 桌面浏览器 <br></h1>
<video autoplay='true' id='video' controls='true' controlsList='nodownload'></video>
<button class='btn' id='record' onclick='record()'>录制</button>
<button style='display: none' class='btn' id='stop' onclick='stop()'>停止</button>
<button disabled='true' class='btn' id='download' onclick='download()'>下载</button>
<div class='created'> </div>
</body>
<script>
const video = document.getElementById('video')
const downloadBtn = document.getElementById('download')
const recordBtn = document.getElementById('record')
const stopBtn = document.getElementById('stop')
let recorder async function record() {
// 开始录屏
let captureStream try{
captureStream = await navigator.mediaDevices.getDisplayMedia({
video: true,
// audio: true, not support
cursor: 'always'
})
}catch(e){
// 取消录屏或者报错
alert("Could not get stream")
return
} downloadBtn.disabled = true
recordBtn.style = 'display: none'
stopBtn.style = 'display: inline' // 删除之前的 Blob
window.URL.revokeObjectURL(video.src) video.autoplay = true // 实时的播放录屏
video.srcObject = captureStream // new 一个媒体记录
recorder = new MediaRecorder(captureStream)
recorder.start() captureStream.getVideoTracks()[0].onended = () => {
// 录屏结束完成
recorder.stop()
} recorder.addEventListener("dataavailable", event => {
// 录屏结束，并且数据可用
console.log("dataavailable------------")
let videoUrl = URL.createObjectURL(event.data, {type: 'video/ogg'}) video.srcObject = null
video.src = videoUrl
video.autoplay = false downloadBtn.disabled = false
recordBtn.style = 'display: inline'
stopBtn.style = 'display: none'
})
} function download(){
// 下载
const url = video.src
const name = new Date().toISOString().slice(0, 19).replace('T',' ').replace(" ","_").replace(/:/g,"-")
const a = document.createElement('a') a.style = 'display: none'
a.download = `${name}.ogg`
a.href = url document.body.appendChild(a) a.click()
} function stop(){
let tracks = video.srcObject.getTracks()
tracks.forEach(track => track.stop())
recorder.stop()
}
</script>
</html>
原生 js 录屏功能的更多相关文章
- 简析hotjar录屏功能实现原理
简析hotjar录屏功能实现原理 众所周知,hotjar中录屏功能是其重要的一个卖点,看着很牛X酷炫的样子,今天就简单的分析一下其可能实现(这里只根据其请求加上个人理解分析,并不代表hotjar中真实 ...
- iOS的录屏功能
iOS的录屏功能其实没什么好说的,因为网上的教程很多,但是网上的Demo无一例外几乎都有一个bug,那就是iPad上会出现闪退,这也体现了国内的教程文档的一个特点,就是抄袭,教程几乎千篇一律,bug也 ...
- 【转载】华为荣耀V9的手机录屏功能如何开启
手机录屏有时候对我们的帮助很大,例如可以录制相应的APP使用教程.微信小程序使用流量讲解视频等,针对于软件开发人员等来说,手机录屏功能针对功能演示视频非常的有帮助.在华为荣耀V9手机中,进行手机录屏有 ...
- Chrome71版本使用screenfull.js全屏功能时报参数错误
在生产环境长期使用的一个“全屏”功能突然失效了,查看Console 如下报错: Failed to execute 'requestFullscreen' on 'Element': paramete ...
- 原生js实现分页功能
原生就是实现分页功能 代码如下: var pagination = function(option,fun){ this.parentId = option.id; //容器 this.pageSiz ...
- 使用原生js实现选项卡功能实例教程
选项卡是前端常见的基本功能,它是用多个标签页来区分不同内容,通过选择标签快速切换内容.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先来完成html部分 ...
- 原生js拖拽功能制作滑动条实例教程
拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: ...
- 原生JS实现购物车功能
html <div class="catbox"> <table id="cartTable"> <thead> <t ...
- QT+OPENCV实现录屏功能
本文使用QT+opencv来实现对指定窗体画面录制,并保存为avi文件. (1)获取窗体界面 QScreen类有一个grabWindow函数,可以用来获取窗体的画面,这个函数使用很简单,就是传入窗体句 ...
随机推荐
- 制作基于软盘的Linux系统
制作基于软盘的Linux系统(张宏伟.欧阳平平 2001年07月26日 11:22) 嵌入式Linux由一个几百KB的kernel(内核)和一些根据需要进行定制的系统模块组成.由于Linux是开放源代 ...
- minicom调试4G网卡
[root@localhost toybrick]# minicom -D /dev/ttyUSB2 Welcome to minicom 2.7.1 ...
- QtCore概述
所有其他Qt模块都依赖于这个模块. 要包含模块类的定义,请使用以下指令: include < QtCore > 如果您使用qmake来构建您的项目,则默认将QtCore包含在内. 核心功能 ...
- ntpd服务
yum -y install ntp 服务器端 [root@ip-172-31-6-148~]# vim /etc/ntp.conf ...# Use public servers from thep ...
- 009 轮播图，offset系列
关于使用JS做轮播图,使用一个章节进行笔迹. 一:简单轮播图 1.程序 <!DOCTYPE html> <html lang="en"> <head& ...
- Could not attach to pid : "xx"最近启动Xcode运行项目都会出现这个问题，再次启动或者多启动几次，就可以正常运行工程了。
最近启动Xcode运行项目都会出现这个问题,再次启动或者多启动几次,就可以正常运行工程了. 普及一下:PID(进程控制符)英文全称为Process Identifier,它也属于电工电子类技术术语. ...
- （转）Darknet模型与Tensorflow模型相互转换
目前darknet框架下的模型训练都是在C环境下训练的,难免较为晦涩,如果能将模型转换到Tensorflow环境下完成模型的训练,在将训练好的权重转为Darknet可以识别的权重部署到实际应用中.这样 ...
- mongodb批量update更新数据
需要先查找出相关的记录,然后循环处理更新数据.如下案例,更新所有status=1的数据的gender值为2 db.getCollection('test').find({"status&qu ...
- 【转】把sqlite3数据导入到MySQL中
之前我们默认使用的是SQLite数据库,我们开发完成之后,里面有许多数据.如果我们想转换成Mysql数据库,那我们先得把旧数据从SQLite导出,然后再导入到新的Mysql数据库里去. 1.SQLit ...
- Fiddler抓包工具版面认识（一）
Fiddler是一个蛮好用的抓包工具,可以将网络传输发送与接受的数据包进行截获.重发.编辑.转存等操作.也可以用来检测网络安全.反正好处多多,举之不尽呀!当年学习的时候也蛮费劲,一些蛮实用隐藏的小功能 ...