Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

JavaScript Chrome not asking permission to use camera

richarddunnebsc

Active Coder
I have this code
HTML:
 <video id="webCam" autoplay playsinline></video>
        <canvas id="canvas"></canvas>

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

When I load the page, Chrome should ask permission to access the camera, but it doesn't. No idea why not. Setting allows browser to ask to use camera.
 
I have this code
HTML:
 <video id="webCam" autoplay playsinline></video>
        <canvas id="canvas"></canvas>

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

When I load the page, Chrome should ask permission to access the camera, but it doesn't. No idea why not. Setting allows browser to ask to use camera.
The reason Chrome is not prompting for camera permission is likely because your JavaScript code is trying to create a new instance of webCam but webCam is not a built-in JavaScript class or function. Also, accessing the camera requires using the navigator.mediaDevices.getUserMedia() API.
Here’s a working minimal example to access the webcam and show the video feed in a &lt;video&gt; element, which will trigger the permission prompt:
 
I ran into a problem trying to post this. I am using a .js library that I linked to. But for some reason, the post would not submit with it. I had the script in code tags and it would not post. I kept getting Error 404 wh Instead I am hoping it will post without using code tags. en submitting. See attached file for library link

Apologies for any confusion.
 
Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

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@
setWithTTL@
getExplicitBlockList@
_shouldShowTouchpoints@
shouldShowTouchpoints@
isEligible@
getRenderPrompt@
render@
(anonymous)@
j@
k@
(anonymous)@
i@
add@
(anonymous)@
Deferred@
then@
r.fn.ready@
(anonymous)@
[td width="274.062px"]CacheStore.js:18[/td] [td width="274.062px"]CacheStore.js:18[/td] [td]await in setWithTTL[/td] [td width="274.062px"]GenAIWebpageEligibilityService.js:18[/td] [td]await in getExplicitBlockList[/td] [td width="274.062px"]GenAIWebpageEligibilityService.js:18[/td] [td width="274.062px"]GenAIWebpageEligibilityService.js:18[/td] [td width="274.062px"]ActionableCoachmark.js:18[/td] [td width="274.062px"]ShowOneChild.js:18[/td] [td]await in getRenderPrompt[/td] [td width="274.062px"]ShowOneChild.js:18[/td] [td width="274.062px"]content-script-idle.js:18[/td] [td width="274.062px"]jquery-3.1.1.min.js:2[/td] [td width="274.062px"]jquery-3.1.1.min.js:2[/td] [td]setTimeout[/td] [td width="274.062px"]jquery-3.1.1.min.js:2[/td] [td width="274.062px"]jquery-3.1.1.min.js:2[/td] [td width="274.062px"]jquery-3.1.1.min.js:2[/td] [td width="274.062px"]jquery-3.1.1.min.js:2[/td] [td width="274.062px"]jquery-3.1.1.min.js:2[/td] [td width="274.062px"]jquery-3.1.1.min.js:2[/td] [td width="274.062px"]jquery-3.1.1.min.js:2[/td] [td width="274.062px"]content-script-idle.js:18[/td]
 
Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
You should use the MediaDevices.getUserMedia() API to access the webcam. Here's a simple working example:
Code:
<video id="webCam" autoplay playsinline></video>
<canvas id="canvas"></canvas>
const webCamElement = document.getElementById("webCam");

navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" } })
  .then((stream) => {
    webCamElement.srcObject = stream;
  })
  .catch((error) => {
    console.error("Error accessing webcam:", error);
  });
  • navigator.mediaDevices.getUserMedia() is the standard API to request access to the camera.
  • It will prompt the user to allow or deny camera access.
  • Once allowed, it streams the camera feed to the &lt;video&gt; element via srcObject.
  • Your original code’s new webCam(...) looks like a custom class or library, which either is missing or incorrectly referenced.



If you intended to use a custom​


  • Make sure the class or library is correctly imported or defined.
  • Check the capitalization (JavaScript is case-sensitive).
  • Verify that the constructor and start() method are implemented properly.
 
You should use the MediaDevices.getUserMedia() API to access the webcam. Here's a simple working example:
Code:
<video id="webCam" autoplay playsinline></video>
<canvas id="canvas"></canvas>
const webCamElement = document.getElementById("webCam");

navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" } })
  .then((stream) => {
    webCamElement.srcObject = stream;
  })
  .catch((error) => {
    console.error("Error accessing webcam:", error);
  });
  • navigator.mediaDevices.getUserMedia() is the standard API to request access to the camera.
  • It will prompt the user to allow or deny camera access.
  • Once allowed, it streams the camera feed to the &lt;video&gt; element via srcObject.
  • Your original code’s new webCam(...) looks like a custom class or library, which either is missing or incorrectly referenced.



If you intended to use a custom​


  • Make sure the class or library is correctly imported or defined.
  • Check the capitalization (JavaScript is case-sensitive).
  • Verify that the constructor and start() method are implemented properly.

