Yuk, kita selfie dengan javascript




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.

akses camera

 

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




 

 

 

 

 

 

 

 

 

 

 

 

 

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *