DEVHIDE
Login Or Sign up

Webcam is not defined (Javascript)

3.4k Views Asked by At

I'm trying to set a webcam settings for some parameters using ClassName but the console says Webcam is not defined. Could anyone explain me where is my fault ? I already set the variable on it as attachs[] 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..

This is my script :

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 = '<h2>Hasil Foto :</h2>' + '<img class="img-responsive" src="'+data_uri+'"/>';
        camera[1].innerHTML = '<h2>Hasil Foto :</h2>' + '<img class="img-responsive" src="'+data_uri+'"/>';
        camera[2].innerHTML = '<h2>Hasil Foto :</h2>' + '<img class="img-responsive" src="'+data_uri+'"/>';

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

  });
}

EDIT

This is my whole script as requested before..

// 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 && 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: <strong>' + $(this).find('.btn-ok').attr('href') + '</strong>');
});


//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 = '<h2>Hasil Foto :</h2>' + '<img class="img-responsive" src="'+data_uri+'"/>';
  camera[1].innerHTML = '<h2>Hasil Foto :</h2>' + '<img class="img-responsive" src="'+data_uri+'"/>';
  camera[2].innerHTML = '<h2>Hasil Foto :</h2>' + '<img class="img-responsive" src="'+data_uri+'"/>';

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

 });
}
<?php $title = 'Absen Staff | Soursally Daily Report'; include '../function/view/header.php'; include '../function/core/init.php'; ?>

<?php

    date_default_timezone_set("Asia/Jakarta");

    $waktu   = date('H:i:s');

 ?>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1>Absensi Harian
        <small>
          <?php
            if (($waktu > '07:00:00') && ($waktu < '09:15:00')) {
              echo "Staff Opening";
            } 
            if (($waktu > '12:00:00') && ($waktu < '12:15:00')) {
              echo "Staff Middle";
            }
            if (($waktu > '15:00:00') && ($waktu < '15:15:00')) {
              echo "Staff Closing";
            } ?>
        </small>
      </h1><hr />
  <?php if ((($waktu > '09:15:00') && ($waktu < '12:00:00')) 
      || (($waktu > '12:15:00') && ($waktu < '15:00:00')) 
      ||  ($waktu > '15:15:00') && ($waktu < '23:59:00')
      ||  ($waktu > '00:00:00') && ($waktu < '07:00:00')) { ?>
      <div class="alert alert-danger text-center">
        <label for="timestamp">Sekarang Pukul <span id="timestamp"></span></label>
        <h2><b>ABSENSI TIDAK DAPAT DILAKUKAN <hr /></b></h2>
        <h3><b>Waktu sudah melewati rentang yang telah ditentukan.</b></h3>
        <p>Absensi hanya dapat dilakukan sebelum <b>pukul 09 : 15 : 00 untuk shift opening</b> dan <b>15 : 15 : 00 untuk shift closing</b> dan <b>pukul 12 : 15 : 00 untuk middle.</b></p>
        <p>Staff yang tidak melaksanakan absensi & sesi foto bersama sesuai shift masing-masing akan dianggap terlambat, kecuali sudah konfirmasi ke Manager Area sebelumnya</p>
      </div>
     <hr />
  </div>
<?php } ?>

<?php if (($waktu < '09:15:00') && ($waktu > '07:00:00')){ ?>
  <div class="row">
    <form id="opening" action="../function/absen-opening.php" method="post">
      <div class="col-md-4">
        <input id="mydata" type="hidden" class="form-control" name="mydata" value="">
        <div id="results"></div>

      </div>
      <div class="col-md-4">
        <label for="lokasi-outlet">Lokasi Outlet</label>
          <select class="form-control" name="lokasi-absen" id="lokasi">
            <option value="">Lokasi Outlet</option>

            <?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 "</optgroup>";
                }
                echo '<optgroup label="'.$data['lokasi'].'">';
                $current_subcategory = $data['lokasi'];
              }
              echo '<option value="'.$data['id'].'">'.$data['nama_outlet'].'</option>';
            }
            echo "</optgroup>";
            ?>


          </select>
        <label for="staff-opening">Staff Opening</label>
          <input type="text" class="form-control" name="staff-opening" placeholder="Contoh : Andi, Riska, Mei (Part time), Wulan (training)" >
        <label for="staff-ijin">Ijin</label>
          <input type="text" name="staff-ijin" class="form-control" placeholder="Contoh : Andika" >
        <label for="staff-cuti">Cuti</label>
          <input type="text" name="staff-cuti" class="form-control" placeholder="Contoh : Feriansyah" >
        <label for="staff-off">Off</label>
          <input type="text" name="staff-libur" class="form-control" placeholder="Contoh : Adrian" >
        <div style="margin-top:20px;">
          <button type="submit" name="submit" class="btn btn-block btn-success">Kirim</button>
        </div>
      </div>
      <div class="col-md-4">
        <div class="my_camera" style="background:#000; margin-bottom:5px;"></div>


          <!-- A button for taking snaps -->
          <a class="btn btn-block btn-primary" type="button" value="Take Snapshot" onclick="take_snapshot()">Ambil Foto</a>

      </div>
    </form>
  </div>
