I. Tujuan
Tujuan dari praktikum ini adalah:
1. Mahasiswa memahami cara menambahkan kamera pada halaman website
2. Mahasiswa dapat menyajikan kamera dilengkapi snap photo menggunakan HTML5.
II. Alat & Bahan
Alat dan bahan yang digunakan diantaranya:
1. Komputer
2. Notepad ++
III. Dasar Teori
Css
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
Bootstrap
Bootstrap adalah sebuah framework css yang dapat digunakan untuk mempermudah membangun tampilan web. Bootstrap pertama kali di kembangkan pada pertangahan 2010 di Twitter oleh Mark Otto dan Jacob Thornton. Saat ini Bootstrap dikembangkan secara open source dengan lisensi MIT.
IV. Praktikum
Berikut ini langkah kerja yang perlu anda lakukan selama menyelesaikan semua percobaan yang ada pada praktikum ini
1. Tempatkan folder “Praktikum5” beserta isinya pada lokasi yang anda inginkan
2. Pastikan anda menyimpan semua hasil percobaan pada praktikum ini di dalam folder tersebut
3. Buka teks editor pilihan anda
4. Ketikkan semua kode yang ada pada tiap percobaan
5. Setiap kali anda menyelesaikan satu percobaan, simpan dengan nama file sesuai nomor percobaan dengan ekstensi .html
6. Apabila anda menggunakan notepad, pastikan anda merubah pilihan tipe file pada “Save asType” menjadi “All Files”
7. Apabila anda menggunakan notepad++, pada pilihan tipe file, pilih yang bertipe HTML
V. Hasil Praktikum
- Berikut script yang saya gunakan
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> Praktikum 5 Programming Multimedia</title>
</head>
<body>
<video id="video" width="640" height="480" autoplay="" src="blob:https%3A//eraalj.mb.student.pens.ac.id/"></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script type="text/javascript">
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// 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>
VI. Kesimpulan
Praktikum 11 - Menggunakan Google Fonts