可以加一个开始，停止，下载视频的按钮和功能吗

当然！以下是一个改进版的代码，包括了开始、停止和下载录制视频的按钮和功能：

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

const startButton = document.createElement('button');
startButton.textContent = '开始录制';
document.body.appendChild(startButton);

const stopButton = document.createElement('button');
stopButton.textContent = '停止录制';
stopButton.disabled = true;
document.body.appendChild(stopButton);

const downloadButton = document.createElement('button');
downloadButton.textContent = '下载视频';
downloadButton.disabled = true;
document.body.appendChild(downloadButton);

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

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

// 定义变量来存储录制状态和视频数据
let isRecording = false;
let mediaRecorder;
let recordedChunks = [];

// 开始录制按钮点击事件处理程序
startButton.addEventListener('click', () => {
  startRecording();
});

// 停止录制按钮点击事件处理程序
stopButton.addEventListener('click', () => {
  stopRecording();
});

// 下载视频按钮点击事件处理程序
downloadButton.addEventListener('click', () => {
  downloadVideo();
});

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

    // 创建一个MediaRecorder对象来录制视频流
    mediaRecorder = new MediaRecorder(stream);

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

    // 当录制停止时，启用下载按钮
    mediaRecorder.addEventListener('stop', () => {
      downloadButton.disabled = false;
    });

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

    // 更新UI状态
    isRecording = true;
    startButton.disabled = true;
    stopButton.disabled = false;
    downloadButton.disabled = true;

    // 每隔一段时间，将Canvas上的内容绘制到视频流中
    drawCanvas();
  }).catch((error) => {
    console.error('Error accessing media devices:', error);
  });
}

// 停止录制
function stopRecording() {
  if (isRecording) {
    // 停止录制
    mediaRecorder.stop();

    // 更新UI状态
    isRecording = false;
    startButton.disabled = false;
    stopButton.disabled = true;
  }
}

// 下载录制的视频
function downloadVideo() {
  const videoBlob = new Blob(recordedChunks, { 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);

  // 清空recordedChunks数组
  recordedChunks = [];
}

// 每隔一段时间，将Canvas上的内容绘制到视频流中
function drawCanvas() {
  if (isRecording) {
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    requestAnimationFrame(drawCanvas);
  }
}

这段代码在页面上创建了开始录制、停止录制和下载视频的按钮。点击“开始录制”按钮会请求用户的视频流，并开始录制。点击“停止录制”按钮会停止录制，点击“下载视频”按钮会下载录制的视频。录制期间，每隔一段时间，Canvas上的内容会被绘制到视频流中。请注意，下载按钮只在录制停止后才可用。

你可以将这段代码保存为一个HTML文件，并在浏览器中打开它，然后通过点击按钮来控制录制和下载视频。