Pernah enggak sih di website kalian membutukan kamera agar dapat menampilkan wajah user, seperti contohnya mungkin zoom atau google meet, dan kalian mungkin mencari - cari library2 js untuk membuatnya.
Nah namun, sekarang HTML5 sudah menyediakan API yang bisa kita gunakan untuk mengakses Webcam secara native.
Simak aja tutorial singkat berikut:
1. pertama buat dulu struktur html nya kaya dibawah.
<html>
<head>
<title>HTML Webcam</title>
</head>
<body>
</body>
</html>
2. nah kemudian tambahkan tag video didalem tag body html nya jangan lupa di set
property autoplay true dan tambahkan id disini menggunakan id video-webcam.
<video autoplay="true" id="video-webcam">
browser anda tidak mendukung!
</video>
3. diakhir tag body tambahin tag script biar kita bisa nulisin javascript buat logic dari webcam nya.
<script>
</script>
4. di dalem tag script ambil element dari video menggunakan dom (document object model), disini aku pakek document.querySelector() dan kemudian masukkan selector id dari element video, kemudian di navigator.getUserMedia itu kita gunakan untuk meminta akses camera kepada user, nah itu kenapa banyak menggunakan || (or) karna setiap browser memiliki metode yang berbeda - beda.
const video = document.querySelector("#video-webcam");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
5. kemudian kita cek lagi nih apakah izin kameranya menggunakan if statement, jika kemudian kita jalanin function dari navigator.getUserMedia dengan argument pertama berisi object dengan nilai video sama dengan true, kemudian argument kedua menjalan kan function jika prosesnya berhasil, dan argument ketiga menjalankan function jika prosesnya gagal/error. disini aku namain functionya dengan nama display dan notDisplay
if (navigator.getUserMedia) {
navigator.getUserMedia({ video: true }, display, notDisplay);
}
6. nah kemudian kita buat function tadi yang kita panggil di navigator.getUserMedia, pertama function display di function display akan menerima parameter berupa stream yang nanti akan di tampikan di element video, menggunakan video.srcObject kita isi dengan stream, kemudian function kedua notDisplay langsung aja kita berikan alert kepada user agar memberikan izin kamera di website kita di alert ini aku memberikan pesan "izinkan akses mengunakan webcam".
function display(stream) {
video.srcObject = stream;
}
function notDisplay() {
alert("izinkan akses mengunakan webcam");
}
5. ok selesai temen2, gimana mudah kan menampilkan webcam di website kita, buat full code nya bisa kalian lihat Disini
Sekarang teman2 bisa coba jalankan scriptnya, dan teman2 sudah bisa menampilkan Webcam di website kalian.
Jika teman2 suka dengan tutorial ini jangan lupa untuk subscribe blog kami, dan kalau ada pertanyaan atau request, tinggalkan komentar.
Terima Kasih.