title: Webcam is not defined (Javascript)
body: <p>I'm trying to set a webcam settings for some parameters using <code>ClassName</code> but the console says <code>Webcam is not defined</code>. Could anyone explain me where is my fault ? I already set the variable on it as <code>attachs[]</code> but still shows the error. I already browse for the problem too, but I have no idea what to do in my script. Please help..</p>
  
  <p>This is my script :</p>
  
  <pre><code>var attachs = document.getElementsByClassName('my_camera');
  
  attachs[0] = Webcam.set({ width: 360, heighht: 300, dest_width: 640, dest_height: 480, image_format: 'jpeg', jpeg_quality: 100 });
  attachs[1] = Webcam.set({ width: 360, heighht: 300, dest_width: 640, dest_height: 480, image_format: 'jpeg', jpeg_quality: 100 });
  attachs[2] = Webcam.set({ width: 360, heighht: 300, dest_width: 640, dest_height: 480, image_format: 'jpeg', jpeg_quality: 100 });
  
  Webcam.attach(attachs[0]);
  Webcam.attach(attachs[1]);
  Webcam.attach(attachs[2]);
  
  function take_snapshot(){
      Webcam.snap( function(data_uri){
          var camera = getElementsByClassName('my_camera');
          camera[0].innerHTML = '&lt;h2&gt;Hasil Foto :&lt;/h2&gt;' + '&lt;img class="img-responsive" src="'+data_uri+'"/&gt;';
          camera[1].innerHTML = '&lt;h2&gt;Hasil Foto :&lt;/h2&gt;' + '&lt;img class="img-responsive" src="'+data_uri+'"/&gt;';
          camera[2].innerHTML = '&lt;h2&gt;Hasil Foto :&lt;/h2&gt;' + '&lt;img class="img-responsive" src="'+data_uri+'"/&gt;';
  
      var raw_image_data = data_uri.replace(/^data\:image\/\w+\);base64\,/, '');
  
      var mydata = document.getElementsByClassName('mydata');
      mydata[0].value = raw_image_data;
      mydata[1].value = raw_image_data;
      mydata[2].value = raw_image_data;
  
      var opening = document.getElementsByClassName('opening');
      opening[0].submit();
      opening[1].submit();
      opening[2].submit();
  
    });
  }
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>This is my whole script as requested before..</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Image Upload preview
  
  $(document).ready( function() {
       $(document).on('change', '.btn-file :file', function() {
    var input = $(this),
     label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
    input.trigger('fileselect', [label]);
    });
  
    $('.btn-file :file').on('fileselect', function(event, label) {
  
        var input = $(this).parents('.input-group').find(':text'),
            log = label;
  
        if( input.length ) {
            input.val(log);
        } else {
            if( log ) alert(log);
        }
  
    });
    function readURL(input) {
        if (input.files &amp;&amp; input.files[0]) {
            var reader = new FileReader();
  
            reader.onload = function (e) {
                $('#img-upload').attr('src', e.target.result);
            }
  
            reader.readAsDataURL(input.files[0]);
        }
    }
  
    $("#imgInp").change(function(){
        readURL(this);
    });
   });
  
  
  //modal-trigger
  $('#delete').on('show.bs.modal', function(e) {
      $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
      $('.debug-url').html('Data URL: &lt;strong&gt;' + $(this).find('.btn-ok').attr('href') + '&lt;/strong&gt;');
  });
  
  
  //liveclock
  
  $(document).ready(function() {
      setInterval(timestamp, 1000);
  });
  
  function timestamp() {
      $.ajax({
          url: 'http://localhost/dailyreport/function/timestamp.php',
          success: function(data) {
              $('#timestamp').html(data);
          },
      });
  }
  
  // Webcam script
  
  require('./Webcam.js');
  var attachs = document.getElementsByClassName('my_camera');
  attachs[0] = Webcam.set({ width: 360, height: 300, dest_width: 640, dest_height: 480, image_format: 'jpeg', jpeg_quality: 100 });
  attachs[1] = Webcam.set({ width: 360, height: 300, dest_width: 640, dest_height: 480, image_format: 'jpeg', jpeg_quality: 100 });
  attachs[2] = Webcam.set({ width: 360, height: 300, dest_width: 640, dest_height: 480, image_format: 'jpeg', jpeg_quality: 100 });
  
  Webcam.attach(attachs[0]);
  Webcam.attach(attachs[1]);
  Webcam.attach(attachs[2]);
  
  function take_snapshot(){
   Webcam.snap( function(data_uri){
    var camera = getElementsByClassName('my_camera');
    camera[0].innerHTML = '&lt;h2&gt;Hasil Foto :&lt;/h2&gt;' + '&lt;img class="img-responsive" src="'+data_uri+'"/&gt;';
    camera[1].innerHTML = '&lt;h2&gt;Hasil Foto :&lt;/h2&gt;' + '&lt;img class="img-responsive" src="'+data_uri+'"/&gt;';
    camera[2].innerHTML = '&lt;h2&gt;Hasil Foto :&lt;/h2&gt;' + '&lt;img class="img-responsive" src="'+data_uri+'"/&gt;';
  
    var raw_image_data = data_uri.replace(/^data\:image\/\w+\);base64\,/, '');
  
    var mydata = document.getElementsByClassName('mydata');
    mydata[0].value = raw_image_data;
    mydata[1].value = raw_image_data;
    mydata[2].value = raw_image_data;
    
    var opening = document.getElementsByClassName('opening');
    opening[0].submit();
    opening[1].submit();
    opening[2].submit();
  
   });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php $title = 'Absen Staff | Soursally Daily Report'; include '../function/view/header.php'; include '../function/core/init.php'; ?&gt;
  
  &lt;?php
  
      date_default_timezone_set("Asia/Jakarta");
  
      $waktu   = date('H:i:s');
  
   ?&gt;
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
        &lt;h1&gt;Absensi Harian
          &lt;small&gt;
            &lt;?php
              if (($waktu &gt; '07:00:00') &amp;&amp; ($waktu &lt; '09:15:00')) {
                echo "Staff Opening";
              } 
              if (($waktu &gt; '12:00:00') &amp;&amp; ($waktu &lt; '12:15:00')) {
                echo "Staff Middle";
              }
              if (($waktu &gt; '15:00:00') &amp;&amp; ($waktu &lt; '15:15:00')) {
                echo "Staff Closing";
              } ?&gt;
          &lt;/small&gt;
        &lt;/h1&gt;&lt;hr /&gt;
    &lt;?php if ((($waktu &gt; '09:15:00') &amp;&amp; ($waktu &lt; '12:00:00')) 
        || (($waktu &gt; '12:15:00') &amp;&amp; ($waktu &lt; '15:00:00')) 
        ||  ($waktu &gt; '15:15:00') &amp;&amp; ($waktu &lt; '23:59:00')
        ||  ($waktu &gt; '00:00:00') &amp;&amp; ($waktu &lt; '07:00:00')) { ?&gt;
        &lt;div class="alert alert-danger text-center"&gt;
          &lt;label for="timestamp"&gt;Sekarang Pukul &lt;span id="timestamp"&gt;&lt;/span&gt;&lt;/label&gt;
          &lt;h2&gt;&lt;b&gt;ABSENSI TIDAK DAPAT DILAKUKAN &lt;hr /&gt;&lt;/b&gt;&lt;/h2&gt;
          &lt;h3&gt;&lt;b&gt;Waktu sudah melewati rentang yang telah ditentukan.&lt;/b&gt;&lt;/h3&gt;
          &lt;p&gt;Absensi hanya dapat dilakukan sebelum &lt;b&gt;pukul 09 : 15 : 00 untuk shift opening&lt;/b&gt; dan &lt;b&gt;15 : 15 : 00 untuk shift closing&lt;/b&gt; dan &lt;b&gt;pukul 12 : 15 : 00 untuk middle.&lt;/b&gt;&lt;/p&gt;
          &lt;p&gt;Staff yang tidak melaksanakan absensi &amp; sesi foto bersama sesuai shift masing-masing akan dianggap terlambat, kecuali sudah konfirmasi ke Manager Area sebelumnya&lt;/p&gt;
        &lt;/div&gt;
       &lt;hr /&gt;
    &lt;/div&gt;
  &lt;?php } ?&gt;
  
  &lt;?php if (($waktu &lt; '09:15:00') &amp;&amp; ($waktu &gt; '07:00:00')){ ?&gt;
    &lt;div class="row"&gt;
      &lt;form id="opening" action="../function/absen-opening.php" method="post"&gt;
        &lt;div class="col-md-4"&gt;
          &lt;input id="mydata" type="hidden" class="form-control" name="mydata" value=""&gt;
          &lt;div id="results"&gt;&lt;/div&gt;
  
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;
          &lt;label for="lokasi-outlet"&gt;Lokasi Outlet&lt;/label&gt;
            &lt;select class="form-control" name="lokasi-absen" id="lokasi"&gt;
              &lt;option value=""&gt;Lokasi Outlet&lt;/option&gt;
  
              &lt;?php
              global $conn;
              $query = "SELECT * FROM daftar_outlet ORDER BY lokasi ASC";
              $result = sqlsrv_query($conn,$query);
              $current_subcategory = "Jakarta";
              while ($data = sqlsrv_fetch_array($result)) {
                if ($data["lokasi"] != $current_subcategory) {
                  if ($current_subcategory != "Jakarta") {
                    echo "&lt;/optgroup&gt;";
                  }
                  echo '&lt;optgroup label="'.$data['lokasi'].'"&gt;';
                  $current_subcategory = $data['lokasi'];
                }
                echo '&lt;option value="'.$data['id'].'"&gt;'.$data['nama_outlet'].'&lt;/option&gt;';
              }
              echo "&lt;/optgroup&gt;";
              ?&gt;
  
  
            &lt;/select&gt;
          &lt;label for="staff-opening"&gt;Staff Opening&lt;/label&gt;
            &lt;input type="text" class="form-control" name="staff-opening" placeholder="Contoh : Andi, Riska, Mei (Part time), Wulan (training)" &gt;
          &lt;label for="staff-ijin"&gt;Ijin&lt;/label&gt;
            &lt;input type="text" name="staff-ijin" class="form-control" placeholder="Contoh : Andika" &gt;
          &lt;label for="staff-cuti"&gt;Cuti&lt;/label&gt;
            &lt;input type="text" name="staff-cuti" class="form-control" placeholder="Contoh : Feriansyah" &gt;
          &lt;label for="staff-off"&gt;Off&lt;/label&gt;
            &lt;input type="text" name="staff-libur" class="form-control" placeholder="Contoh : Adrian" &gt;
          &lt;div style="margin-top:20px;"&gt;
            &lt;button type="submit" name="submit" class="btn btn-block btn-success"&gt;Kirim&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;
          &lt;div class="my_camera" style="background:#000; margin-bottom:5px;"&gt;&lt;/div&gt;
  
  
            &lt;!-- A button for taking snaps --&gt;
            &lt;a class="btn btn-block btn-primary" type="button" value="Take Snapshot" onclick="take_snapshot()"&gt;Ambil Foto&lt;/a&gt;
  
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;?php } ?&gt;
  
  &lt;?php if (($waktu &lt; '12:15:00') &amp;&amp; ($waktu &gt; '12:00:00')){ ?&gt;
    &lt;div class="row"&gt;
      &lt;form action="../function/absen-middle.php" method="post"&gt;
        &lt;div class="col-md-4"&gt;
          &lt;input id="mydata2" type="hidden" class="form-control" name="mydata" value=""&gt;
          &lt;div id="results"&gt;&lt;/div&gt;
  
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;
          &lt;label for="lokasi-outlet"&gt;Lokasi Outlet&lt;/label&gt;
            &lt;select class="form-control" name="lokasi-absen" id="lokasi"&gt;
              &lt;option value=""&gt;Lokasi Outlet&lt;/option&gt;
  
              &lt;?php
              global $conn;
              $query = "SELECT * FROM daftar_outlet ORDER BY lokasi ASC";
              $result = sqlsrv_query($conn,$query);
              $current_subcategory = "Jakarta";
              while ($data = sqlsrv_fetch_array($result)) {
                if ($data["lokasi"] != $current_subcategory) {
                  if ($current_subcategory != "Jakarta") {
                    echo "&lt;/optgroup&gt;";
                  }
                  echo '&lt;optgroup label="'.$data['lokasi'].'"&gt;';
                  $current_subcategory = $data['lokasi'];
                }
                echo '&lt;option value="'.$data['nama_outlet'].'"&gt;'.$data['nama_outlet'].'&lt;/option&gt;';
              }
              echo "&lt;/optgroup&gt;";
              ?&gt;
  
  
            &lt;/select&gt;
          &lt;label for="staff-middle"&gt;Staff Middle&lt;/label&gt;
            &lt;input type="text" class="form-control" name="staff-opening" placeholder="Contoh : Andi, Riska, Mei (Part time), Wulan (training)" &gt;
            &lt;button type="submit" name="submit" class="btn btn-block btn-success"&gt;Kirim&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;
          &lt;div class="my_camera" style="background:#000; margin-bottom:5px;"&gt;&lt;/div&gt;
  
  
            &lt;!-- A button for taking snaps --&gt;
            &lt;a class="btn btn-block btn-primary" type="button" value="Take Snapshot" onclick="take_snapshot()"&gt;Ambil Foto&lt;/a&gt;
  
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;?php } ?&gt;
  
  &lt;?php if (($waktu &lt; '15:15:00') &amp;&amp; ($waktu &gt; '15:00:00')){ ?&gt;
    &lt;div class="row"&gt;
      &lt;form action="../function/absen-closing.php" method="post"&gt;
        &lt;div class="col-md-4"&gt;
          &lt;input id="mydata3" type="hidden" class="form-control" name="mydata" value=""&gt;
          &lt;div id="results"&gt;&lt;/div&gt;
  
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;
          &lt;label for="lokasi-outlet"&gt;Lokasi Outlet&lt;/label&gt;
            &lt;select class="form-control" name="lokasi-absen" id="lokasi"&gt;
              &lt;option value=""&gt;Lokasi Outlet&lt;/option&gt;
  
              &lt;?php
              global $conn;
              $query = "SELECT * FROM daftar_outlet ORDER BY lokasi ASC";
              $result = sqlsrv_query($conn,$query);
              $current_subcategory = "Jakarta";
              while ($data = sqlsrv_fetch_array($result)) {
                if ($data["lokasi"] != $current_subcategory) {
                  if ($current_subcategory != "Jakarta") {
                    echo "&lt;/optgroup&gt;";
                  }
                  echo '&lt;optgroup label="'.$data['lokasi'].'"&gt;';
                  $current_subcategory = $data['lokasi'];
                }
                echo '&lt;option value="'.$data['nama_outlet'].'"&gt;'.$data['nama_outlet'].'&lt;/option&gt;';
              }
              echo "&lt;/optgroup&gt;";
              ?&gt;
  
  
            &lt;/select&gt;
          &lt;label for="staff-middle"&gt;Staff Sore&lt;/label&gt;
            &lt;input type="text" class="form-control" name="staff-opening" placeholder="Contoh : Andi, Riska, Mei (Part time), Wulan (training)" &gt;
            &lt;button type="submit" name="submit" class="btn btn-block btn-success"&gt;Kirim&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;
          &lt;div class="my_camera" style="background:#000; margin-bottom:5px;"&gt;&lt;/div&gt;
  
  
            &lt;!-- A button for taking snaps --&gt;
            &lt;a class="btn btn-block btn-primary" type="button" value="Take Snapshot" onclick="take_snapshot()"&gt;Ambil Foto&lt;/a&gt;
  
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;?php } ?&gt;
  
  &lt;/div&gt;
  
  
  &lt;?php include '../function/view/footer.php'; ?&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>EDIT again</strong></p>
  
  <p>Sorry, i forgot to include the footer.php script</p>
  
  <p>here it is..</p>
  
  <pre><code>    &lt;script src="../assets/js/jquery-3.2.1.min.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script src="../assets/js/bootstrap.min.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script src="../assets/js/main.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script src="../assets/js/webcam.js" charset="utf-8"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>