javascript录制电脑屏幕

MediaStream Recording API新特性来实现

首先需要授权,mac的话需要在系统设置里打开浏览器屏幕共享权限
代码:

// 获取屏幕媒体流
navigator.mediaDevices.getDisplayMedia({ video: true })
  .then(function(stream) {
    // 创建MediaRecorder对象
    let recorder = new MediaRecorder(stream);
    let recordedChunks = [];

    // 开始录制
    recorder.start();

    recorder.ondataavailable = function(event) {
      recordedChunks.push(event.data);
    }

    // 停止录制
    recorder.onstop = function() {
      // 保存录制的媒体流数据
      let blob = new Blob(recordedChunks, { type: 'video/webm' });
      let url = URL.createObjectURL(blob);
      let a = document.createElement('a');
      a.href = url;
      a.download = 'recording.webm';
      document.body.appendChild(a);
      a.click();
    }

  })
  .catch(function(err) {
    console.error('Error: ' + err);
  });

不得不说js越来越强,浏览器的系统权限以及W3C规范越来越开放,怪不得谷歌可以在浏览器内运行个操作系统