谷歌浏览器捕获屏幕

-

用到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>

 

 

 

-

posted @ 2021-11-15 09:29  古墩古墩  Views(310)  Comments(0)  Edit  收藏  举报