I am attempting to use camera to take product images to build products, but when my code does this:
navigator.mediaDevices.getUserMedia({ video: true })
it just causes an error “permission denied”. I have no problem with the browser asking the user for this permission, but it just fails … no request is issued to user.
Any ideas? Thanks ,jb
I have learned some about this … It looks to me as if the admin document is loaded into an iFrame, and the headers need to be set so that camera access is allowed from the iFrame.
Some excerpts from official Mozilla pages:
Media() is a powerful feature that can only be used in secure contexts; in insecure contexts, navigator.mediaDevices is undefined, preventing access to getUserMedia(). A secure context is, in short, a page loaded using HTTPS or the file:/// URL scheme, or a page loaded from localhost.
… User permission is always required to access the user’s audio and video inputs. Only a window’s top-level document context for a valid origin can even request permission to use getUserMedia(), unless the top-level context expressly grants permission for a given
(Several features can be controlled at the same time by including a semi-colon-separated list of policy directives inside the allow attribute)
To test the permission, try this in your browser console from both the top and iFrame JavaScript contexts. The top should say ‘granted’, the iFrame should say ‘denied’
navigator.permissions.query({ name: "camera" }).then((b) => console.log(b.state))
Still looking for help on resolving this! … jb
Did you manage to find a solution here? I’m also stuck on the same issue.
Yeah, I’m afraid I did. It’s impossible by design. I gave up, switched to Plan B (actually it was more like Plan M) and used a camera app to save images as files on my local machine, then pull those files into the Shopify Admin code. Does that make sense? Cheers jb
That’s a wonderful workaround! Sadly, not for me I guess, Since I need audio permission for audio streaming.
Hi! I have a very similar requirement for my app. Did you ever find a solution/workaround for mic access?
Yeah, I’m afraid I did. It’s impossible by design. See my comment above of Feb 8.
Hey if anyone needs help with this. I left a comment on this post here