webcam.js could not access webcam: ConstraintNotStatisfied error

[aruprakshit]

I am having this function to initialize webcam.

var app;

app = angular.module("app");

app.directive('dockingWebcam', [
  function() {
    return function(scope, element, attributes) {
      Webcam.set({
        width: 320,
        height: 240,
        dest_width: 1024,
        dest_height: 800,
        image_format: 'jpeg',
        jpeg_quality: 90,
        force_flash: false,
        flip_horiz: true,
        fps: 45
      });

      Webcam.attach(attributes.id);
    };
  }
]);

It used to work, but now I am getting below error:

Any idea what could be wrong. My chrome version is 61.0.3163.100 (Official Build) (64-bit).

[zsalab]

have you tried in HTTPS? Most of the browsers does not allow to access A/V devices on non encrypted sites.

[jhuckaby]

Looks like some kind of weird constraint error. The first thing that stands out is, why are you asking for 45 FPS? I'd try removing that param first. If that doesn't work, you can try specifying your own constraints. The default is to put the width and height into a mandatory clause, so you can try something without that. Also, try other browsers and a different webcam, if you have it.

Do either of these pages work?

• https://simpl.info/getusermedia/
• https://davidwalsh.name/demo/camera.php

[aruprakshit]

@jhuckaby removed 45 FPS argument. Still doesn't work. The 2 sites you had mentioned worked after I allowed the access to my camera. My web version also used to ask me for camera access and when I did allow it, I get the camera.

The exact code worked in Firefox without any change though. In Safari I got below error:

Webcam.js Error: Could not access webcam: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. NotAllowedError (DOM Exception 35): The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

[aruprakshit]

@zsalab documentation says it works in localhost though.

[aruprakshit]

@zsalab The error is gone when I set the constraint.

Webcam.set("constraints", {
  optional: [{ minWidth: 600 }]
});

My working code now is:

var app;

app = angular.module("app");

app.directive("dockingWebcam", [
  function() {
    return function(scope, element, attributes) {
      Webcam.set({
        width: 500,
        height: 400,
        image_format: "jpeg",
        jpeg_quality: 90,
        force_flash: false,
        flip_horiz: true,
        fps: 45
      });

      Webcam.set("constraints", {
        optional: [{ minWidth: 600 }]
      });

      Webcam.attach(attributes.id);
    };
  }
]);

But It is loosing the picture quality. What params to adjust for this?

[maheshvartak3]

I also was getting the same error. This was due to setting higher resolution than webcam supports. What is the mega pixel of your webcam?