Membuat Webcam menggunkan javascript/js
Hallo semua selamat datang di blog MariNgeoding di admin akan memberikan tutorial membuat webcam camera di website anda. tutorial ini cukup mudah dengan di simak baik baik.
Apa itu webcam:
HTML webcam adalah suatu program kamera di dalam web yang bisa menghasilkan video atau gambar
Jika tidak tampil, pastikan kamu mengizinkan halaman ini mengakses Webcam.
buat la sebuah file html di folder anda
contoh :
buatlah struktur html seperti ini:
Tambahkan script ini di bagian tag <body> dan </body> :
<div>
<video autoplay="true" id="video-webcam">
Browsermu tidak mendukung, kentang ya
</video>
</div>tambahakan tag javascript:
var video = document.querySelector("#video-webcam"); navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia; if (navigator.getUserMedia) { navigator.getUserMedia({ video: true }, handleVideo, videoError); } function handleVideo(stream) { video.srcObject = stream; } function videoError(e) { alert("Izinkan menggunakan kamera anda ") }
buat lah button jika ingin mengambil gambar
<button onclick="ambilFoto()">Ambil Gambar</button>buat la function ambilFoto()
function ambilFoto() { // buat elemen img/jpg var img = document.createElement('img'); var context; // buat ukuranvideo 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); }dan jika semua code di gabungkan maka hasilnya akan seperti ini :
<!DOCTYPE html>
<html>
<head>
<title>webcam</title>
</head>
<body>
<div>
<video autoplay="true" id="video-webcam">
Browsermu tidak mendukung, kentang ya
</video>
</div>
<button onclick="ambilFoto()">Ambil Gambar</button>
<script>
var video = document.querySelector("#video-webcam");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia; if (navigator.getUserMedia) {
navigator.getUserMedia({
video: true
}, handleVideo, videoError);
} function handleVideo(stream) {
video.srcObject = stream;
} function videoError(e) {
alert("Izinkan menggunakan kamera anda ")
}
function ambilFoto() {
// buat elemen img/jpg
var img = document.createElement('img'); var context;
// buat ukuranvideo
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);
}
</script>
</body>
</html>
Selamat mencoba :)
terima kasih bang tutorial nya
ReplyDeletesama sama kak
DeletePost a Comment