Question

我正在尝试使用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和2具有相同的功能和html，区别仅在于函数的名称和id。然后我在我的页面上使用inspect元素，向我显示这样的错误

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

任何答案？

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

0 个答案: