Prak 05 - Capture Image On Web

April 07, 2016

Prak 05 - Capture Image On Web

Prak 05 - Camera dan Video Control with HTML5

1. Tujuan
Mengenal contoh kode untuk mengakses webcam dan melakukan snapshot.

2.Alat

Komputer
Notepad ++
HTTPS server

3. Dasar Teori

GetUserMedia

GetUserMedia merupakan sebuah sintaks baru yang ada dalam HTML5 yang berguna untuk mengambil multimedia berupa kamera dan mikrofon dari alat komunikasi yang ada seperti notebook dan smartphone. Dengan sintaks ini penulis dapat mengambil data gambar dari kamera dan memasukannya kedalam HTML5 sehingga dapat diproses langsung oleh berbagai web browser

HTTPS

Hypertext Transfer Protokol Secure (HTTPS) adalah versi aman dari HTTP, protokol komunikasi dari World Wide Web. Ditemukan oleh Netscape Communications Corporation untuk menyediakan autentikasi dan komunikasi tersandi dan penggunaan dalam komersi elektris.

4.Tugas praktikum

Buatlah file index.html yang berisi kode untuk mengakses kamera dan tombol snapshot. Upload file tersebut ke hosting yang support HTTPS.

5. Hasil Praktikum

Text Code

<html>
 <head>
  <title> Praktikum 5 Programming Multimedia</title>
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

// Put video listeners into place
 if(navigator.getUserMedia) { // Standard
  navigator.getUserMedia(videoObj, function(stream) {
   video.src = stream;
   video.play();
  }, errBack);
 } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
  navigator.webkitGetUserMedia(videoObj, function(stream){
   video.src = window.webkitURL.createObjectURL(stream);
   video.play();
  }, errBack);
 }
 else if(navigator.mozGetUserMedia) { // Firefox-prefixed
  navigator.mozGetUserMedia(videoObj, function(stream){
   video.src = window.URL.createObjectURL(stream);
   video.play();
  }, errBack);
 }
 document.getElementById("snap").addEventListener("click", function() {
 context.drawImage(video, 0, 0, 640, 480);
});
}, false);
</script>
</body>
</html>

Url
bisa lihat disini

6. Referensi
https://davidwalsh.name/browser-camera

Search This Blog

Noer Rhiannah A

Prak 05 - Capture Image On Web

Comments

Post a Comment

Popular Posts

Character Animation VS Motion Graphic

Praktikum 9 – Blender Bouncing Ball Exercise