如何隐藏navigator.mediaDevices.getDisplayMedia截图的底部提示栏及鼠标？

我有一段可以完美截取无标签栏、无工具栏的截图代码，但存在两个问题：

1. 截图会包含系统底部的提示栏（见附图），我已经在截图前添加了1秒延迟来隐藏权限窗口，但无法隐藏这个底部提示栏。
2. 不知道如何隐藏截图中的鼠标图标。

现有代码 #

const capture = async () => {
  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");
  const video = document.createElement("video");

  try {
    const captureStream = await navigator.mediaDevices.getDisplayMedia();
    video.srcObject = captureStream;
    await new Promise((resolve) => {
      video.onloadedmetadata = resolve;
    });

    await new Promise((resolve) => setTimeout(resolve, 1000)); // 等待1秒
    video.play();

    const displayWidth = window.innerWidth;
    const displayHeight = window.innerHeight;
    const screenLeft = window.screenLeft;
    const screenTop = window.screenTop;
    const windowLeft = window.outerWidth - window.innerWidth - screenLeft;
    const windowTop = window.outerHeight - window.innerHeight - screenTop;

    canvas.width = displayWidth;
    canvas.height = displayHeight;
    context.drawImage(video, windowLeft, windowTop, displayWidth, displayHeight, 0, 0, displayWidth, displayHeight);

    const frame = canvas.toDataURL("image/png");
    captureStream.getTracks().forEach(track => track.stop());

    if (window === window.top) {
      const link = document.createElement("a");
      link.href = frame;
      link.download = "screenshot.png";
      link.click();
    } else {
      console.error("错误：捕获到权限窗口，未保存截图。");
    }
  } catch (err) {
    console.error("错误：" + err);
  }
};

capture();

解决方案 #

一、隐藏底部提示栏 #

底部提示栏是系统级UI，浏览器无法直接强制隐藏，可通过以下两种方式处理：

1. 优先截取当前标签页（推荐）

调用getDisplayMedia时添加preferCurrentTab: true参数（Chrome、Edge等主流浏览器支持），直接截取当前标签页内容，完全不会包含系统底部提示栏：

const captureStream = await navigator.mediaDevices.getDisplayMedia({
  preferCurrentTab: true,
  video: true
});

2. 裁剪屏幕可用区域

如果必须截取整个屏幕，可利用screen.availHeight获取排除任务栏/提示栏的屏幕可用高度，调整绘制区域：

// 替换原displayHeight的定义
const displayHeight = screen.availHeight;
// 绘制时使用可用高度
context.drawImage(video, windowLeft, windowTop, displayWidth, displayHeight, 0, 0, displayWidth, displayHeight);

注意：若任务栏在顶部，需要额外调整windowTop的值以适配。另外可延长延迟时间（如2-3秒），等待底部提示栏自动消失后再截图。

二、隐藏鼠标图标 #

在getDisplayMedia的配置中添加cursor: "never"参数，即可让捕获的流不包含鼠标：

const captureStream = await navigator.mediaDevices.getDisplayMedia({
  video: {
    cursor: "never"
  }
});

cursor参数可选值：

• "always"：始终显示鼠标（默认）
• "motion"：仅鼠标移动时显示
• "never"：完全不显示鼠标

修改后的完整代码 #

const capture = async () => {
  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");
  const video = document.createElement("video");

  try {
    // 同时配置隐藏鼠标和优先截取当前标签页
    const captureStream = await navigator.mediaDevices.getDisplayMedia({
      preferCurrentTab: true,
      video: {
        cursor: "never"
      }
    });
    video.srcObject = captureStream;
    await new Promise((resolve) => {
      video.onloadedmetadata = resolve;
    });

    await new Promise((resolve) => setTimeout(resolve, 1000));
    video.play();

    const displayWidth = window.innerWidth;
    const displayHeight = window.innerHeight;
    const screenLeft = window.screenLeft;
    const screenTop = window.screenTop;
    const windowLeft = window.outerWidth - window.innerWidth - screenLeft;
    const windowTop = window.outerHeight - window.innerHeight - screenTop;

    canvas.width = displayWidth;
    canvas.height = displayHeight;
    context.drawImage(video, windowLeft, windowTop, displayWidth, displayHeight, 0, 0, displayWidth, displayHeight);

    const frame = canvas.toDataURL("image/png");
    captureStream.getTracks().forEach(track => track.stop());

    if (window === window.top) {
      const link = document.createElement("a");
      link.href = frame;
      link.download = "screenshot.png";
      link.click();
    } else {
      console.error("错误：捕获到权限窗口，未保存截图。");
    }
  } catch (err) {
    console.error("错误：" + err);
  }
};

capture();

内容的提问来源于stack exchange，提问作者Muisca