首页

js代码实现屏幕录制共享

逛了逛某乎发现有分享使用javascript调用浏览器自带的屏幕录制功能,试了下挺好用的,在此记录下。 <code> var body = document.body; //双击开启屏幕录制 body.addEventListener("dblclick",async function(){ var stream = await navigator.mediaDevices.getDisplayMedia({video: true}); var mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ?"video/webm; codecs=vp9" :"video/webm"; var mediaRecorder = new MediaRecorder(stream, {mimeType: mime}); //录制 var chunks = []; mediaRecorder.addEventListener('dataavailable', function(e) { chunks.push(e.data) }) //停止 mediaRecorder.addEventListener('stop', function(){ var d = new Date(); var date = d.getFullYear()+''+(d.getMonth()+1)+''+d.getDate(); var blob = new Blob(chunks, {type: chunks[0].type}); var url = URL.createObjectURL(blob); var a = document.createElement('a'); a.href = url; a.download = document.title+'_'+date+'.webm'; a.click(); }) //手动启动 mediaRecorder.start() }); </code> 直接把代码复制到控制台回车后在网页上双击就会弹出录制的提示框了,操作简便。不得不说现在的浏览器真强大!
更多>>
关于前面laravel查询bug的后续解决 js控制台打印东西会影响页面js其他功能引起报错你信吗? linux下校验系统镜像ISO文件完整性 关于Linux终端vim鼠标选中文字会变成可视模式(views)的问题 axios传参遇到的数值类型问题