-
用到navigator.mediaDevices.getDisplayMedia api，获取用户授权后，可以捕获屏幕
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <canvas></canvas> <video class="shot" muted autoplay width="300" height="200" crossOrigin="anonymous"></video> <img class="shotImg" alt=""> <script> var canvas = document.createElement('canvas'); var img = document.querySelector('.shotImg'); navigator.mediaDevices.getDisplayMedia({video:true}).then(stream => { console.log(stream, 'stream'); let videoDom = document.querySelector('.shot'); videoDom.srcObject = stream; img.width = videoDom.clientWidth; img.height = videoDom.clientHeight; videoDom.onloadeddata = (() => { setInterval(() => { canvas.width = videoDom.clientWidth; canvas.height = videoDom.clientHeight; canvas.getContext('2d').drawImage(videoDom, 0, 0, canvas.width, canvas.height); var dataURL = canvas.toDataURL('image/png'); img.src = dataURL; }, 200); }) }).catch(error => { console.log(error); }); </script> </body> </html>
录制视频
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <video class="shot" muted autoplay width="300" height="200" crossOrigin="anonymous"></video> <button id="start">录制开始</button> <button id="end">录制结束</button> <script> navigator.mediaDevices.getDisplayMedia({video:true}).then(stream => { let videoDom = document.querySelector('.shot'); videoDom.srcObject = stream; createRecorder(stream); }).catch(error => { console.log(error); }); // start.addEventListener('click', () => { console.log('start'); recorder.start(); }); end.addEventListener('click', () => { console.log('end'); recorder.stop(); }); let recorder = null; let i=0; function createRecorder(stream) { recorder = new MediaRecorder(stream); // recorder.start(10000); // 如果 start 没设置 timeslice，ondataavailable 在 stop 时会触发 recorder.ondataavailable = event => { console.log(event); let blob = new Blob([event.data], { type: 'video/mp4' }); saveMedia(blob); }; recorder.onerror = err => { console.error(err); }; }; // 保存文件 function saveMedia(blob) { let reader = new FileReader(); reader.onload = () => { let buffer = new Buffer(reader.result); console.log(buffer, 'buffer'); // fs.writeFile('test'+i+'.mp4', buffer, {}, (err, res) => { // if (err) return console.error(err); // }); i++; }; reader.onerror = err => console.error(err); reader.readAsArrayBuffer(blob); }; </script> </body> </html>
-