You should use the MediaDevices.getUserMedia() API to access the webcam. Here's a simple working example:
Code:
<video id="webCam" autoplay playsinline></video>
<canvas id="canvas"></canvas>
const webCamElement = document.getElementById("webCam");

navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" } })
  .then((stream) => {
    webCamElement.srcObject = stream;
  })
  .catch((error) => {
    console.error("Error accessing webcam:", error);
  });
  • navigator.mediaDevices.getUserMedia() is the standard API to request access to the camera.
  • It will prompt the user to allow or deny camera access.
  • Once allowed, it streams the camera feed to the &lt;video&gt; element via srcObject.
  • Your original code’s new webCam(...) looks like a custom class or library, which either is missing or incorrectly referenced.



If you intended to use a custom​


  • Make sure the class or library is correctly imported or defined.
  • Check the capitalization (JavaScript is case-sensitive).
  • Verify that the constructor and start() method are implemented properly.
I tried that example
Console says
Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
 
I tried that example
Console says
Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
When I ran this javascript
JavaScript:
const video = document.getElementById('live-stream');
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ video: true })
    .then((stream) => {
        // Set the video source to the camera stream
        video.srcObject = stream;
    })
    .catch((error) => {
        console.error("Error accessing the camera: ", error);
    });
    } else {
    console.log("getUserMedia is not supported in this browser.");
        }
The console gave this
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:1688)
at async GenAIWebpageEligibilityService.shouldShowTouchpoints (GenAIWebpageEligibilityService.js:18:3526)
at async content-script-utils.js:18:1249

This is casheStore.js
JavaScript:
ADOBE CONFIDENTIAL
* ___________________
*
*  Copyright 2015 Adobe Systems Incorporated
*  All Rights Reserved.
*
* NOTICE:  All information contained herein is, and remains
* the property of Adobe Systems Incorporated and its suppliers,
* if any.  The intellectual and technical concepts contained
* herein are proprietary to Adobe Systems Incorporated and its
* suppliers and are protected by all applicable intellectual property laws,
* including trade secret and or copyright laws.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Adobe Systems Incorporated.
**************************************************************************/
class CacheStore {
    constructor(e="default-cache") {
        this.cacheName = e
    }
    async set(e, a) {
        try {
            const t = await caches.open(this.cacheName);
            await t.put(e, new Response(JSON.stringify(a)))
        } catch (e) {
            console.error("Cache set failed:", e)
        }
    }
    async setWithTTL(e, a, t) {
        try {
            const c = Date.now() + t;
            await chrome.storage.local.set({
                [`${this.cacheName}-${e}-expiry`]: c
            }),
            await this.set(e, a)
        } catch (e) {
            console.error("Cache setWithTTL failed:", e)
        }
    }
    async get(e) {
        try {
            const a = await caches.open(this.cacheName)
              , t = await a.match(e);
            return t ? await t.json() : null
        } catch (e) {
            return console.error("Cache get failed:", e),
            null
        }
    }
    async getWithTTL(e) {
        try {
            const a = `${this.cacheName}-${e}-expiry`
              , t = (await chrome.storage.local.get(a))[a];
            return t && Date.now() > t ? (this.delete(e),
            null) : await this.get(e)
        } catch (e) {
            return console.error("Cache getWithTTL failed:", e),
            null
        }
    }
    async delete(e) {
        try {
            const a = await caches.open(this.cacheName);
            await a.delete(e),
            await chrome.storage.local.remove(`${this.cacheName}-${e}-expiry`)
        } catch (e) {
            console.error("Cache delete failed:", e)
        }
    }
}
 
Uninstalled Chrome Adobe extension. Uninstalled the re installed Chrome. Console says
getUserMedia is not supported in this browser
Failed to load resource: the server responded with a status of 404 (Not Found)
 
HTML:
<video id="live-stream" autoplay controls></video>
JavaScript:
const video = document.getElementById('live-stream');
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ video: true })
        .then((stream) => {
            // Set the video source to the camera stream
            video.srcObject = stream;
        })
        .catch((error) => {
            console.error("Error accessing the camera: ", error);
        });
        } else {
        console.log("getUserMedia is not supported in this browser.");
        }

1749046670283.webp
console output
getUserMedia is not supported in this browser.
 
HTML:
<video id="live-stream" autoplay controls></video>
JavaScript:
const video = document.getElementById('live-stream');
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ video: true })
        .then((stream) => {
            // Set the video source to the camera stream
            video.srcObject = stream;
        })
        .catch((error) => {
            console.error("Error accessing the camera: ", error);
        });
        } else {
        console.log("getUserMedia is not supported in this browser.");
        }

View attachment 3060
console output
getUserMedia is not supported in this browser.
why is window.isSecureContext returning false in localhost?
 

Buy us a coffee!

Buy me a coffee.
Back
Top Bottom