Contents
Pada umumnya webcam digunakan untuk berkomunikasi chat secara visual dengan lawan bicara, misalnya untuk conference via aplikasi zoom, google meeting atau sekedar aplikasi chat peer to peer seperti skype, whatsapp dan lain lain. Biasanya aplikasi-aplikasi tersebut merupakan aplikasi desktop berbasis Windows (exe), Linux atau mobile (Android, IoS). Namun webcam juga dapat diakses pula dari aplikasi berbasis server sehingga dapat dijalankan hanya dengan web browser tanpa perlu menginstal aplikasi. Bahkan jika aplikasi dihosting di internet (webhosting) maka Anda dapat mengaksesnya dimana saja (dengan catatan perlu local permission saat mengakses perangkat lokal). Bagaimana cara mengakses kamera webcam dari aplikasi web based? Simak tutorial berikut ini
Akses Webcam dari Script Web Based
Untuk mengakses webcam dari aplikasi berbasis server kita dapat menggunakan web API dari Mozilla.org, yaitu ‘MediaDevices’. Web api ini merupakan abstraksi layer yang berhubungan dengan hardware/media input stream seperti kamera (webcam), mikrofon, dll. Dengan memanggil API ini, kita dapat langsung mengakses hardware tadi tanpa banyak menuliskan kode-kode low levelnya. Salah satu method yang penting dalam API ‘MediaDevices’ adalah ‘getUserMedia()’. Method ini akan me-list semua media input device yang terhubung dengan komputer/laptop. Contoh script-nya adalah sbb:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Cam</title>
</head>
<body>
</body>
</html>
<script>
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
devices.forEach(function(device) {
str=device.label;
var res = str.toLowerCase();
console.log (str);
console.log(device.kind + ": " + device.label + " id = " + device.deviceId);
});
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
});
</script>
Untuk menjalankan script di atas Anda web server di laptop Anda. Untuk mudahnya bisa menginstal XAMPP. Jika sudah terinstal, simpan file di atas dengan nama (misalnya) “simplecam.html” di folder ‘htdocs’ (biasanya di path C:/xammp/htdocs). Jika sudah di-save, buka web browser kemudian ketikkan nama file di address bar ‘localhost/simplecam.html’ kemudian tekan enter untuk mulai menjalankan script.
Catatan:
1. Di laptop saya, file saya simpan di path c:/xampp/htdocs/andika/simplecam.html, maka di address bar web browser saya tulis ‘http://localhost/andika/simplecam.html’.
2. Direkomendasikan untuk menggunakan web browser Chrome untuk kemudahan debugging program
Setelah berhasil menjalankan script (belum ada tampilan apapun di web browser), klik kanan di halaman browser, kemudian pilih menu ‘Inspect’ di pop up window yang muncul
Perhatikan dalam gambar di atas, list device yang terhubung dengan laptop sudah tertampil di jendela ‘Console’. Pada tahap ini Anda sudah berhasil me-list semua media input device termasuk webcam. Kini saatnya kita coba menampilkan hasil streaming data webcam ke web browser
Menampilkan web cam di web browser
Untuk menampilkan capture web cam di browser Anda memerlukan sebuah ‘container’ untuk memuat data streaming webcam. Di HTML5 kita dapat menggunakan tag ‘video’ sebagai container. Kemudia tambahkan klausa ‘if’ untuk device webcam yang ingin kita tampilkan (barangkali ada banyak webcam terhubung di laptop, Anda bisa memilih salah satu untuk ditampilkan), baru kemudian kita ‘get’ data stream webcam menggunakan method ‘getUserMedia’ dan ditampilkan di container. Kode program Javascript selengkapnya adalah sbb:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Cam</title>
</head>
<body>
<div id="container">
<video autoplay="true" id="simplevideo">
</video>
</div>
</body>
</html>
<script>
var cam1;
var str;
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
devices.forEach(function(device) {
str=device.label;
var res = str.toLowerCase();
console.log (str);
if (str=='HD Web Camera'){
cam1=device.deviceId;
console.log (cam1);
}
console.log(device.kind + ": " + device.label + " id = " + device.deviceId);
});
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
});
setTimeout(usbwebcam, 1000);
function usbwebcam(){
var video = document.querySelector("#simplevideo");
if (navigator.mediaDevices.getUserMedia) {
console.log (cam1);
navigator.mediaDevices.getUserMedia({ video: { deviceId: cam1 } })
//navigator.mediaDevices.getUserMedia({ video: { deviceId: 'ab5e4c1946679f600820a48fa3a2c036d65cb3947d4254ea1c1cd87f500e7749' } })
.then(function (stream) {
video.srcObject = stream;
})
.catch(function (err0r) {
console.log("ada error");
});
}
}
</script>
Save (atau Save as) file di atas, kemudian jalankan sekali lagi dengan me-refresh web browser. Kini webcam seharusnya sudah tertampil di web browser Anda
Perhatikan pada baris [30], string ‘HD Web Camera’ adalah label webcam yang saya pilih di jendela console pada gambar di atas. Di laptop Anda bisa jadi lain sesuai dengan merk webcam yang Anda pakai.
Sampai langkah ini Anda sudah berhasil mengakses webcam dan menampilkannya di web browser. Jika Anda ingin lebih advanced lagi, Anda dapat menambahkan beberapa script CSS supaya tampilan webcam bisa responsive (menyesuaikan dimensi layar). Berikut scriptnya
<style>
#simplevideo {
width: 100%;
height: 100%;
background-color: #666;
}
</style>
Hasilnya adalah sbb:
Perhatikan bahwa tampilan webcam masih mirror (saya mengangkat jempol kiri tapi terlihat seperti jempol kanan). Untuk mem-flip tampilan webcam, Anda dapat menambah kode CSS ‘scaleX(-1)’ sebagai berikut:
<style>
#simplevideo {
width: 100%;
height: 100%;
background-color: #666;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
</style>
Hasilnya adalah sebagai berikut:
Nah, sekarang sudah perfect 😊👍, jempol kanan sudah tertampil di sebelah kanan 😁✌️. Ohya, untuk program selengkapnya dapat Anda unduh melalui link github berikut access webcam javascript
Demikian sedikit tutorial mengenai cara akses webcam dengan javascript, html5 dan css. Anda dapat mengembangkan script di atas sesuai kebutuhan Anda, Semoga bermanfaat
a Technopreneur – writer – Enthusiastic about learning AI, IoT, Robotics, Raspberry Pi, Arduino, ESP8266, Delphi, Python, Javascript, PHP, etc. Founder of startup Indomaker.com