使用WebcamJS在一个页面中添加2个网络摄像头

我正试图用jhuckaby的webcam.js添加2个或多个网络摄像头输入。但只有一个能完美运作。我正在学习本教程https://pixlcore.com/demos/webcamjs/demos/preview.html

这是我的javascript代码：

  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;
        } );
    }

这是我的相机1 HTML代码：

    <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>

相机2 HTML代码：

    <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>

问题是，如果我使用相机1，相机2不工作，如果我用相机2，相机1不工作。函数的名称和id已经不同且唯一，Camera 1和Camera 2具有相同的函数和html，区别仅在于函数的名称与id。然后我在页面上使用inspect元素，向我显示类似的错误

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

有答案吗？