Dengan kemajuan teknologi saat ini membuat Anda berada dimana pun sangat sulit untuk menghindari teknologi informasi dan komunikasi. Salah satunya kamera yang memiliki pixel tinggi dalam mengambil gambar. Selfie atau dalam bahasa Indonesia disebut swafoto sering dimanfaatkan saat ini oleh semua orang untuk bernasis ria atau mengabadikan momen penting. Dalam tutorial ini kita akan menunjukkan cara untuk membuat aplikasi photobooth menggunakan JavaScript untuk mengambil gambar menggunakan kamera pada handphone, laptop atau pc Anda. Kami akan menampilkan sejumlah API native yang dapat dipakai dalam membuat project tanpa dependensi eksternal, pustaka dari pihak ketiga atau Flash. Cukup dengan JavaScript

Aplikasi

Untuk end-user aplikasi ini hanya versi disederhanakan dari aplikasi kamera dapat Anda temukan di smartphone apapun. Disini hanya memanfaatkan hardware kamera untuk mengambil gambar itu saja. Di dalam javascript sendiri banyak fungsi yang dapat dimanfaatkan, Berikut ini adalah gambarannya:

  1. Anda dapat mengakses input kamera dan video streaming dari itu menggunakan API getUserMedia.
  2. Memproyeksikan kamera ke sebuah elemen video HTML.
  3. Ketika pengguna ingin mengambil gambar, Anda salin frame video saat ini dan menarik pada elemen kanvas.
  4. Transform kanvas menjadi sebuah gambar dataURL yang kemudian dapat ditampilkan pada layar atau download sebagai PNG.

Mengakses Kamera

JavaScript menyediakan API native untuk mengakses perangkat kamera dalam bentuk method navigator.getUserMedia. Karena menangani data pribadi API ini hanya bekerja dalam koneksi HTTPS dan selalu meminta izin pengguna sebelum melanjutkan.

Jika pengguna memungkinkan untuk mengaktifkan kamera, navigator.getUserMedia kemudian memberikan streaming video. Streaming ini masih berupa data broadcast mentah dari kamera dan perlu ditransformasikan menjadi sumber media yang dapat digunakan sebenarnya dengan metode createObjectURL.

navigator.getUserMedia(
 // Options
 {
 video: true
 },
 // Success Callback
 function(stream){

// Create an object URL for the video stream and
 // set it as src of our HTLM video element.
 video.src = window.URL.createObjectURL(stream);

// Play the video element to show the stream to the user.
 video.play();
 
 },
 // Error Callback
 function(err){

// Most common errors are PermissionDenied and DevicesNotFound.
 console.error(err);

}
);

Mengambil Photo

Setelah video streaming berjalan maka langkah selanjutnya adalah kita dapat mengambil snapshot dari input kamera. Hal ini dapat dilakukan dengan dengan memanfaatkan elemen <canvas> untuk mengambil frame dari video streaming yang sedang berjalan dan menyimpannya dalam elemen <img>.

function takeSnapshot(){

var hidden_canvas = document.querySelector('canvas'),
 video = document.querySelector('video.camera_stream'),
 image = document.querySelector('img.photo'),

// Get the exact size of the video element.
 width = video.videoWidth,
 height = video.videoHeight,

// Context object for working with the canvas.
 context = hidden_canvas.getContext('2d');


 // Set the canvas to the same dimensions as the video.
 hidden_canvas.width = width;
 hidden_canvas.height = height;

// Draw a copy of the current frame from the video on the canvas.
 context.drawImage(video, 0, 0, width, height);

// Get an image dataURL from the canvas.
 var imageDataURL = hidden_canvas.toDataURL('image/png');

// Set the dataURL as source of an image element, showing the captured photo.
 image.setAttribute('src', imageDataURL);

}

Download Photo

Tentu saja, Photo narsis yang tadi diambil tidak ingin hilang, maka perlu fitur untuk menyimpan hasil dari photo narsis yang diambil agar bisa dishare kepada orang lain atau sosial media.. Cara termudah untuk melakukannya adalah dengan atribut download pada elemen <a>. Dalam HTML tombol terlihat seperti ini:

<a id="dl-btn" href="#" download="selfie_narsis.png">Simpan Photo</a>

Pada atribut download, Anda mengubah dari hyperlink ke tombol download. Value dari nama file dibuat menjadi default. Berikut ini kode tambahan untuk tombol download pada fungsi takeSnapshot yang sebelumnya sudah dibuat :

function takeSnapshot(){

//...

// Get an image dataURL from the canvas.
 var imageDataURL = hidden_canvas.toDataURL('image/png');

// Set the href attribute of the download button.
 document.querySelector('#dl-btn').href = imageDataURL;
}

Sekarang ketika seseorang mengklik tombol download maka nanti mereka akan mendowload sebuah file dengan nama selfie_narsis.png. Sekian tutorial singkat ini dari saya semoga bermanfaat. (Yusron)

Iklan