5

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' );
Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Sajeev C
  • 1,538
  • 4
  • 17
  • 30
  • This explains why. https://github.com/jhuckaby/webcamjs/issues/124 – Sajeev C Dec 04 '15 at 07:22
  • FYI you can also run into this error if your JS is in an iframe of different origin to the main doc. Mic, webcams etc also have cross domain security policies. – Geordie Apr 14 '23 at 22:58

6 Answers6

6

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

Sajeev C
  • 1,538
  • 4
  • 17
  • 30
5

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!

csabinho
  • 1,579
  • 1
  • 18
  • 28
Augusto Cruz
  • 51
  • 1
  • 3
  • This works for me. As i need access webcam for our in house software. But i would not recommend for large scale clients. For large scale i would recommend to buy ssl certificate. – Nagib Mahfuz Dec 12 '19 at 09:19
  • Worked for me also. For our local network web app. – Larry Jun 11 '20 at 23:59
2

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
 });
orafaelreis
  • 2,855
  • 2
  • 28
  • 31
2
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 }]
});
Unheilig
  • 16,196
  • 193
  • 68
  • 98
Abdul Mujeeb
  • 17
  • 3
1

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/
4b0
  • 21,981
  • 30
  • 95
  • 142
VJPPaz
  • 917
  • 7
  • 21
0

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

johannesMatevosyan
  • 1,974
  • 2
  • 30
  • 40
  • 1
    This method is useful only during the development phase. What if the project is running live and clients are facing issues? We can't tell 'em to downgrade as it may be hard for 'em to digest these kinda things. – Sajeev C Dec 15 '15 at 06:21
  • then you can shift the project to https – johannesMatevosyan Dec 15 '15 at 07:21