Webcam js Error in Chrome: Could not access webcam

Question

I am using Webcam JS in one of my projects.

https://github.com/jhuckaby/webcamjs

version I was using: 1.0.0 Latest version available: 1.0.5

It was working fine in both Chrome and Firefox. But lately webcam error started showing only in CHROME. Firefox still works fine.

Error that I received in 1.0.0: Webcam.JS Error: cannot access webcam.

I upgraded the version and now the error I'm getting in chrome is

Webcam.js Error: Could not access webcam.
Permission Error: Only secure origins are allowed

https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features

My website has a secure origin.

Can anyone tell me why I'm facing errors like that?

I believe there's no point in copy pasting webcam.js code.

Here's the code I use:

Webcam.set({
      width: 320,
     height: 240,
     dest_width: 320,
     dest_height: 240,
     image_format: 'jpeg',
     jpeg_quality: 90,
     force_flash: false
    });
    Webcam.attach( '#my_camera' );

Answer 1

Chrome 47 requires that the site be HTTPS in order for user media / webcam to work! This is a brand new requirement that I didn't see coming...

Chromium Docs on the topic: https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features

This means I'll have to buy a SSL cert. The library should work fine in Chrome 47, as long as you are using it on 127.0.0.1, or over HTTPS.

Issue Discussion

Solution

Answer 2

You can permitted a specific site or port:

To ignore Chrome's secure origin policy, follow these steps.

• Navigate to chrome://flags/#unsafely-treat-insecure-origin-as-secure in Chrome.

• Find and enable the Insecure origins treated as secure section (see below).

• Add any addresses you want to ignore the secure origin policy for. Remember to include the port number too (if required).

• Save and restart Chrome.

See here!

Answer 3

If you can't provide a secure connection yet, all you can do is use the fallback to flash. Use the config code in that lib:

 Webcam.set({
        force_flash: true
 });

Answer 4

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 }]
});

Answer 5

I also got this error.

Solution:

Make sure that your website is secured. Access it via https protocol.

Example:

Use

https://example.azurewebsites.net/ 

Instead of

http://example.azurewebsites.net/

Answer 6

There is another approach for this kind of issue which helped me during the development and might be helpful for others. The solution is to downgrade the version of Google Chrome to the 46-th.

Here are the basic steps: - Turn off updates in Google Chrome

• Go to C:\\Program Files\\Google\\Chrome\\Application or to the directory where your browser was installed.

• You will find 2 different files out there: chrome.exe and old_chrome.exe. Rename chrome.exe to any other name and then rename the old_chrome.exe to chrome.exe

• Launch Google Chrome

You can find more detailed instruction here: http://ipswitchft.force.com/kb/articles/FAQ/How-to-downgrade-to-an-Older-version-of-Chrome