Is it possible to access device camera from lwc. I am trying the below code but it is not working -


    <template if:true={video}>
        <video autoplay class="videoelement"></video>
    <lightning-button label="clikc" onclick={capture}></lightning-button>

JS -

@track video;
@track canvas;

capture() {
    this.video = this.template.querySelector( '.videoelement' )

    if ( navigator.mediaDevices )
        // access the web cam
        navigator.mediaDevices.getUserMedia( { video: true } )

            .then( function ( stream ) {

                this.video.srcObject = stream
            } )

            .catch( function ( error ) {
                document.body.textContent = 'Could not access the camera. Error: ' + error.name;
            } );
  • Does any thirds party javascript will help or that also will face locker issue ? Feb 27, 2021 at 18:54
  • technically speaking, you could wrap your lwc in an aura component with the api version set to 39 or bellow.
    – glls
    Feb 27, 2021 at 18:58

1 Answer 1


The Navigator's mediaDevices property is not available with Locker Service. however, here is an idea posted a few years ago which you can upvote

Make navigator.mediaDevices available in Lightning Components API (WebRTC)

This might be confusing, given that Salesforce's Locker API Viewer documentation states otherwise, but the property itself returns undefined.

here, you can find the available properties from the navigator interface: enter image description here

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