Search code examples
javascripthtmlwebcamnavigator

Force getUserMedia re-prompt when using HTTPS on Firefox

I am making a simple app with two webcams that needs to work only on latest Firefox. Locally it works fine:

  • the user is prompted for the access to the camera
  • the user selects one camera
  • the user is prompted again
  • the user selects the second camera
  • both streams work fine

However, when I upload it to the server which serves the page through HTTPS, the access from the first camera is remembered and I just get two of the same streams.

Is there a way to force re-prompting on HTTPS so that the user can select the other camera, as well?

This is my code:

    function handleSuccess1(stream) {
      video1.srcObject = stream;

      navigator.mediaDevices.getUserMedia(constraints).
        then(handleSuccess2).catch(handleError);
    }

    function handleSuccess2(stream) {
      // this gets called automatically with the first stream
      // without re-prompting the user
      video2.srcObject = stream;
    }

    const constraints = {
      video: true
    };

    function handleError(error) {
      console.error(error);
    }

    navigator.mediaDevices.getUserMedia(constraints).
        then(handleSuccess1).catch(handleError);
Solution

  • Use navigator.mediaDevices.enumerateDevices() to list the available cameras and/or microphones.

    You can read about it in more detail here: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices