Webcam merupakan hardware internal / eksternal yang berfungsi untuk
merekam / menangkap gambar. Webcam juga difungsikan untuk melakukan chat menggunakan video via skype. Namun, dalam tutorial kali ini penulis akan share cara mengakses webcam menggunakan HTML5 dan membukanya pada browser.
Fungsi dari akses webcam sendiri merupakan hal dasar untuk melakukan akses lebih banyak hardware melalui aplikasi web. Prinsip kerja dari program yang dituliskan dibawah adalah mengakses webcam menggunakan perintah atau bahasa javascript. Setelah webcam berhasil diakses barulah ditampilkan di halaman web.
Berikut adalah cara mengakses webcam
menggunakan HTML 5.
1. Buat file HTML
<html>
<head>
<title>Akses</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<div class="container">
<h1>Akses Kamera</h1>
<div class="center">
<video id="video" width="640" height="480" autoplay></video>
<canvas id="canvas" width="640" height="480"></canvas>
<div class="clear"></div>
<div style="margin-top:20px">
<button class="btn" id="capture">capture</button>
<a class="btn" id="download">Download</a>
</div>
</div>
</div>
</body>
</html>
<head>
<title>Akses</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<div class="container">
<h1>Akses Kamera</h1>
<div class="center">
<video id="video" width="640" height="480" autoplay></video>
<canvas id="canvas" width="640" height="480"></canvas>
<div class="clear"></div>
<div style="margin-top:20px">
<button class="btn" id="capture">capture</button>
<a class="btn" id="download">Download</a>
</div>
</div>
</div>
</body>
</html>
2. Buat file CSS
.container {
width: 728px;
margin: 0 auto;
}
.center {
text-align: center;
}
#video, #canvas {
width: 49%;
height: 250px;
float: left;
}
.clear {
clear: both;
}
#canvas {
border: 2px solid #DDD;
}
.btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #333333;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid: DXImageTransform.Microsoft.gradient(enabled false);
border: 1px solid #cccccc;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
}
width: 728px;
margin: 0 auto;
}
.center {
text-align: center;
}
#video, #canvas {
width: 49%;
height: 250px;
float: left;
}
.clear {
clear: both;
}
#canvas {
border: 2px solid #DDD;
}
.btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #333333;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid: DXImageTransform.Microsoft.gradient(enabled false);
border: 1px solid #cccccc;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
}
3. Buat File Js
window.addEventListener("DOMContentLoaded", function() {
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);
};
if(navigator.getUserMedia) {
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
}
else if(navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
else if(navigator.mozGetUserMedia) {
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
document.getElementById("capture").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
document.getElementById('download').addEventListener('click', function() {
var d = new Date();
var n = d.getTime();
downloadCanvas(this, 'canvas', n + '.png');
}, false);
}, false);
function downloadCanvas(link, canvasId, filename) {
link.href = document.getElementById(canvasId).toDataURL();
link.download = filename;
}
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);
};
if(navigator.getUserMedia) {
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
}
else if(navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
else if(navigator.mozGetUserMedia) {
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
document.getElementById("capture").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
document.getElementById('download').addEventListener('click', function() {
var d = new Date();
var n = d.getTime();
downloadCanvas(this, 'canvas', n + '.png');
}, false);
}, false);
function downloadCanvas(link, canvasId, filename) {
link.href = document.getElementById(canvasId).toDataURL();
link.download = filename;
}
4. Simpan file css dalam folder css dan javascript dalam folder js. Lihat gambar berikut :
5. Jalankan file HTML pada firefox
Tidak ada komentar:
Posting Komentar