js实现浏览器录屏
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
<button @click="startLp">开始录屏</button>
<button @click="stopLp">停止录屏</button>
</div>
</body>
<!-- <script src="js/vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<script>
var app2 = new Vue({
el: '#app',
data :{
recoder : {},
},
methods:{
startLp(){
console.log('开始录屏')
navigator.mediaDevices.getDisplayMedia({video:true,audio:true}).then(stream=>{
this.recoder = new MediaRecorder(stream)
var data = []
this.recoder.ondataavailable = function(e){
data.push(e.data)
}
this.recoder.onstop = function(){
this.stream.getTracks().forEach(track=>{
track.stop()
var blob = new Blob(data)
var link = document.createElement("a")
link.href = URL.createObjectURL(blob)
link.download = new Date().getTime()+".webm"
document.body.appendChild(link)
link.click()
URL.revokeObjectURL(link.href)
link.remove()
})
}
this.recoder.start()
})
},
stopLp(){
console.log('停止录屏')
this.recoder.stop()
}
}
})
</script>
</html>
分类:
笔记
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」