0

I have a LWC which opens Visualforce Page in modal window.
And in that Visualforce Page I want to get access to a camera.
For it I use navigator.mediaDevices.getUserMedia({video: true}) (link)

However I am getting " DOMException: Permission denied " error message :

My LWC :

<template>
    <lightning-card >
        <p slot="title">Test</p>
        <lightning-button label="Test" variant="brand" slot="actions" onclick={showModal}></lightning-button>
        <div slot="footer"></div>
    </lightning-card>
    <template if:true={showCloudinaryModal}>
        <div class="slds-modal slds-fade-in-open slds-backdrop">
            <div class="slds-modal__container">
                <iframe width="100%" height="100%" src={visualforcePage}></iframe>
            </div>
        </div>
    </template>
</template>

The simplest Visualforce Page which does not work :

<apex:page>
    <script>
        window.onload = function() {
            if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
                console.log("Let's get this party started");
                navigator.mediaDevices.getUserMedia({video: true}).then( (result) => {
                    console.log('getUserMedia result: ',result);
                }).catch( (error) =>{
                    console.error('getUserMedia error: ',error);
                });
            }
        }
    </script>
</apex:page>

the error which I am getting "DOMException: Permission denied" :

enter image description here

My Dev org and the Visualforce Page have access to camera.

And it works if you try to open the Visualforce Page in other window or if you embed the Visualforce Page into another Visualforce Page using iframe.

Am I missing something ? Is it something with Lightning Locker ?

I tried to enable Lightning Web Security for LWC, however it didn't help.

Any help will be appreciated.
Thank you.

1 Answer 1

0

As Visualforce pages are serverd from a different domain, you have to allow that permissions on the iFrame:

<iframe allow="camera; microphone" src={mysrc}/>

Here is a related question (not LWC + Visualforce)

https://stackoverflow.com/questions/57008648/accessing-camera-and-mic-in-sandboxed-iframe-from-different-subdomain

1
  • 1
    Thanks for your response and it actually make sense. I added allow="camera; microphone", however the result is the same. I still get DOMException: Permission denied Nov 19, 2022 at 20:19

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .