Cara Mengakses Webcam Dari HTML Dan Mengambil Gambar

Pada file HTML di atas, kita memberikan atribut autoplay=”true”agar videonya diputar secara otomatis dan id=”video-webcam” untuk memudahkan pemilihan elemen di Javascript.

Setelah itu, silahkan buat kode Javascript-nya:

<<>script type=”text/javascript”>
// seleksi elemen video
var video = document.querySelector(“#video-webcam”); // minta izin user
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia; // jika user memberikan izin
if (navigator.getUserMedia) { // jalankan fungsi handleVideo, dan videoError jika izin ditolak navigator.getUserMedia({ video: true }, handleVideo, videoError);
} // fungsi ini akan dieksekusi jika izin telah diberikan
function handleVideo(stream) { video.srcObject = stream;
} // fungsi ini akan dieksekusi kalau user menolak izin
function videoError(e) { // do something alert(“Izinkan menggunakan webcam untuk demo!”)
}
<<>/script>

(Kode lengkapnya silahkan cek diGist)

Silahkan simpan di dalam direktori htdocs atau /var/, lalu buka melalui alamat /namafile.html.

Kenapa harus disimpan di sana?

Karena jika tidak disimpan di server web, videonya tidak akan mau di-render.

Mengambil Gambar dari Webcam
Kita baru saja membuat kode HTML dan Javascript untuk menampilkan video dari webcam.

Lalu…

Bagaimana kalau kita ingin mengambil gambar?

Gampang.

Kita tinggal buat sebuah tombol dan saat tombol tersebut diklik, kita eksekusi fungsi untuk mengambil gambar.

Berikut ini kode fungsi untuk mengambil gambar:

function takeSnapshot() {
// buat elemen img
var img = document.createElement(‘img’);
var context; // ambil ukuran video
var width = video.offsetWidth , height = video.offsetHeight; // buat elemen canvas
canvas = document.createElement(‘canvas’);
canvas.width = width;
canvas.height = height; // ambil gambar dari video dan masukan // ke dalam canvas
context = canvas.getContext(‘2d’);
context.drawImage(video, 0, 0, width, height); // render hasil dari canvas ke elemen img
img.src = canvas.toDataURL(‘image/png’);
document.body.appendChild(img);
}

Fungsi di atas akan membuat sebuah elemen untuk menampung gambar Snapshot dari elemen Video.

Kita memanfaatkanCanvas untuk mengambil gambarnya.

Setelah itu tinggal ditampilkan ke dalam elemen .

Selanjutnya silahkan buat sebuah tombol untuk mengeksekusi fungsi tersebut.

Ambil Gambarbutton>

Selesai, silahkan dicoba.

Untuk menyimpan gambarnya, tinggal klik kanan kemudian pilih save image as…

Gampang kan?

Akhir Kata…
Begitulah cara mengakses Webcam dari HTML atau halaman web.

Selanjutnya kamu bisa melakukan eksperimen yang lebih menarik, seperti:

* Menerapkan Algoritma Computer Vision atau Pengolahan Citra.
* Membuat Aplikasi Video Call.
* Membuat Sistem Login dengan Mendeteksi Wajah.
* Menebak Umur berdasarkan Wajah.
* _______ (dll. tambahkan sendiri)

Referensi: