JavaScript not asking permission to use camera

[richarddunnebsc]

I have this code

<video id="webCam" autoplay playsinline></video>
        <canvas id="canvas"></canvas>

const webCamElement = document.getElementById("webCam");
        const canvasElement = document.getElementById("canvas");
        const webCam = new webCam(webCamElement, "user", canvasElement);
        webCam.start();

I have site settings set to websites can ask to use the camera. However, when I load the page, nothing happens. JavaScript doesn’t ask for permission to use the camera.
I got this code from a YouTube tutorial.

js library.txt (72 Bytes)

[PaulOB]

Is that the correct link to the webcam-easy.min.js?

I think it should be:

https://unpkg.com/webcam-easy@1.1.1/dist/webcam-easy.min.js

Also I think you need a capital W here for the new Webcam(

[richarddunnebsc]

I made the changes you suggested, didn’t make a difference.
Chrome Site settings - Insecure origins treated as secure
Does this need to be enabled?
From what I have researched, Chrome will only allow the camera to be accessed by https and localhost for development. I’m using localhost.

[PaulOB]

Are you getting any errors in the console?

The code works for me on codepen.

Maybe you need to wait for the document to load before executing the script?

[PaulOB]

Don’t know what’s wrong with Sitepoint today but it won’t let me post code

[PaulOB]

  window.addEventListener("DOMContentLoaded", () => {
    const webCamElement = document.getElementById("webCam");
    const canvasElement = document.getElementById("canvas");
    const webCam = new Webcam(webCamElement, "user", canvasElement);
    webCam.start();
  });

[m_hutley]

What happens if you use the script that is actually in the readme?

webcam.start()
   .then(result =>{
      console.log("webcam started");
   })
   .catch(err => {
       console.log(err);
   });

[richarddunnebsc]

Nothing.
I found this How to on geeksforgeeks.org

<div>
        <video id="vid"></video>
    </div>
    <br />
    <button id="but" autoplay>
        Open WebCam
    </button>

document.addEventListener("DOMContentLoaded", () => {
        let but = document.getElementById("but");
        let video = document.getElementById("vid");
        let mediaDevices = navigator.mediaDevices;
        vid.muted = true;
        but.addEventListener("click", () => {

            // Accessing the user camera and video.
            mediaDevices
                .getUserMedia({
                    video: true,
                    audio: true,
                })
                .then((stream) => {
                    // Changing the source of video to current stream.
                    video.srcObject = stream;
                    video.addEventListener("loadedmetadata", () => {
                        video.play();
                    });
                })
                .catch(alert);
        });
    });

Its not working either.

[PaulOB]

@richarddunnebsc

Nothing.

Does the actual codepen I posted not work for you?

If it does then its probably your localhost.

Only localhost is treated as secure — 127.0.0.1 or 192.168.x.x are not.

However perhaps @m_hutley can shed more light on it as I’m out of my depth there

[richarddunnebsc]

I got the camera working from codepen.
Trying to figure out why its not working locally on localhost using the same code

[richarddunnebsc]

Usually, when a website ask permission, the website is listed under
Allowed to use your camera in Chrome settings
chrome://settings/content/camera
Then change the permission for the website. Refresh website.
For some reason, localhost is not asking for permission.

[PaulOB]

@richarddunnebsc

localhost is not asking for permission.

What is the url for your localhost as mentioned in my previous post?

[richarddunnebsc]

http:// followed by localhost

[richarddunnebsc]

Sitepoint won’t allow localhost url in post. localhost is replaced by whatever project name is selected in localhost, so http:// followed by project name.

[PaulOB]

I’m not going to be much help on the localhost side of things as I’m only repeating what I’ve found out on the web.

This was something that was offered to try:

2. Clear Previous Permissions

Chrome might have blocked camera access previously and remembered that choice:

* Go to: `chrome://settings/content/camera`
* Under **"Not allowed to use your camera"**, remove any entries for `localhost`
* Also, visit your localhost URL and click the 🔒 icon → **"Site settings"**
  * Set **Camera** to **Allow**
  * Reload the page

[richarddunnebsc]

Already did that.

[richarddunnebsc]

The JavaScript is executing, however I checked the console in web developer

Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
Hope this indicates what/where the problem is/lies

[richarddunnebsc]

CacheStore.js:18 Cache set failed: ReferenceError: caches is not defined at CacheStore.set (CacheStore.js:18:93)
at CacheStore.setWithTTL (CacheStore.js:18:351)
at async GenAIWebpageEligibilityService.getExplicitBlockList (GenAIWebpageEligibil…yService.js:18:1290)
at async GenAIWebpageEligibilityService._shouldShowTouchpoints (GenAIWebpageEligibil…yService.js:18:1595)
at async GenAIWebpageEligibilityService.shouldShowTouchpoints (GenAIWebpageEligibil…yService.js:18:3140)
at async ActionableCoachmark.isEligible (ActionableCoachmark.js:18:2503)
at async ShowOneChild.getRenderPrompt (ShowOneChild.js:18:1750)
at async ShowOneChild.render (ShowOneChild.js:18:1961)

	set	@	CacheStore.js:18
	setWithTTL	@	CacheStore.js:18
	await in setWithTTL
	getExplicitBlockList	@	GenAIWebpageEligibilityService.js:18
	await in getExplicitBlockList
	_shouldShowTouchpoints	@	GenAIWebpageEligibilityService.js:18
	shouldShowTouchpoints	@	GenAIWebpageEligibilityService.js:18
	isEligible	@	ActionableCoachmark.js:18
	getRenderPrompt	@	ShowOneChild.js:18
	await in getRenderPrompt
	render	@	ShowOneChild.js:18
	(anonymous)	@	content-script-idle.js:18
	j	@	jquery-3.1.1.min.js:2
	k	@	jquery-3.1.1.min.js:2
	setTimeout
	(anonymous)	@	jquery-3.1.1.min.js:2
	i	@	jquery-3.1.1.min.js:2
	add	@	jquery-3.1.1.min.js:2
	(anonymous)	@	jquery-3.1.1.min.js:2
	Deferred	@	jquery-3.1.1.min.js:2
	then	@	jquery-3.1.1.min.js:2
	r.fn.ready	@	jquery-3.1.1.min.js:2
	(anonymous)	@	content-script-idle.js:18

[PaulOB]

@richarddunnebsc

however I checked the console in web developer

I believe that’s from an extension and not related to your problem but I think we need to wait for help from @m_hutley or one of the other JS gurus here.

What happens if you add the code for webcam start that was suggested above.

webCam.start()
  .then(() => {
    console.log("Webcam started");
  })
  .catch(err => {
    console.error("Webcam start failed:", err);
  });

What does the console say then.

[richarddunnebsc]

const webCamElement = document.getElementById("webCam");
        const canvasElement = document.getElementById("canvas");
        const webCam = new Webcam(webCamElement, "user", canvasElement);
        webCam.start()
        .then(() => {
            console.log("Webcam started");
        })
        .catch(err => {
            console.error("Webcam start failed:", err);
        });

Console says:
Cache set failed: ReferenceError: caches is not defined
at CacheStore.set (CacheStore.js:18:93)
at CacheStore.setWithTTL (CacheStore.js:18:351)
at async GenAIWebpageEligibilityService.getExplicitBlockList (GenAIWebpageEligibilityService.js:18:1290)
at async GenAIWebpageEligibilityService._shouldShowTouchpoints (GenAIWebpageEligibilityService.js:18:1595)
at async GenAIWebpageEligibilityService.shouldShowTouchpoints (GenAIWebpageEligibilityService.js:18:3140)
at async ActionableCoachmark.isEligible (ActionableCoachmark.js:18:2503)
at async ShowOneChild.getRenderPrompt (ShowOneChild.js:18:1750)
at async ShowOneChild.render (ShowOneChild.js:18:1961)

No difference