CODEWITHSUNDEEP
node.jspuppeteergoogle-chrome-headless
david elepen
david elepen

Reputation: 131

Possible to Get Puppeteer Audio Feed and/or Input Audio Directly to Puppeteer?

I want to input WAV or MP3 into puppeteer as a microphone, however while in headless the application is muted, so I was wondering if there was a way to get input directly into the browser.

I am also wondering if it's possible to get a feed of audio from the browser while in headless, and/or record the audio and place it in a folder.

Upvotes: 13

Views: 12510

Answers (4)

regstuff
regstuff

Reputation: 83

User Flimm's second answer was on the ball. Not sure why it did not work for him. Adding the answer here for others, as I do not have sufficient reputation to comment on his answer.

const browser = await puppeteer.launch({ headless: true,
  args: [
    '--use-fake-ui-for-media-stream',
    '--use-fake-device-for-media-stream',
    '--use-file-for-fake-audio-capture=C:\\Users\\Username\\Desktop\\newtest.wav',
  ],

One possible reason might be that in Windows, the slashes need to be doubled as I've done here.

The --use-fake-device-for-media-stream also needs to be enabled for this to work.

The wav file should be 44.1 kHz, 16-bit. This sample one worked for me.

Upvotes: 4

Flimm
Flimm

Reputation: 151115

I ended up using this solution. First, I enabled some options for Chromium:

const browser = await puppeteer.launch({
  args: [
    '--use-fake-ui-for-media-stream',
  ],
  ignoreDefaultArgs: ['--mute-audio'],
});

Remember to close Chromium if it is open already.

I created an <audio> element with the src set to the file that I wanted to input. I also overrode navigator.mediaDevices.getUserMedia, so that it returns a Promise with the same stream as the audio file, rather than from the microphone.

const page = await browser.newPage();
await page.goto('http://example.com', {waitUntil: 'load'});
await page.evaluate(() => {
  var audio = document.createElement("audio");
  audio.setAttribute("src", "http://example.com/example.mp3");
  audio.setAttribute("crossorigin", "anonymous");
  audio.setAttribute("controls", "");
  audio.onplay = function() {
    var stream = audio.captureStream();
    navigator.mediaDevices.getUserMedia = async function() {
       return stream;
    };
  });
  document.querySelector("body").appendChild(audio);
});

Now whenever the website's code calls navigator.mediaDevices.getUserMedia, it will get the audio stream from the file. (You need to make sure the audio is playing first.)

Upvotes: 14

Flimm
Flimm

Reputation: 151115

In theory, to load the file example.wav and use it as if it were microphone input, this should work:

const browser = await puppeteer.launch({
  args: [
    '--use-fake-ui-for-media-stream',
    '--use-fake-device-for-media-stream',
    '--use-file-for-fake-audio-capture=/path/example.wav',
    '--allow-file-access',
  ],
  ignoreDefaultArgs: ['--mute-audio'],
});

I was told that you need to make sure that Chrome has been closed before running the script, and that the .wav file needs to be 41khz and 16-bit.

However, I could not get it to work :(

Upvotes: 1

Kyle Ponikiewski
Kyle Ponikiewski

Reputation: 311

Not sure what you mean by inputting as a microphone, but you can enable audio in headless mode. This should work:

const browser = await puppeteer.launch({
   ignoreDefaultArgs: ['--mute-audio']
});

Upvotes: 2

Related Questions