Can not getStream when using --use-fake-ui-for-media-stream

[axmav]

Hi!

I am using puppeteer-stream to record the audio. On my website there is an audio request.

await launch({
            headless: false,
            args: [
                // "--headless=new",
                "--use-fake-ui-for-media-stream",
                "--use-fake-device-for-media-stream",
            ],
            executablePath: puppeteer.executablePath(),
        });

When calling:

await getStream(this.page, {
            audio: true,
            video: false,
        });

I get the following error:

/node_modules/puppeteer-core/lib/cjs/puppeteer/common/ExecutionContext.js:258
        throw new Error('Evaluation failed: ' + (0, util_js_1.getExceptionMessage)(exceptionDetails));
              ^

Error: Evaluation failed: undefined
    at ExecutionContext._ExecutionContext_evaluate (/Users/me/dev/prog/node_modules/puppeteer-core/lib/cjs/puppeteer/common/ExecutionContext.js:258:15)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async ExecutionContext.evaluate (/Users/me/dev/prog/node_modules/puppeteer-core/lib/cjs/puppeteer/common/ExecutionContext.js:146:16)

Node.js v20.3.0

When I delete --use-fake-ui-for-media-stream it works, but it does not skip permissions popup. Related issue: https://groups.google.com/a/chromium.org/g/chromium-bugs/c/fIV8LZekGX8?pli=1

[ramiel]

Any solution to this?

[ramiel]

I solved it. You need to grant media permission for the specific origin

    const urlObj = new URL(
      `http://yoursite.com/whatever`
    );

    const context = browser.defaultBrowserContext();
    context.clearPermissionOverrides();
    context.overridePermissions(urlObj.origin, ["camera", "microphone"]);

    const page = await browser.newPage();
    await page.goto(urlObj.href);

[SamuelScheit]

duplicate of #52