<?php } ?>

<?php if (($waktu < '12:15:00') && ($waktu > '12:00:00')){ ?>
  <div class="row">
    <form action="../function/absen-middle.php" method="post">
      <div class="col-md-4">
        <input id="mydata2" type="hidden" class="form-control" name="mydata" value="">
        <div id="results"></div>

      </div>
      <div class="col-md-4">
        <label for="lokasi-outlet">Lokasi Outlet</label>
          <select class="form-control" name="lokasi-absen" id="lokasi">
            <option value="">Lokasi Outlet</option>

            <?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 "</optgroup>";
                }
                echo '<optgroup label="'.$data['lokasi'].'">';
                $current_subcategory = $data['lokasi'];
              }
              echo '<option value="'.$data['nama_outlet'].'">'.$data['nama_outlet'].'</option>';
            }
            echo "</optgroup>";
            ?>


          </select>
        <label for="staff-middle">Staff Middle</label>
          <input type="text" class="form-control" name="staff-opening" placeholder="Contoh : Andi, Riska, Mei (Part time), Wulan (training)" >
          <button type="submit" name="submit" class="btn btn-block btn-success">Kirim</button>
        </div>
      </div>
      <div class="col-md-4">
        <div class="my_camera" style="background:#000; margin-bottom:5px;"></div>


          <!-- A button for taking snaps -->
          <a class="btn btn-block btn-primary" type="button" value="Take Snapshot" onclick="take_snapshot()">Ambil Foto</a>

      </div>
    </form>
  </div>
  <?php } ?>

<?php if (($waktu < '15:15:00') && ($waktu > '15:00:00')){ ?>
  <div class="row">
    <form action="../function/absen-closing.php" method="post">
      <div class="col-md-4">
        <input id="mydata3" type="hidden" class="form-control" name="mydata" value="">
        <div id="results"></div>

      </div>
      <div class="col-md-4">
        <label for="lokasi-outlet">Lokasi Outlet</label>
          <select class="form-control" name="lokasi-absen" id="lokasi">
            <option value="">Lokasi Outlet</option>

            <?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 "</optgroup>";
                }
                echo '<optgroup label="'.$data['lokasi'].'">';
                $current_subcategory = $data['lokasi'];
              }
              echo '<option value="'.$data['nama_outlet'].'">'.$data['nama_outlet'].'</option>';
            }
            echo "</optgroup>";
            ?>


          </select>
        <label for="staff-middle">Staff Sore</label>
          <input type="text" class="form-control" name="staff-opening" placeholder="Contoh : Andi, Riska, Mei (Part time), Wulan (training)" >
          <button type="submit" name="submit" class="btn btn-block btn-success">Kirim</button>
        </div>
      </div>
      <div class="col-md-4">
        <div class="my_camera" style="background:#000; margin-bottom:5px;"></div>


          <!-- A button for taking snaps -->
          <a class="btn btn-block btn-primary" type="button" value="Take Snapshot" onclick="take_snapshot()">Ambil Foto</a>

      </div>
    </form>
  </div>
  <?php } ?>

</div>


<?php include '../function/view/footer.php'; ?>

EDIT again

Sorry, i forgot to include the footer.php script

here it is..

    <script src="../assets/js/jquery-3.2.1.min.js" charset="utf-8"></script>
    <script src="../assets/js/bootstrap.min.js" charset="utf-8"></script>
    <script src="../assets/js/main.js" charset="utf-8"></script>
    <script src="../assets/js/webcam.js" charset="utf-8"></script>
  </body>
</html>
javascript webcam.js
Original Q&A
1

There are 1 best solutions below

2
On

Webcam is not native in browser you need to import a script/library. Like WebcamJS.

The script must be added before you run your own code or you will get this error.

EDIT

Seeing the footer now you also need to put webcam.js before main.js

Related Questions in JAVASCRIPT

Related Questions in WEBCAM.JS

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Popular Questions

Copyright © 2021 Jogjafile Inc.