Sabtu, September 23Perahu Layar Kertas

Cara Upload Foto dengan Webcam (Web Browser) HTML5

take picture
Sobat Pantura, kali ini akan belajar bagaimana kita bisa mem-upload file foto dengan cara take picture from camera or webcam on broswer , mungkin anda sudah biasa menemukan cara upload foto dengan file seperti gambar dibawah gb(1).

gb(1) Upload Foto dari File

sekarang kita akan mencoba membuat upload foto dengan webcam dengan plug-in jQuery, pada uji coba ini tidak menggunakan database (no database) hanya memindahkan foto ke dalam folder atau direktori saja.

langkahnya :

1. buat kerangka syntax HTML, agar mempermudah melakukan susunannya dan simpan dengan nama cam.php

<html>
<head>
<title>Ambil Foto dengan Webcam</title>
</head>
<body>
</body>
</html>

2. buat style dari css, copy syntax dibawah ini dan letakan diatas kode </head>

<style type=”text/css”>@import url(http://fonts.googleapis.com/css?family=Raleway:500);body{margin: 0;padding: 0;}a{text-decoration: none;color: inherit;}.hdr{font-family: ‘Raleway’, sans-serif;font-size: 1.4em;color: #fff;padding: 10px;text-align: right;}
.content{display: block;position: relative;overflow: hidden;height: 640px;margin: 0;}.content video, .content canvas{display: block;position: relative;max-height: 640px;height: 100%;margin: auto;}.content button{display: block;position: absolute;bottom: 20px;left: 45%;font-family: ‘Raleway’, sans-serif;color: #fff;margin-bottom: 10px;background-color: #79BD9A;padding: 7px 15px;display: block;border: none;border-radius: 2px;font-size: 14px;margin-right: 10px;-webkit-transition: all .2s ease;-moz-transition: all .2s ease;-o-transition: all .2s ease;-ms-transition: all .2s ease;transition: all .2s ease;z-index: 9999;}.content button:hover{cursor: pointer;background: #3B8686;}.content #new{display: none;}</style>

3. include file JQuery JS yang telah anda punya diatas kode <title>

<script type=”text/javascript” src=”jquery.min.js”></script>

4. masukkan canvas dan embeded video HTML5 untuk player capture from webcam letakan kode ini dibawah kode <body>

<div class=”content”>
<video id=”video” autoplay></video>
<button id=”snap”>Capture</button>
<button id=”new”>New</button>
<canvas id=”canvas” width=”300″ height=”500″></canvas>
<button id=”upload” style=”display:none;”>Upload</button>
</div>

5. masukkan syntax action js untuk button actionnya diatas kode </body>

<script>
// Put event listeners into place
window.addEventListener(“DOMContentLoaded”, function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById(“canvas”),
context = canvas.getContext(“2d”),
video = document.getElementById(“video”),
videoObj = { “video”: true },
errBack = function(error) {
console.log(“Video capture error: “, error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
} else if(navigator.mozGetUserMedia) { // WebKit-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById(“snap”).addEventListener(“click”, function() {
context.drawImage(video, 0, 0, 300, 500);
// Littel effects
$(‘#video’).fadeOut(‘slow’);
$(‘#canvas’).fadeIn(‘slow’);
$(‘#snap’).hide();
$(‘#new’).show();
// Allso show upload button
$(‘#upload’).show();
});
// Capture New Photo
document.getElementById(“new”).addEventListener(“click”, function() {
$(‘#video’).fadeIn(‘slow’);
$(‘#canvas’).fadeOut(‘slow’);
$(‘#snap’).show();
$(‘#new’).hide();
$(“#upload”).hide();
});
// Upload image to sever
document.getElementById(“upload”).addEventListener(“click”, function(){
var dataUrl = canvas.toDataURL(“image/jpeg”, 0.85);
$.ajax({
type: “POST”,
url: “camsave.php“,
data: {
imgBase64: dataUrl,
user: “Pakdhe”,
userid: “pantura”
}
}).done(function(msg) {
console.log(“saved”);
alert(‘foto berhasil di simpan’);
document.location=’cam.php’;
});
});
}, false);
</script> 

6. membuat file camsave.php yang ada di action

<?php
$rawData = $_POST[‘imgBase64’];
$filteredData = explode(‘,’, $rawData);
$unencoded = base64_decode($filteredData[1]);
$datime = date(“Y-m-d-H.i.s”, time() ) ; # – 3600*7
$userid  = $_POST[‘userid’] ;
// name & save the image file
$fp = fopen(‘images/’.$datime.’-‘.$userid.’.jpg’, ‘w’);
fwrite($fp, $unencoded);
fclose($fp);
?>

keterangan :

images : adalah nama direktori nama folder tempat menyimpan foto hasil capture. 
300,500 : adalah ukuran size foto yang disimpan.

7. lakukan uji coba buka file yang telah anda buat di browser http://localhost/html5/cam.php

tekan [Capture] Untuk mengambil foto
tekan [Upload] untuk menyimpan foto

 

alert tersimpan, bahwa foto tersimpan
Baca Lainnya :   Pengantar Bisnis dari Buku Jeff Madura

8. kita cek file di folder images

foto telah tersimpan dalam folder images

9. sekarang kita coba open images untuk ditampilkan

hasil preview foto yang tersimpan

selamat mencoba dan mengembangkan dengan database. salam pemrograman.

7 Comments

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *