Pada kali ini panduancode akan membuat tutorial Cara Membuat Program Webcam Dengan Javascript Dan HTML Terbaru, program ini nantinya bisa ...
Cara Membuat Program Webcam Dengan Javascript Dan HTML Terbaru
Rabu, Oktober 02, 2019
Daftar Isi [Tampil]
Pada kali ini panduancode akan membuat tutorial Cara Membuat Program Webcam Dengan Javascript Dan HTML Terbaru, program ini nantinya bisa Anda kembangkan lagi untuk membuat sebuah website yang membutuhkan akses untuk mengambil gambar atau video.
Contoh website yang menggunakan program webcam dengan javascript dan html salah satunya adalah facebook, karena facebook dapat mengakses webcam untuk video call, dan mengambil gambar (foto selfie).
Program webcam dengan javascript dan html terbaru ini dapat kita buat dengan memanfaatkan API yang sudah ada dari HTML5.
Penasaran bagaimana cara kerja program webcam dengan javascript dan html?
Jika ya, mari kita bahas terlebih dahulu cara kerja program webcam dengan javascript dan html dibawah ini.
Cara Kerja Program Webcam Dengan Javascript Dan Html
Pada pertama kali program webcam dengan javascript dan html ini di run (dijalankan), program akan meminta izin terlebih dahulu kepada user.
Apakah user mengizinkan program webcam dengan javascript dan html ini berjalan atau tidak.
Cara untuk membuat notifikasi seperti itu sangat mudah, kita akan menggunakan method getUserMedia.
Method getUserMedia ini tidak hanya berfungsi untuk mengakses webcam saja melainkan Anda bisa menggunakan method ini untuk mengakses media lain seperti mikrofon.
Nah setelah user memberikan izin kepada program untuk dapat dijalankan, maka selanjutnya kita render gambar dari webcam ke elemen <video>.
Perlu Anda ketahui juga bahwa elemen <video> adalah elemen baru yang ada pada html5 yang berfungsi untuk menampilkan video.
Sekarang setelah Anda mengetahui cara kerja dari program webcam dengan javascript dan html ini, mari kita buat programnya dibawah ini.
Cara Membuat Program Webcam Dengan Javascript Dan Html
1. Coding Html5 Untuk Menampilkan Video
Berikut ini adalah coding html5 untuk menampilkan video.
<div>
<video autoplay="true" id="video-webcam">
Izinkan program webcam dengan javascript dan html ini untuk melihat demo.
</video>
</div>
<video autoplay="true" id="video-webcam">
Izinkan program webcam dengan javascript dan html ini untuk melihat demo.
</video>
</div>
Coding diatas adalah coding html5, kenapa html5 karena terdapat method <video>...</video> yang merupakan bagian dalam html5.
keterangan method yang digunakan pada coding html5 diatas:
1. autoplay="true" berfungsi untuk memutar video otomatis.
2. id="video-webcam" adalah variable yang telah ditentukan untuk mempermudah pemilihan elemen di javascript.
Namun Anda juga dapat merubah isi id nya sesuai dengan keinginan Anda, dengan catatan isi id nya harus sama dengan elemen di javascript dibawah ini.
2. Coding Javascript Untuk Mengambil Video
<script type="text/javascript">
// elemen untuk menyeleksi video, dan variable #video-webcam harus sama seperti pada atribut id="video-webcam"
var video = document.querySelector("#video-webcam");
// Berfungsi untuk meminta izin terlebih dahulu kepada user
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
// jika user memberikan izin pada program webcam panduancode
if (navigator.getUserMedia) {
// run fungsi handleVideo, dan videoError jika user tidak memberikan izin
navigator.getUserMedia({ video: true }, handleVideo, videoError);
}
// fungsi ini hanya akan di run jika user telah memberi izin kepada program webcam
function handleVideo(stream) {
video.srcObject = stream;
}
// jika user tidak memberikan izin maka fungsi ini akan di run
function videoError(e) {
// do something
alert("Izinkan program webcam dengan javascript dan html ini untuk melihat demo.!")
}
</script>
// elemen untuk menyeleksi video, dan variable #video-webcam harus sama seperti pada atribut id="video-webcam"
var video = document.querySelector("#video-webcam");
// Berfungsi untuk meminta izin terlebih dahulu kepada user
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
// jika user memberikan izin pada program webcam panduancode
if (navigator.getUserMedia) {
// run fungsi handleVideo, dan videoError jika user tidak memberikan izin
navigator.getUserMedia({ video: true }, handleVideo, videoError);
}
// fungsi ini hanya akan di run jika user telah memberi izin kepada program webcam
function handleVideo(stream) {
video.srcObject = stream;
}
// jika user tidak memberikan izin maka fungsi ini akan di run
function videoError(e) {
// do something
alert("Izinkan program webcam dengan javascript dan html ini untuk melihat demo.!")
}
</script>
Untuk penjelasan atau keterangan coding javascript pada program webcam ini silahkan lihat, baca pada baris komentar pada coding javascript diatas.
3. Coding Html5 Untuk Mengambil Gambar
Berikut ini adalah coding html5 untuk mengambil gambar pada program webcam dengan javascript dan html ini.
<button onclick="takeSnapshot()">Ambil Gambar</button>
Kemudian berikut ini adalah fungsi javascript untuk mengambil gambar pada program webcam dengan javascript dan html.
4. Coding Javascript Untuk Mengambil Gambar
function takeSnapshot() {
// Ini berfungsi untuk membuat gambar
var img = document.createElement('img');
var context;
// ini berfungsi untuk mengambil ukuran video
var width = video.offsetWidth
, height = video.offsetHeight;
// Ini berfungsi untuk membuat elemen canvas
canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
// mengambil gambar dari video dan memasukannya kedalam canvas
context = canvas.getContext('2d');
context.drawImage(video, 0, 0, width, height);
// gambar yang dimasukan kedalam canvas di render ke dalam format gambar png
img.src = canvas.toDataURL('image/png');
document.body.appendChild(img);
}
// Ini berfungsi untuk membuat gambar
var img = document.createElement('img');
var context;
// ini berfungsi untuk mengambil ukuran video
var width = video.offsetWidth
, height = video.offsetHeight;
// Ini berfungsi untuk membuat elemen canvas
canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
// mengambil gambar dari video dan memasukannya kedalam canvas
context = canvas.getContext('2d');
context.drawImage(video, 0, 0, width, height);
// gambar yang dimasukan kedalam canvas di render ke dalam format gambar png
img.src = canvas.toDataURL('image/png');
document.body.appendChild(img);
}
Penjelasan mengenai coding diatas sudah dijelaskan pada baris komentar.
Sekarang waktunya untuk menggabungkan beberapa bagian coding diatas menjadi satu file html5 yang utuh.
Program Webcam Dengan Javascript Dan Html Sederhana
Berikut inilah hasilnya jika sudah digabungkan menjadi satu.
<html>
<head>
<title>Program Webcam Panduancode</title>
</head>
<body>
<div class="">
<video autoplay="true" id="video-webcam">
Izinkan program webcam dengan javascript dan html ini untuk melihat demo!
</video>
<button onclick="takeSnapshot()">Ambil Gambar</button>
</div>
<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.src = window.URL.createObjectURL(stream);
console.log(stream);
}
function videoError(e) {
// do something
alert("Izinkan program webcam dengan javascript dan html ini untuk melihat demo!")
}
function takeSnapshot() {
var img = document.createElement('img');
var context;
var width = video.offsetWidth
, height = video.offsetHeight;
canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
context = canvas.getContext('2d');
context.drawImage(video, 0, 0, width, height);
img.src = canvas.toDataURL('image/png');
document.body.appendChild(img);
}
</script>
</body>
</html>
<head>
<title>Program Webcam Panduancode</title>
</head>
<body>
<div class="">
<video autoplay="true" id="video-webcam">
Izinkan program webcam dengan javascript dan html ini untuk melihat demo!
</video>
<button onclick="takeSnapshot()">Ambil Gambar</button>
</div>
<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.src = window.URL.createObjectURL(stream);
console.log(stream);
}
function videoError(e) {
// do something
alert("Izinkan program webcam dengan javascript dan html ini untuk melihat demo!")
}
function takeSnapshot() {
var img = document.createElement('img');
var context;
var width = video.offsetWidth
, height = video.offsetHeight;
canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
context = canvas.getContext('2d');
context.drawImage(video, 0, 0, width, height);
img.src = canvas.toDataURL('image/png');
document.body.appendChild(img);
}
</script>
</body>
</html>
Copy coding program webcam dengan javascript dan html diatas dan save dengan nama program-webcam-panduancode.html.
Kemudian simpan file program webcam tersebut di direktori htdocs, nah karena disimpan pada direktori htdocs, maka Anda harus mengaktifkan xampp terlebih dahulu.
Kenapa harus disimpan pada direktori htdocs? padahal file html dan javascript bisa dijalankan tanpa mengaktifkan xampp.
Alasannya Karena jika tidak disimpan pada direktori htdocs, maka videonya tidak akan muncul, atau tidak akan mau dirender.
Bagaimana sangat mudah bukan tutorial Cara Membuat Program Webcam Dengan Javascript Dan HTML Terbaru dari panduancode?
Sampai disini dulu pembelajaran kita pada kesempatan kali ini, semoga tutorial ini dapat bermanfaat bagi Anda.
Akhir kata dari panduancode jangan lupa titik koma.
Bantu Apresiasi Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.