Mengakses Webcam di Website dengan Javascript

Share:

Hello World's! Penggunaan webcam pada situs itu sebenarnya kurang perlu. Tapi pada beberapa keperluan fungsionalitas website, webcam bisa diperlukan. Misalnya, dipakai untuk membuat foto profil dengan wajah asli pengguna. Atau mungkin mau bikin fungsi yang expert, seperti video call. Webcam juga diperlukan. Kalau nggak pakai camera terus buat apa video call?

Bingung. Searching. Ga nemu. Puyeng.

Mau nyari gimana menyalakan webcam di website tapi ga nemu. Cari cara membuka webcam di website nemunya malah tutorial buka aplikasi YouCam. Ga usah puyeng lagi, disini kita akan belajar bareng, gimana sih caranya biar gambar yang direkam webcam itu bisa ditampilin di website?

Pertama, buatlah file HTML, index.html dan ketikkan script di bawah ini.

<!DOCTYPE html>
<html>
<head>
     <title>Webcam by BNI</title>
     <link href="http://belajarnge.web.id/alat/webcam.css">
</head>
<body>

<video id="video"></video>

</body>
</html>

Kemudian, tambahkan Javascript di bawah ini pada atasnya tag tutup </body>.

<script>

var video = document.getElementById('video');

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||  navigator.oGetUserMedia || navigator.msGetUserMedia;

if( navigator.getUserMedia ) {
     navigator.getUserMedia({video: true}, streamWebCam, throwError);
}

function streamWebCam(stream) {
     video.src = window.URL.createObjectURL(stream);
     video.play();
}

function throwError(e) {
     alert(e.name);
}

</script>

Script di atas dipakai untuk mengakses dan menjalankan fungsi dari sebuah webcam. Sekarang, laman web kita sudah bisa menampilkan apa yang ditangkap oleh webcam pada komputer kita. Dan berikut ini adalah contoh preview dari script di atas.


Oh iya, ada tambahan. Jika kalian ingin menjalankan script ini, maka server harus dilapisi dengan sertifikat keamanan SSL. Apabila tidak, maka device tidak akan mengakses webcam karena menganggap situs webnya berbahaya. Jadi script ini tidak akan jalan di server tanpa SSL. Salam Koding!

6 komentar:

  1. Love to read it,Waiting For More new Update and I Already Read your Recent Post its Great Thanks. webcam chat

    BalasHapus
    Balasan
    1. thank you... but sorry i can't share like adult content :)

      Hapus
  2. Thanks for sharing the post.. parents are worlds best person in each lives of individual..they need or must succeed to sustain needs of the family. couple cam

    BalasHapus
  3. Thanks for a very interesting blog. What else may I get that kind of info written in such a perfect approach? I’ve a undertaking that I am simply now operating on, and I have been at the look out for such info. virtual reality cam shows

    BalasHapus
  4. This is my first time i visit here. I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here keep up the good work adult chat

    BalasHapus