我尝试使用ClassName为某些参数设置网络摄像头设置，但控制台显示Webcam is not defined。谁能解释一下我的错在哪里？我已将变量设置为attachs[]但仍显示错误。我已经浏览了这个问题，但我不知道在我的脚本中要做什么。请帮忙..
这是我的剧本：
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();
});
}
修改
这是我之前要求的整个脚本..
// 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'; ?>
再次编辑
抱歉，我忘了包含footer.php脚本
这里是..
<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>
答案 0 :(得分：0)
在您需要导入脚本/库的浏览器中，Webcam不是本机的。与WebcamJS一样。
必须在运行自己的代码之前添加脚本，否则会出现此错误。
修改
现在看到页脚，你还需要在main.js
之前放置webcam.js