Allow Camera Access From admin frontend of an Embedded App

den232
Shopify Partner
143 5 43

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

Reply 1 (1)
den232
Shopify Partner
143 5 43

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 <iFrame> to do so using Permissions Policy. Otherwise, the user will never even be asked for permission to use the input devices.
 
Info on the Permissions Policy (used to be called Feature Policy)
 
Examples of what you can do with Permissions Policy: ... Restrict a site from using sensitive devices like the camera, microphone, or speakers.
 
 
To allow camera access, Include this in the response headers:
 
Permissions-Policy: camera=*
 
which should produce html like this:
 
<iFrame src="https://example.com" allow="camera 'none'"></iFrame>
 
(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