Contents
Kali ini admin akan ngasih Tips & Trick seputar WebcamJS, menampilkan, Snapshot, Error handling dan penanganannya.
WebcamJS
WebcamJS adalah standalone library JavaScript untuk mengambil gambar dari kamera komputer Anda, dan mengirimkannya kepada Anda sebagai URI Data JPEG atau PNG. Gambar tersebut kemudian dapat ditampilkan di halaman web Anda, dirender ke dalam kanvas, atau dikirimkan ke server Anda. WebcamJS menggunakan getUserMedia HTML5.
Open Source
WebcamJS is open source, MIT licensed, and available on GitHub:
https://github.com/jhuckaby/webcamjs
Implementasi
Buat box seperti dibawah ini (admin menggunakan bootstrap AdminLTE) kemudian paste kode berikut:
<div class="col-md-4">
<div class="box box-widget">
<div class="box-header with-border">
<div class="user-block">
<h3 class="box-title"><i class="fa fa-camera"></i> Ambil Photo</h3>
</div>
</div>
<div class="box-body">
<center><div id="webcam_body" style="width: 100%; height: 100%; overflow: hidden; transform: scaleX(1);"></div></center>
</div>
<div class="box-footer" id="webcam_footer">
<div class="user-block">
<center>
<a class="btn btn-social-icon btn-vk" id="btnRetake"><i class="fa fa-ban"></i></a>
<a class="btn btn-social-icon btn-dropbox" id="btnSnapshot"><i class="fa fa-camera"></i></a>
</center>
</div>
</div>
</div>
</div>Diatas akan menampilkan webcam id=”webcam_body” dengan posisi center/tengah, dengan 2 tombol yaitu Retake dan Take Capture webcam. Sehingga akan menampilkan gambar pada halaman web seperti dibawah ini.
the Javascript
<script type="text/javascript">
$(document).ready(function() {
// WEBCAM.js
var shutter = new Audio();
shutter.autoplay = false;
shutter.src = navigator.userAgent.match(/Firefox/) ? 'shutter.ogg' : 'shutter.mp3';
Webcam.set({
width: 240,
height: 320,
// device capture size
dest_width: 240,
dest_height: 320,
// final cropped size
crop_width: 320,
crop_height: 320,
align:'center',
image_format: 'jpeg',
jpeg_quality: 100,
constraints: { video: true, facingMode: 'environment' }
});
Webcam.attach('#webcam_body');
$("#btnRetake").on("click", function() {
Webcam.unfreeze();
return false;
});
$("#btnSnapshot").click(function(){
shutter.play();
Webcam.freeze();
return false;
});
});
</script>Penjelasan
Pada baris ini WebcamJS memungkinkan mengeluarkan suara/shutter saat di klik.
var shutter = new Audio();
shutter.autoplay = false;
shutter.src = navigator.userAgent.match(/Firefox/) ? 'shutter.ogg' : 'shutter.mp3';
shutter.play();Untuk memutar webcam ke kamera belakang/depan bisa gunakan facingMode ‘environment’ untuk kamera belakang atau ‘user’ untuk kamera depan. Mengambil gambar sementara bisa gunakan Webcam.freeze(); dan Webcam.unfreeze(); untuk mengambil gambar lainnya.
Menyimpan Capture
var image = '';
Webcam.snap( function(data_uri) {
image = data_uri;
});kemudian tambahkan parameter image diatas setelah serialize() untuk mengirimkan data ke server
$("#formID").serialize()+"&image="+imagesaat post gunakan script berikut untuk mengambil data yang di kirim. data:image yang digunakan diatas bertipe gambar jpg dan opsional lain bisa pakai tipe png
$image = str_replace('data:image/jpeg;base64,', '', $_POST['image']);
$image = str_replace(' ', '+', $image);
$imaged = base64_decode($image);
$filename = 'photo_'.time().'.jpg';
file_put_contents('/upload/'.$filename,$imaged);Error Handling
- Allow Camera diperlukan untuk diperbolehkannya akses Camera
- Webcam.js Error: Could not access webcam: NotAllowedError: Permission denied NotAllowedError: Permission denied Error tersebut biasanya Website belum beralih ke https
- Webcam.js Error: Webcam is Not Loaded Yet Biasanya karna izin kamera tidak diberikan ke Chrome atau memang kameranya bermasalah
Demikian beberapa tips dari admin seputar WebcamJS semoga bermanfaat.
Author Profile
- Hi my name is Ricki, I am a blogger from Indonesia. Founder of erkamoo.com, Besides creating Web Applications, I also write about Blogging Tips and Tutorials on Programming, Databases, HTML.
