如何使用chrome.tabCapture API录屏时隐藏鼠标光标

你之前的问题出在使用了废弃的mandatory字段，Chrome的tabCapture.capture API现在遵循标准的MediaStreamConstraints格式，直接在video配置中设置cursor: 'never'即可生效。

下面是完整的可运行示例：

1. Manifest配置（manifest.json） #

需要声明必要的权限：

{
  "manifest_version": 3,
  "name": "无光标录屏工具",
  "version": "1.0",
  "permissions": ["tabCapture", "activeTab"],
  "action": {
    "default_popup": "popup.html"
  }
}

2. 弹窗页面（popup.html） #

一个简单的触发按钮：

<!DOCTYPE html>
<html>
<head>
  <style>button { padding: 8px 16px; }</style>
</head>
<body>
  <button id="startBtn">开始无光标录屏</button>
  <script src="popup.js"></script>
</body>
</html>

3. 核心逻辑（popup.js） #

处理录屏请求、约束配置和录制后的文件导出：

document.getElementById('startBtn').addEventListener('click', async () => {
  try {
    // 关键：正确配置video约束，隐藏光标
    const captureStream = await chrome.tabCapture.capture({
      audio: false, // 如需录制音频可改为true
      video: {
        cursor: 'never'
      }
    });

    // 初始化MediaRecorder处理录制数据
    const mediaRecorder = new MediaRecorder(captureStream);
    const recordingChunks = [];

    mediaRecorder.ondataavailable = (event) => {
      if (event.data.size > 0) recordingChunks.push(event.data);
    };

    mediaRecorder.onstop = () => {
      // 导出录制的视频文件
      const videoBlob = new Blob(recordingChunks, { type: 'video/webm' });
      const downloadUrl = URL.createObjectURL(videoBlob);
      const downloadLink = document.createElement('a');
      downloadLink.href = downloadUrl;
      downloadLink.download = 'screen-recording-no-cursor.webm';
      downloadLink.click();
      URL.revokeObjectURL(downloadUrl);

      // 停止所有媒体轨道
      captureStream.getTracks().forEach(track => track.stop());
    };

    // 开始录制
    mediaRecorder.start();
    alert('录屏已启动，10秒后自动停止并导出文件');
    
    // 示例：10秒后停止录制，实际可改为按钮触发停止
    setTimeout(() => {
      mediaRecorder.stop();
    }, 10000);
  } catch (error) {
    console.error('录屏失败:', error);
    alert('录屏失败，请检查扩展权限或当前标签状态');
  }
});

关键说明 #

• 不要使用videoConstraints.mandatory：该字段是旧版MediaTrackConstraints的语法，Chrome现在已支持标准的约束结构，直接在video对象下设置cursor即可。
• 测试要求：需要在Chrome扩展管理中开启开发者模式，加载已解压的扩展目录，且录屏时当前标签必须处于活跃状态。
• 光标选项：除了never，还可以使用motion（仅当光标移动时显示）或always（始终显示），根据需求调整。

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