<!-- Navigator.getUserMedia -->

<video id="display-webcam" autoplay="true" playsinline="true"></video>

<script>

 var webcam = document.getElementById("display-webcam"),
 getUserMedia = () => {
   if (navigator.getUserMedia) {

   let constraints = {
    audio: true, // for deactive change false, for active change true
    video: {
        facingMode: "user"
     }, // for front change "user", for back change "environment"
   };

   navigator.mediaDevices .getUserMedia(constraints) .then(function success(stream) {
     webcam.srcObject = stream;
   });
    // The MediaDevices.getUserMedia() method prompts the user for permission to use a media input which produces a MediaStream with tracks containing the requested types of media.

  } else {

    // Section showing error or incompatible browser.

  }
 };

 getUserMedia();

 // [open-source] : location:github.com/tamddk/library/tree/main/getUserMediaWithFrame

</script>