Add 2 Webcam in one page with WebcamJS

Question

I'm trying to add 2 or multiple webcam input with webcam.js from jhuckaby. But only one will works perfectly. And i'm following this tutorial https://pixlcore.com/demos/webcamjs/demos/preview.html

Here's my javascript code:

  Webcam.set({
    width: 100,
    height: 100,
    force_flash: true,
    image_format: 'jpeg'
  });
  // CAMERA 1
  Webcam.attach('#my_camera');

  function preview_snapshot() {
    Webcam.freeze();
    document.getElementById('pre_take_buttons').style.display = 'none';
    document.getElementById('post_take_buttons').style.display = '';
  }

  function cancel_preview() {
    Webcam.unfreeze();
    document.getElementById('pre_take_buttons').style.display = '';
    document.getElementById('post_take_buttons').style.display = 'none';
  }

  function save_photo() {
    // actually snap photo (from preview freeze) and display it
    Webcam.snap( function(data_uri) {
    // display results in page
       document.getElementById('results').innerHTML =
                '<h5>Profil anda:</h5>' +
                '<img src="'+data_uri+'"/>';
    // swap buttons back
        document.getElementById('pre_take_buttons').style.display = '';
        document.getElementById('post_take_buttons').style.display = 'none';

      var raw_image_data = data_uri.replace(/^data\:image\/\w+\;base64\,/, '');
      document.getElementById('mydataProfil').value = raw_image_data;
        } );
    }
  // Camera 1 END
  // CAMERA 2
  Webcam.attach('#my_camera_ktp');

  function preview_snapshot_ktp() {
        Webcam.freeze();
        document.getElementById('pre_take_buttons_ktp').style.display = 'none';
        document.getElementById('post_take_buttons_ktp').style.display = '';
  }

  function cancel_preview_ktp() {
        Webcam.unfreeze();
        document.getElementById('pre_take_buttons_ktp').style.display = '';
        document.getElementById('post_take_buttons_ktp').style.display = 'none';
  }

  function save_photo_ktp() {
        Webcam.snap( function(data_uri) {

            // display results in page
            document.getElementById('results_ktp').innerHTML =
                '<h5>Profil anda:</h5>' +
                '<img src="'+data_uri+'"/>';

            // swap buttons back
            document.getElementById('pre_take_buttons_ktp').style.display = '';
            document.getElementById('post_take_buttons_ktp').style.display = 'none';

      var raw_image_data = data_uri.replace(/^data\:image\/\w+\;base64\,/, '');
      document.getElementById('mydataProfilKTP').value = raw_image_data;
        } );
    }

And this is my camera 1 HTML code:

    <center>
      <div id="my_camera"></div>
      <br>
      <div id="pre_take_buttons">
        <input type=button value="Take Foto" onClick="preview_snapshot()">
      </div>
    </center>

    <div id="post_take_buttons" style="display:none" class="text-center">
      <input type=button value="&lt; Take again" onClick="cancel_preview()">
      <input type=button value="Save &gt;" onClick="save_photo()">
    </div>

Camera 2 HTML code:

    <center>
      <div id="my_camera_ktp"></div>
      <br>
      <div id="pre_take_buttons_ktp">
        <input type=button value="Take foto KTP" onClick="preview_snapshot_ktp()">
      </div>
    </center>

    <div id="post_take_buttons_ktp" style="display:none" class="text-center">
      <input type=button value="&lt; take again" onClick="cancel_preview_ktp()">
      <input type=button value="Save &gt;" onClick="save_photo_ktp()">
    </div>

The problem is if i use camera 1, camera 2 does'nt work, if i use camera 2 then camera 1 does'nt work. Function's name and id already different and unique, Camera 1 and 2 has same function and html, the difference only function's name and id. And then i use inspect element on my page, show me an error like this

Uncaught TypeError: this.getMovie(...)._snap is not a function

Any answer?

Answer 1

I think you can't achieve this by using that library. However, I solved this by using only javaScript. Here what you need to do. HTML:

<div style="width: 100%;text-align:center;">
    <video id="myCamer2" width="150" height="150" autoplay></video>
</div>

Script:

<script>
// second camera
let video = document.querySelector("#myCamer2");
let stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
video.srcObject = stream;
</script>

You can learn more about this from https://usefulangle.com/post/352/javascript-capture-image-from-camera and https://www.studytonight.com/post/capture-photo-using-webcam-in-javascript here.