纯js实现录屏和截图功能

const body = document.body;
body.addEventListener("click", async () => {
  // 获取屏幕媒体流
  const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });

  // 确定媒体录制的 MIME 类型
  const mime = MediaRecorder.isTypeSupported("video/webm; codecs=h264")
    ? "video/webm; codecs=h264"
    : "video/webm";

  // 创建媒体录制器
  const mediaRecorder = new MediaRecorder(stream, { mimeType: mime });

  // 存储录制的数据块
  const chunks = [];

  // 在数据可用时将数据块添加到数组中
  mediaRecorder.addEventListener("dataavailable", function (e) {
    chunks.push(e.data);
  });

  // 当录制结束时处理录制的数据
  mediaRecorder.addEventListener("stop", () => {
    // 创建 Blob 对象并设置类型
    const blob = new Blob(chunks, { type: chunks[0].type });

    // 创建下载链接
    const url = URL.createObjectURL(blob);

    // 创建一个 <a> 元素并设置下载链接和文件名
    const a = document.createElement("a");
    a.href = url;
    a.download = "video.webm";
    
    // 模拟点击下载链接
    a.click();
  });

  // 启动录制
  mediaRecorder.start();

  // 输出数据块到控制台
  console.log(chunks);
});

将代码复制粘贴到浏览器控制台上面，并点击页面的空白处