Cara Mengakses Webcam di Web PHP HTML JAVASCRIPT

Salam. Selamat datang di sistemit.com. Di kesempatan kali ini saya akan berbagi cara bagaimana untuk mengakses webcam pada website baik itu web php, html dan javascript. Kita kali ini akan menggunakan library bernama

webcam.js

yang mana library tersebut merupakan library untuk mengakses webcam yang ada di komputer maupun gadget (mobile). Adapun fungsi dari menampilkan kamera webcam pada website ada banyak. Antara lain, misal : untuk keperluan input buku tamu, mengambil gambar secara langsung dan menyimpannya. Nah ini benar benar sangat diperlukan.

Bagaimana sih cara mengakses webcam dengan html atau php ?

Mari simak langkah langkah berikut :

1. Download webcam.js

Donload library webcam.js di sini

2. Buat file index.php

Buatlah file bernama index.php dan copy kode berikut:

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Cam Snap</title>
<script type="text/javascript" src="webcam.js"></script>
<script language="JavaScript">
function take_snapshot() {
    Webcam.snap(function(data_uri) {
    document.getElementById('results').innerHTML = '<img id="base64image" src="'+data_uri+'"/><button onclick="SaveSnap();">Save Snap</button>';
});
}
function ShowCam(){
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 100
});
Webcam.attach('#my_camera');
}
function SaveSnap(){
    document.getElementById("loading").innerHTML="Saving, please wait...";
    var file =  document.getElementById("base64image").src;
    var formdata = new FormData();
    formdata.append("base64image", file);
    var ajax = new XMLHttpRequest();
    ajax.addEventListener("load", function(event) { uploadcomplete(event);}, false);
    ajax.open("POST", "upload.php");
    ajax.send(formdata);
}
function uploadcomplete(event){
    document.getElementById("loading").innerHTML="";
    var image_return=event.target.responseText;
    var showup=document.getElementById("uploaded").src=image_return;
}
window.onload= ShowCam;
</script>
<style type="text/css">
.container{display:inline-block;width:320px;}
#Cam{background:rgb(255,255,215);}#Prev{background:rgb(255,255,155);}#Saved{background:rgb(255,255,55);}
</style>
</head>
<body>
<div class="container" id="Cam"><b>Webcam Preview...</b>
    <div id="my_camera"></div><form>
	<input type="button" value="Snap It" onClick="take_snapshot()"></form>
</div>
<div class="container" id="Prev">
    <b>Snap Preview...</b><div id="results"></div>
</div>
<div class="container" id="Saved">
    <b>Saved</b><span id="loading"></span><img id="uploaded" src=""/>
</div>
</body>
</html>

3. Buatlah file aksi upload (upload.php)

Agar foto yang kita ambil dari webcam tersimpan kita perlu membuat aksi upload dengan file bernama upload.php dengan kode sebagai berikut :

<?php
define('UPLOAD_DIR', 'uploads/');
$img = $_POST['base64image'];
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . $_POST['nama'] . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>

4. Buat folder bernama uploads

Terakhir buatlah folder bernama uploads untuk menyimpan gambar yang di ambil.

Demikianlah cara untuk menampilkan webcam dengan menggunakan php dan html. Semoga bermanfaat.

Jangan lupa share dan komen ya

Related posts

2 Thoughts to “Cara Mengakses Webcam di Web PHP HTML JAVASCRIPT”

  1. ulil

    it work. very usefull. big thx bro.

    1. sistemit.com

      You’re welcome bro. Thx

Leave a Comment