原生 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函数,可以用来获取窗体的画面,这个函数使用很简单,就是传入窗体句 ...
随机推荐
- comparison of truncate vs delete in mysql/sqlserver
comparison of truncate vs delete in mysql/sqlserver [duplicate] DELETE DELETE is a DML Command. DE ...
- 浏览器并发数 network.http.max-connections
network.http.max-connections https://bugs.chromium.org/p/chromium/issues/detail?id=12066 https://chr ...
- Flutter -------- Http库 网络请求封装（HttpController）
http库 再次封装的网络请求类 HttpController 1.添加依赖 dependencies: http: ^0.12.0 #latest version 2.导入库 import 'pac ...
- net.ipv4.tcp_fin_timeout的错误理解
按照文档的说法,貌似长久以来我对于tcp_fin_timeout的理解都是错误的 先备份在这里,再验证 提高Linux应对短连接的负载能力 在存在大量短连接的情况下,Linux的TCP栈一般都 ...
- IDEA 修改某个Module名称
一.选择module右键——>Refactor——>Rename 二.修改该module下的pom.xml文件对应module名改掉 三.修改项目的pom文件中modules里的modul ...
- 全面系统Python3入门+进阶-1-3 我为什么喜欢Python
结束
- 【Java】Spring之Resource（三）
Java的各种URL前缀的标准类和标准处理程序不足以完全访问低级资源.例如,没有URL可用于访问需要从类路径或相对于a获取的资源的标准化实现 ServletContext.虽然可以为专用URL 前缀注 ...
- C++的override和final
1.final用于让虚函数不可被重写 struct B2 { virtual void f() final {} // final 函数 }; struct D2 : B2 { virtual voi ...
- spring 使用XML配置开发Spring AOP
XML方式开发AOP与注解开发原理是相同的,所以这里主要介绍一些用法即可.这里需要在XML中引入AOP的命名空间,所以先来了解一下AOP可配置的元素 代码清单:切面类 package com.ss ...
- sklearn简单线性回归
from sklearn import datasetsfrom sklearn.model_selection import train_test_splitfrom sklearn.linear_ ...