原生 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函数,可以用来获取窗体的画面,这个函数使用很简单,就是传入窗体句 ...
随机推荐
- ubuntu下如何开机自动执行自定义脚本？
答: 将自定义脚本(假设自定义的脚本绝对路径为~/start_test.sh)添加到/etc/init.d/目录下,并更新系统启动项,命令如下: sudo cp ~/start_test.sh /et ...
- PHP 构造函数和析构函数
构造函数 __construct ([ mixed $args [, $... ]] ) : void PHP 5 允行开发者在一个类中定义一个方法作为构造函数.具有构造函数的类会在每次创建新对象时先 ...
- 处理 Bootstrap CSS 冲突
问题: Bootstrap 是Web上最流行的CSS框架.它使创建漂亮,响应迅速的设计非常容易. 但是,有时候并不希望在整个网站上使用 Bootstrap,您只需要使用Bootstrap CSS的一部 ...
- 基本使用——OkHttp3详细使用教程
基本使用——OkHttp3详细使用教程 转 https://blog.csdn.net/xx326664162/article/details/77714126 概述 OkHttp现在应该算是最火的H ...
- php5.6.30环境报错Call to undefined function ImageCreate() 编译安装 gd库
php5..30环境报错Call to undefined function ImageCreate() 编译安装 gd库 发现php5..30没有加载gd库 [root@cn_vs_web04:/u ...
- osg塔吊模拟-20191026
在osg中模拟塔吊群作业
- Qt tableview加载数据
Qt tableview加载数据 //把数据加载到tableView void ImportData::loadDataInTableView() { ) { if (pageNum>stude ...
- 解决 Win10 系统新建文件夹后需手动刷新才能显示
摘自:https://blog.csdn.net/weixin_44447687/article/details/100702968 1.点击开始菜单,选择“运行”功能,然后在运行打开框中输入 reg ...
- 在tomcat下context.xml中配置各种数据库连接池
作者:郑文亮 Tomcat6的服务器配置文件放在 ${tomcat6}/conf 目录底下.我们可以在这里找到 server.xml 和 context.xml.当然,还有其他一些资源文件.但是在在本 ...
- Java合并（连接）多个音频
java sound resource 合并的说法有歧义,为了方便大家搜索到这里,所以用这个标题,实际上是连接(concat),可以理解为字符串concat方法所指定的含义. AudioConcat. ...