1

I'm having a problem building a LWC component. I'm using right API version (Ver 46), which lets me use mediaDevices. I tried to put things as simple as possible, but quite can't get the right result that I'm expecting.

Please look into it and let me know, if I'm missing something.

.html

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

.js

capture() {
    // this might have face locker issue
    this.video = this.template.querySelector(".videoelement");
    if (navigator.mediaDevices) {
        // accessing webcam
        navigator.mediaDevices
          .getUserMedia({ video: true, audio: false })
          .then(function (stream) {
            this.video.srcObject = stream;
            this.video.play();
          })
          .catch(function (error) {
            console.log("someting went wrong...")
          });
    }
}

stop(e) { // stopping the webcam
    var stream = video.srcObject;
    var tracks = stream.getTracks();
    for (var i = 0; i < tracks.length; i++) {
        var track = tracks[i];
        track.stop();
    }
    video.srcObject = null;
}
3
  • 1
    Are you using Locker Service or Lighting Web Security?
    – sfdcfox
    Mar 29 at 22:10
  • Hey @sfdcfox yes, I'm using them as you told me before. But quite not get the output from it. I'm pretty sure there is no problems in my codes and that's why I put them simple as possible.
    – Ian Lee
    Mar 30 at 0:07
  • @sfdcfox I'm currently enabled the Lightning Web Security for this
    – Ian Lee
    Mar 30 at 15:28

1 Answer 1

2

What you are trying is interesting, because it explores the new Lightning Web Security. A few points:

You haven't added the declaration of the video variable to the class code you provided here. It's probably not true at the start of your capture method and therefore the videoelement can't be found in the DOM.

The code you've provided neither makes clear, from where the stop method is supposed to be called. It refers to video like to a local variable.

Here is a slightly simplified, hopefully working version of your code:

<template>
    <video autoplay class="videoelement"></video>
    <lightning-button label="Photo Capture" onclick={capture}></lightning-button>
    <lightning-button label="Capture Stop" onclick={stop}></lightning-button>
</template>
import { LightningElement } from "lwc";

export default class Vide extends LightningElement {
    capture() {
        const video = this.template.querySelector(".videoelement");
        if (navigator.mediaDevices) {
            navigator.mediaDevices
                .getUserMedia({ video: true, audio: false })
                .then((stream) => {
                    video.srcObject = stream;
                    video.play();
                })
                .catch(function (error) {
                    console.error("something went wrong: " + error);
                });
        }
    }

    stop() {
        const video = this.template.querySelector(".videoelement");
        video.srcObject.getTracks().forEach((track) => track.stop());
        video.srcObject = null;
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.