用canvas和录制器写一个录屏脚本

好的，以下是使用Canvas和录制器（MediaRecorder）编写一个简单的录屏脚本的示例代码：

// 创建一个Canvas元素
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');

// 设置Canvas的尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 创建一个视频元素
const video = document.createElement('video');
document.body.appendChild(video);
video.style.display = 'none';

// 获取用户媒体设备并开始录制
navigator.mediaDevices.getUserMedia({
  video: true, // 请求视频流
  audio: false // 不请求音频流
}).then((stream) => {
  // 将视频流绑定到video元素上
  video.srcObject = stream;
  video.play();

  // 创建一个MediaRecorder对象来录制视频流
  const mediaRecorder = new MediaRecorder(stream);
  const chunks = []; // 存储录制的视频数据

  // 当有新的视频数据可用时，将其存储到chunks数组中
  mediaRecorder.addEventListener('dataavailable', (event) => {
    if (event.data.size > 0) {
      chunks.push(event.data);
    }
  });

  // 当录制停止时，创建一个包含所有视频数据的Blob对象
  mediaRecorder.addEventListener('stop', () => {
    const videoBlob = new Blob(chunks, { type: 'video/webm' });

    // 创建一个URL对象，用于下载或播放录制的视频
    const videoUrl = URL.createObjectURL(videoBlob);

    // 创建一个链接元素来下载录制的视频
    const downloadLink = document.createElement('a');
    downloadLink.href = videoUrl;
    downloadLink.download = 'screen_recording.webm';
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);

    // 清空chunks数组
    chunks.length = 0;
  });

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

  // 每隔一段时间，将Canvas上的内容绘制到视频流中
  setInterval(() => {
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  }, 1000 / 30); // 每秒30帧
}).catch((error) => {
  console.error('Error accessing media devices:', error);
});

这段代码会在页面上创建一个Canvas元素和一个隐藏的视频元素。它会请求用户的视频流，并将视频流绑定到视频元素上。然后，它会创建一个MediaRecorder对象来录制视频流，并将每一帧的内容绘制到Canvas上。最后，当录制停止时，它会将录制的视频数据保存为一个Blob对象，并提供下载链接供用户下载录制的视频。