Skip to content

Instantly share code, notes, and snippets.

@ardianta
Last active April 8, 2023 09:38
Show Gist options
  • Save ardianta/da3bd8665ad2110eb9c4cc07af9dfe70 to your computer and use it in GitHub Desktop.
Save ardianta/da3bd8665ad2110eb9c4cc07af9dfe70 to your computer and use it in GitHub Desktop.
kode untuk menampilkan webcam dalam HTML
<div class="">
<video autoplay="true" id="video-webcam">
Izinkan untuk Mengakses Webcam untuk Demo
</video>
<button onclick="takeSnapshot()">Ambil Gambar</button>
</div>
<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.src = window.URL.createObjectURL(stream);
console.log(stream);
}
function videoError(e) {
// do something
alert("Izinkan menggunakan webcam untuk demo!")
}
function takeSnapshot() {
var img = document.createElement('img');
var context;
var width = video.offsetWidth
, height = video.offsetHeight;
canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
context = canvas.getContext('2d');
context.drawImage(video, 0, 0, width, height);
img.src = canvas.toDataURL('image/png');
document.body.appendChild(img);
}
</script>
@dr-06
Copy link

dr-06 commented Nov 12, 2021

kalau sekalian nyimpen file nya di folder gimana ya?

up

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment