video.audioTracks 属性在 Puppeteer 中不起作用答案

【问题标题】：video.audioTracks property doesn't work in Puppeteervideo.audioTracks 属性在 Puppeteer 中不起作用
【发布时间】：2021-09-03 07:12:33
【问题描述】：

我使用Puppeteer来启动一个浏览器页面，如下：

const browser = await puppeteer.launch({
      executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
      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'
    ]
});
const page = await browser.newPage()
await page.goto(`http://localhost:3001/hello.html`);

hello.html 页面效果很好，但是当我创建 Video 元素并读取 audioTracks 属性时，它返回 undefined。

但是，如果我直接在谷歌浏览器中使用相同的代码，而不是由 Puppeteer 启动，video.audioTracks 会正确返回。

const video = document.createElement('video')
console.log('tracks:', video.audioTracks) // should be tracks: AudioTrackList, but undefined in Puppeteer

这让我很困惑..希望有人能解释这种奇怪的行为。

谢谢..

【问题讨论】：

您能否展示网站代码的最小版本，该代码创建一个 Video 元素并读取 audioTracks 属性？您是否真的在某个时候将此元素放入 DOM 中？你是如何在 Puppeteer 中选择它的？

标签： javascript video puppeteer video-capture

【解决方案1】：

我偶然发现我在我的 Goole Chrome 中启用了experimental-web-platform-features 标志，所以GOOGLE CHROME 效果很好。但是当我使用 puppeteer 启动页面时，我也应该启用它..

audioTracks默认不开启，请使用--enable-experimental-web-platform-features标志开启..

const browser = await puppeteer.launch({
      executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
      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',
          '--enable-experimental-web-platform-features', // add here
    ]
});

【讨论】：