Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Allow Camera Access From admin frontend of an Embedded App

Solved

Allow Camera Access From admin frontend of an Embedded App

den232
Shopify Partner
220 8 57

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

Accepted Solution (1)

den232
Shopify Partner
220 8 57

This is an accepted solution.

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

 

View solution in original post

Replies 7 (7)

den232
Shopify Partner
220 8 57

This is an accepted solution.

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

 

tahaf22labs
Shopify Partner
3 0 1

Did you manage to find a solution here? I'm also stuck on the same issue. 

den232
Shopify Partner
220 8 57

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

tahaf22labs
Shopify Partner
3 0 1

That's a wonderful workaround! Sadly, not for me I guess, Since I need audio permission for audio streaming. 

infinityp913
Shopify Partner
11 2 3

Hi! I have a very similar requirement for my app. Did you ever find a solution/workaround for mic access?

den232
Shopify Partner
220 8 57

Yeah, I'm afraid I did.  It's impossible by design.  See my comment above of Feb 8. 

fnd
Shopify Partner
10 0 0

 

Hey if anyone needs help with this. I left a comment on this post here

 

https://community.shopify.com/c/shopify-cli-and-tools/is-there-a-way-to-allow-camera-and-microphone-...