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!

5 comments:

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

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

      Delete
  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

    ReplyDelete
  3. Hi, I find reading this article a joy. It is extremely helpful and interesting and very much looking forward to reading more of your work.. vrcams

    ReplyDelete