JS VIDEO | DOMException: Could not start video source

If anyone else is having this problem and nothing else helps. Make sure that your camera is not already claimed/used by a different software/browser.

TLDR: I have tested your code and had to change it a bit:

https://codepen.io/puradawid/pen/PoqxzPQ

It looks like the problem lays here:

navigator.getUserMedia({
    video: {}
  },
  stream => { video.srcObject = stream },
  err => console.log(err)
);

Regarding to docs navigator.getUserMedia is deprecated and there is navigator.mediaDevices.getUserMedia that supports it. However, changing that up doesn't solve the correct problem which is your callback functions. This method returns Promise that is controlled by .then(), so changing it allows me to see my face in codepen:

navigator.mediaDevices.getUserMedia({
    video: true
}).then(
  stream => (video.srcObject = stream),
  err => console.log(err)
);

In Windows 10 go to settings->privacy->App permission(left side)->Microphone-> enable 'Allow apps to access your microphone' After that retry with your JS program....It will work!!

If anyone have such an error and you are working on a laptop. You can try bending your laptop monitor in both directions. Sometimes the cable comes loose. This helped in my case.

Also look into Feature-Policy HTTP header, both on the website and on the host web server config, and make sure camera access is allowed.

I have tried all the other solution but nothing is work. Then finally i need to uninstall my camera driver in Device Manager and then scan for hardware changes. Try to run the app again and it's working.

I'm building electron desktop app in windows 10.
electron: 15.3.0

Source video that helped me: https://www.youtube.com/watch?v=XE2ULFlzkxw

I went to the browser settings for camera and noticed that the default camera was showing as "Leap Motion" which is not a standard camera device. I changed to an actual webcam and the problem was solved.

Sometimes this type of error also appears when you try to make a peer-to-peer call system and your tests are done on the same device. The camera is already used by the initiator and the receiver can no longer activate the camera.

I ran into this problem on certain android devices (Sony XA2) when trying to toggle the camera on a mobile browser because I am calling navigator.mediaDevices.getUserMedia repeatedly on each camera toggle.

The solution that I found was to make sure to stop all the tracks in previous streams that you created.

 this.stream.getTracks().forEach(t => {
    t.stop();
    this.stream.removeTrack(t);
 });

Without the previous code you can't seem to toggle camera on certain Android devices: (Demo), (Code) The error shown was DOMException: Requested device not found

By stopping previous tracks: you are able to start a new stream: (Demo) Code

Note: The following code snippet doesn't seem to execute in stack overflow due to security restrictions, so please use the jsfiddle links.

class Camera {
  constructor({ video }) {
    this.facingMode = "environment";
    this.video = video;
    video.onloadedmetadata = () => {
      video.play();
    };
  }
  async toggleCamera() {
    if (this.facingMode === "environment") {
      this.facingMode = "user";
    } else {
      this.facingMode = "environment";
    }
    try {
        if (this.stream){
            /* On some android devices, it is necessary to stop the previous track*/
        this.stream.getTracks().forEach(t => t.stop());
      }
      this.stream = await navigator.mediaDevices.getUserMedia({
            video: {
          facingMode:  this.facingMode,
        }
      });
    } catch (e) {
      console.error(e);
    }
    this.video.srcObject = this.stream;
  }
}

const camera = new Camera({
     video: document.querySelector("video"),
});
const button = document.querySelector("button");
button.addEventListener('click', () => {
    camera.toggleCamera();
});

<button>
  Toggle Camera
</button>
<video></video>