原生 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函数,可以用来获取窗体的画面,这个函数使用很简单,就是传入窗体句 ...
随机推荐
- mybatis generatorConfig.xml生成配置文件及三种运行方式
https://blog.csdn.net/gavin5033/article/details/83002335 一 ,cmd命令执行配置文件本人工作目录结构(图一) 在自己放配置文件的目录下新建ge ...
- 截取完整网页图片的方法 Chrome 浏览器
截取完整网页图片的方法:https://sspai.com/post/42193 要想使用截图功能,你需要首先确保 Chrome 已升级至 59 或更高版本.在想要截图的网页中,首先按下 ⌘Comma ...
- Python有堆栈/堆,如何管理内存？
Python有堆栈/堆,如何管理内存? - 代码日志 https://codeday.me/bug/20171016/86264.html
- Java 什么是静态内部类
#定义 Java语言允许在类中再定义类,这种在其它类内部定义的类就叫内部类. 有static关键字修饰的内部类. 比如:Pattern类中的Node类. public class Outer { pr ...
- TLS握手协议分析与理解——某HTTPS请求流量包分析
https://xz.aliyun.com/t/1039 HTTPS简介 HTTPS,是一种网络安全传输协议,在HTTP的基础上利用SSL/TLS来对数据包进行加密,以提供对网络服务器的身份认证,保护 ...
- 如何做ui自动化---步骤详解
第一步: 得到功能测试的常规用例,查看是否可以进行自动化,要明确,自动化不是为了自动化而自动化,自动化是节省人力,主要做回归测试,如果变动性特别大,不建议做自动化,具体可查看其它文章“什么适合做自动化 ...
- 在 ServiceModel 客户端配置部分中，找不到引用协定“WebServiceSoap”的默认终结点元素。这可能是因为未找到应用程序的配置文件，或者是因为客户端元素找不到与此协定匹配的终结点元素（转）
按语: 在项目中实现自动升级过程,在类库中调用webservice取升级update.xml文件,添加服务调用,但在类库中调用时就出现异常,但在简单的测试工程中没有问题.解决方法采用下面介绍的方法 在 ...
- MySQL普通索引性能试验
首先使用如下node.js脚本创建两张表,并为这两张表各自生成10000条数据: var fs = require('fs'); var nameS = "赵钱孙李周吴郑王冯陈褚卫蒋沈韩杨朱 ...
- django自带的用户验证是验证username和password,如何自定义验证功能,让mobil也能作为账户名登录?
users.views.pyfrom django.contrib.auth.backends import ModelBackendfrom django.db.models import Qcla ...
- 问题（一）升级Appium最新遇到滑动的坑
Appium的JAVA客户端更新到java-client 6.0.0-BETA3后,发现其中有关于界面滑动(swipe TouchAction)方面的升级(也有可能在之前的版本已经更新过类似的内容,没 ...