Membuat webcam manggunakan javascript

 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> :

Tambahkan di bagian 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

Buat button seperti ini
<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 :)

2 تعليقات

إرسال تعليق

Post a Comment

أحدث أقدم

Custom JavaScript Footer