使用getDisplayMedia调用Screen Capture API录制画质差问题求助

首先明确：getDisplayMedia完全可以实现高清屏幕录制，你遇到的低画质问题大概率是参数配置或使用方式有误，而非API本身限制。

核心问题排查与修复 #

1. 确保bitrate参数传给了MediaRecorder
   你的代码只定义了options变量，但没有将其传入MediaRecorder的构造函数——这是关键遗漏！如果不传递该配置，浏览器会默认使用低码率编码，导致画质模糊。正确用法是：

const recorder = new MediaRecorder(stream, options);

2. 分辨率未达到预期的处理
   从getConstraints()返回结果看，实际拿到的是1920x1080而非你设置的4K，说明浏览器未满足ideal分辨率需求。可能原因是系统显示器分辨率不足、浏览器限制，或窗口缩放影响。可以调整分辨率约束：

video: {
  width: { min: 1920, ideal: 4096, max: 4096 },
  height: { min: 1080, ideal: 2160, max: 2160 },
  frameRate: 30,
  cursor: "always"
}

• 若显示器支持4K，建议选择录制「整个屏幕」而非单个窗口，避免窗口缩放导致分辨率降级；
• 检查浏览器是否开启硬件加速（多数浏览器默认开启，关闭会影响编码质量）。

3. 优化编码配置
   不同浏览器对编码格式的支持不同，选择高效编码格式能在相同码率下获得更好画质：

• VP9编码（WebM格式）：压缩效率高，适合高分辨率录制，配置示例：

const options = {
  audioBitsPerSecond: 128000,
  videoBitsPerSecond: 30000000, // 4K 30fps建议30Mbps以上
  mimeType: "video/webm;codecs=vp9"
};

• H.264编码（MP4格式）：兼容性更好，若浏览器支持可使用：

mimeType: "video/mp4;codecs=h264"

完整示例代码 #

// 请求屏幕流
const stream = await navigator.mediaDevices.getDisplayMedia({
  video: {
    width: { min: 1920, ideal: 4096, max: 4096 },
    height: { min: 1080, ideal: 2160, max: 2160 },
    frameRate: 30,
    cursor: "always"
  },
  audio: true
});

// 录制配置
const options = {
  audioBitsPerSecond: 128000,
  videoBitsPerSecond: 30000000,
  mimeType: "video/webm;codecs=vp9"
};

// 初始化录制器
const recorder = new MediaRecorder(stream, options);
const chunks = [];

recorder.ondataavailable = (e) => chunks.push(e.data);
recorder.onstop = () => {
  const blob = new Blob(chunks, { type: options.mimeType });
  // 处理录制完成的Blob（如下载、上传）
};

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

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