JavaScript merupakan bahasa pemrograman yang sangat powerfull, dimana dapat digunakan untuk mengakses kamera (hardware) dari perangkat yang kita gunakan melalui browser. Pada artikel ini, saya akan memberikan kode program yang dapat akses kamera secara langsung di browser seperti Google Chrome.
Kita dapat akses kamera menggunakan API seperti navigator.mediaDevices.getUserMedia() untuk mendapatkan akses ke perangkat kamera, namun perlu verifikasi terlebih dahulu. Setelah itu, kita dapat mengambil gambar dari foto atau video stream menggunakan elemen <video> dan menggambarnya ke elemen <canvas>, atau mengirimnya ke server untuk kepentingan tertentu.
Berikut contoh sederhana menggunakan navigator.mediaDevices.getUserMedia() untuk mengakses kamera:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Camera Capture</title>
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="capture">Capture</button>
<canvas id="canvas" width="640" height="480"></canvas>
<a id="download" download="captured_image.png"><button>Download</button></a>
<script>
document.addEventListener('DOMContentLoaded', () => {
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const captureButton = document.getElementById('capture');
const downloadButton = document.getElementById('download');
navigator.mediaDevices.getUserMedia({ video: true })
.then((stream) => {
video.srcObject = stream;
})
.catch((error) => {
console.error('Error accessing camera: ', error);
});
captureButton.addEventListener('click', () => {
const context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
// Sekarang, Anda dapat mengambil data gambar dari elemen canvas
const imageData = canvas.toDataURL('image/png');
console.log('Captured image data:', imageData);
// Set data gambar sebagai sumber tautan download
downloadButton.href = imageData;
});
});
</script>
</body>
</html>Hasilnya:
Harap dicatat bahwa kita harus memberikan izin akses kamera untuk menguji contoh ini. Hal ini juga bergantung pada dukungan peramban terhadap API navigator.mediaDevices.getUserMedia(). Beberapa browser mungkin mengharuskan situs diakses melalui protokol HTTPS agar API ini berfungsi.
Untuk mengecek apakah browser yang anda gunakan mendukung perintah ini, anda dapat melihat melalui website caniuse.
