Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

getUserMedia with microphone fails

See original GitHub issue

Bug

Requests to access the user’s microphone using getUserMedia() fail and crash Cypress test.

Current behavior:

I have a web application which allows users to do voice recordings in their browser. Getting access to the microphone is done through the following

var constraints = {
  audio: true,
  video: false
};

navigator.mediaDevices
  .getUserMedia(constraints)
  .then(recordAudio);

Cypress fails this test due to the call .getUserMedia() with the error:

Uncaught TypeError: Cannot read property ‘getUserMedia’ of undefined

I have seen that some work has been done with webcams, but I’m not finding anything for microphones.

Desired behavior:

I would like this to not fail, so that I can test the application.

Steps to reproduce:

index.html:

<!DOCTYPE html>
<html>
  <head>
    <script>
      window.onload = function() {
        var constraints = {
          audio: true,
          video: false
        };

        navigator.mediaDevices.getUserMedia(constraints);
      };
    </script>
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>

Test:

cy.visit("/index.html");

Versions

macOS Mojave Cypress 3.2.0

Issue Analytics

State:
Created 4 years ago
Comments:13 (6 by maintainers)

Top GitHub Comments

1reaction

ziadasemcommented, Sep 5, 2019

this error is due to chrome and other browsers block microphone access to not https sites so try to install SSL you can get your free one from here https://www.sslforfree.com/ and follow the tutorial

1reaction

flotwigcommented, May 14, 2019

You can follow the same basic procedure as @jennifer-shehane’s comment on the webcam issue (#2704), but instead of using --use-file-for-fake-video-capture, you can use --use-file-for-fake-audio-capture:

In cypress/plugins/index.js:

module.exports = (on, config) => {
  on('before:browser:launch', (browser = {}, args) => {
    // args.push('--use-fake-device-for-media-stream')
    if (browser.name === 'chrome') {
      args.push('--use-fake-ui-for-media-stream')
      args.push('--use-fake-device-for-media-stream')
      args.push('--use-file-for-fake-audio-capture=cypress/fixtures/your_sound.wav')
    }
    
    return args
  })
}