Puppeteer启动Chrome时video.audioTracks属性返回undefined问题排查

问题原因 #

• 你当前使用的headless: true配置对应Chrome传统旧版无头模式，该模式为了降低资源占用做了功能裁剪，默认禁用了包括audioTracks在内的部分低频媒体API，这是属性返回undefined的核心原因。
• 原生手动启动的Chrome为标准有头模式，默认开启全部标准Web API，所以可以正常获取到AudioTrackList对象。

解决方案 #

方案1：切换新版无头模式（推荐） #

Chrome 112及以上版本支持新版无头模式，该模式的功能支持和有头Chrome完全对齐，没有API缺失问题，仅需修改launch配置中的headless字段即可：

const browser = await puppeteer.launch({
      executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
      headless: 'new', // 替换原有的headless: true
      devtools: true,
      args: [
          '--no-sandbox',
          '--disable-web-security',
          '--allow-file-access-from-files',
          '--use-fake-ui-for-media-stream',
          '--use-fake-device-for-media-stream',
          '--disable-gpu'
    ]
});

方案2：手动开启API特性（适配低版本Chrome） #

如果你的Chrome版本低于112无法使用新版无头模式，可以在启动参数中添加--enable-blink-features=AudioTracks强制开启该API支持：

args: [
    '--no-sandbox',
    '--disable-web-security',
    '--allow-file-access-from-files',
    '--use-fake-ui-for-media-stream',
    '--use-fake-device-for-media-stream',
    '--disable-gpu',
    '--enable-blink-features=AudioTracks' // 新增该行配置
]

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