Pojď, pojďme si udělat selfie s javascriptem
Hai ketemu lagi bersama saya pria tampan asli sunda hehe…, Tutorial kali ini kita coba untuk selfie dengan javascript, mencoba menampilkan camera dengan javascript tanpa bantuan pihak ke tiga seperti flash dan vanilla javascript.
Kita akan mengakses kamera dan video streaming menggunakan API getUserMedia lalu memproyeksikan kamera ke dalam elemen video HTML, ketika pengguna ingin mengambil gambar akan mengcopy frame video setelah itu menarik pada elemen kanvas lalu menjadikan sebuah gambar dataURL yang kemudian dapat ditampilkan pada layar atau download sebagai PNG.
JavaScript menyediakan native API untuk mengakses kamera dalam bentuk metode navigator.getUserMedia. dalam API ini hanya dalam koneksi HTTPS aman akan selalu meminta izin pengguna sebelum melanjutkan contoh seperti gambar dibawah ini.
Kita akan memulai start untuk menampilkan camera video straming, contoh script nya seperti dibawah ini
function showVideo(){
hideUI();
video.classList.add("visible");
controls.classList.add("visible");
}
Mengambil Gambar
Setelah kita menampilan video streaming, kita dapat mengambil snapshot dari input kamera. Hal ini dilakukan dengan trik yang memanfaatkan <canvas> elemen untuk mengambil frame dari video streaming dan menyimpannya dalam <img>.
function takeSnapshot(){
var hidden_canvas = document.querySelector('canvas'),
context = hidden_canvas.getContext('2d');
var width = video.videoWidth,
height = video.videoHeight;
if (width && height) {
hidden_canvas.width = width;
hidden_canvas.height = height;
context.drawImage(video, 0, 0, width, height);
return hidden_canvas.toDataURL('image/png');
}
}
Start Kamera
Kita membuat tombol kamera seperti ini
<a href="#" id="mulaikamera" class="visible">Tekan untuk memulai.</a>
lalu fungsi javascript nya seperti ini
mulaikamera.addEventListener("click", function(e){
e.preventDefault();
video.play();
showVideo();
});
Mengambil Foto
Untuk mengambil foto kita akan membuat tombol untuk download seperti contoh dibawah ini
<a href="#" id="ambilfoto" title="ambil Photo"><iclass="material-icons">KAMERA</i></a>
Fungsi javascript nya seperti ini
ambilfoto_btn.addEventListener("click", function(e){
e.preventDefault();
var jepret = takeSnapshot();
image.setAttribute('src', jepret);
image.classList.add("visible");
hapusfoto_btn.classList.remove("disabled");
downloadfoto_btn.classList.remove("disabled");
downloadfoto_btn.href = jepret;
video.pause();
});
});
Lalu kita buat tombol download seperti ini
<a href="#" id="downloadfoto" download="selfie.png" title="Save Photo" class="disabled"><i class="material-icons">DOWNLOAD FOTO</i></a>
Perhatikan script dibawah ini, berfungsi untuk mendownload gambar dalam bentuk png
function takeSnapshot(){
//...
var imageDataURL = hidden_canvas.toDataURL('image/png');
document.querySelector('#dl-btn').href = imageDataURL;
}
Dan untuk kembali melakukan foto kita akan membuat tombol hapus seperti ini
<a href="#" id="hapusfoto" title="Hapus Photo" class="disabled"><i class="material-icons">HAPUS</i></a>
Javascriptnya seperti ini
hapusfoto_btn.addEventListener("click", function(e){
e.preventDefault();
image.setAttribute('src', "");
image.classList.remove("visible");
hapusfoto_btn.classList.add("disabled");
downloadfoto_btn.classList.add("disabled");
video.play();
});
Nah untuk lihat full scriptnya seperti dibawah ini
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Selfie dengan JavaScript</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/bootstrap.css">
</head>
<body>
<div class="container">
<h3><span class='alert alert-danger'>Selfie dengan JavaScript</span></h3>
</div>
<div class="container">
<div class="app">
<a href="#" id="mulaikamera" class="visible">Tekan untuk memulai.</a>
<video id="kamerastream"></video>
<img id="jepret">
<p id="error-message"></p>
<div class="controls">
<a href="#" id="hapusfoto" title="Hapus Photo" class="disabled"><i class="material-icons">HAPUS</i></a>
<a href="#" id="ambilfoto" title="ambil Photo"><i class="material-icons">KAMERA</i></a>
<a href="#" id="downloadfoto" download="selfie.png" title="Save Photo" class="disabled"><i class="material-icons">DOWNLOAD FOTO</i></a>
</div>
<canvas></canvas>
</div>
</div>
<script src="assets/js/script.js"></script>
</body>
</html>Javascript nya seperti dibawah ini
document.addEventListener('DOMContentLoaded', function () {
var video = document.querySelector('#kamerastream'),
image = document.querySelector('#jepret'),
mulaikamera = document.querySelector('#mulaikamera'),
controls = document.querySelector('.controls'),
ambilfoto_btn = document.querySelector('#ambilfoto'),
hapusfoto_btn = document.querySelector('#hapusfoto'),
downloadfoto_btn = document.querySelector('#downloadfoto'),
error_message = document.querySelector('#error-message');
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if(!navigator.getMedia){
displayErrorMessage("Browser Anda tidak suport navigator.getUserMedia.");
}
else{
navigator.getMedia(
{
video: true
},
function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
video.onplay = function() {
showVideo();
};
},
function(err){
displayErrorMessage("Ada kesalahan mengakses kamera: " + err.name, err);
}
);
}
mulaikamera.addEventListener("click", function(e){
e.preventDefault();
video.play();
showVideo();
});
ambilfoto_btn.addEventListener("click", function(e){
e.preventDefault();
var jepret = takeSnapshot();
image.setAttribute('src', jepret);
image.classList.add("visible");
hapusfoto_btn.classList.remove("disabled");
downloadfoto_btn.classList.remove("disabled");
downloadfoto_btn.href = jepret;
video.pause();
});
hapusfoto_btn.addEventListener("click", function(e){
e.preventDefault();
image.setAttribute('src', "");
image.classList.remove("visible");
hapusfoto_btn.classList.add("disabled");
downloadfoto_btn.classList.add("disabled");
video.play();
});
function showVideo(){
hideUI();
video.classList.add("visible");
controls.classList.add("visible");
}
function takeSnapshot(){
var hidden_canvas = document.querySelector('canvas'),
context = hidden_canvas.getContext('2d');
var width = video.videoWidth,
height = video.videoHeight;
if (width && height) {
hidden_canvas.width = width;
hidden_canvas.height = height;
context.drawImage(video, 0, 0, width, height);
return hidden_canvas.toDataURL('image/png');
}
}
function displayErrorMessage(error_msg, error){
error = error || "";
if(error){
console.error(error);
}
error_message.innerText = error_msg;
hideUI();
error_message.classList.add("visible");
}
function hideUI(){
controls.classList.remove("visible");
mulaikamera.classList.remove("visible");
video.classList.remove("visible");
jepret.classList.remove("visible");
error_message.classList.remove("visible");
}
});
Selesai deh, sekian tutorial dari saya maaf klo ada penulisan yang tidak di mengerti maklum penulis masih amatiran hehe
sekian dari saya. Assalamualaikum Wr.Wb
Link Download nya disini DOWNLOAD
Demo nya disini DEMO
Terima Kasih artikel nya bermanfaat sekali…
Sama-sama