如何用Chrome Dev Tools录制1080p分辨率的Electron应用窗口

方案1：基于Electron原生API实现内置录屏（效果最优） #

• 直接调用Electron内置的desktopCapturer API获取当前应用窗口的原始渲染流，不受物理显示器分辨率、系统缩放比例影响，可以直接输出你在DevTools中设置的1080p原始画质
• 搭配Web标准MediaRecorder接口录制流，导出的视频原生就是1080p分辨率，不会出现拉伸、模糊的问题
• 核心实现代码参考：

// 主进程逻辑
const { desktopCapturer } = require('electron')

desktopCapturer.getSources({ 
  types: ['window'], 
  thumbnailSize: { width: 1920, height: 1080 } 
}).then(async sources => {
  // 筛选当前应用对应的窗口源
  const appWindowSource = sources.find(item => item.name === '你的应用窗口名称')
  // 获取1080p规格的视频流
  const videoStream = await navigator.mediaDevices.getUserMedia({
    audio: false, // 需要录制音频可改为true
    video: {
      mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: appWindowSource.id,
        minWidth: 1920,
        maxWidth: 1920,
        minHeight: 1080,
        maxHeight: 1080
      }
    }
  })
  // 初始化录制器直接录制流即可
  const mediaRecorder = new MediaRecorder(videoStream, { mimeType: 'video/webm;codecs=h264' })
})

方案2：用Chrome内核启动参数调整应用渲染规格 #

适合不想改应用代码的场景

• 给你的Electron应用增加启动参数：--headless=new --window-size=1920,1080 --allow-http-screen-capture
• 应用会以无头模式直接按1080p分辨率渲染，不受你当前显示器的物理分辨率限制
• 之后用常规录屏软件捕获该窗口，手动固定输出分辨率为1920*1080即可得到清晰的录屏结果

方案3：调整录屏软件配置（无需修改应用） #

适合临时录屏、不想改动应用的场景

• 打开你使用的录屏软件设置，关闭「跟随系统缩放捕获」「自适应输出分辨率」类选项
• 手动固定输出分辨率为1920*1080，编码格式选择H.264 High Profile，码率设置为10Mbps以上，帧率和应用刷新率保持一致即可大幅提升录屏画质

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