February 23, 2019

Make your own Camera Web App to take Pictures.

Be ready programmers to make your own web application for taking pictures using the webcam on your laptop or USB webcam. Well there are many good software but what better than writing your own codes.

 

Before writing the codes I will assume that you have the working knowledge of HTML 5 and java-scripts. If not probably you can start learning today. Learn how to learn programming faster.

As we are using HTML 5, only browser which can support HTML 5 will run this app. So, just follow these steps.

  1. Open up the text editor like Notepad ++ or simply Notepad.
  2. Paste the following codes inside it and save it as “camera.html”.

[code]
<html>
<head>
<title>My Photo Booth</title>
<head>
<body>
<center>
<video id="webcam" width="200" height="200"></video>
<br>
<input type="button" id="snapPicture" value="Snap A Picture!" />
<p>
<canvas id="capture" style="display:none;"></canvas>
<img id="canvasImg" alt="right click to save">
<script src = "script_photo.js"></script>
</center>
</body>
</html>
[/code]

3. Again open up Text editor and paste the following codes and save it as “script_photo.js”.

[code]
var photoButton = document.getElementById(‘snapPicture’);
photoButton.addEventListener(‘click’, picCapture, false);

navigator.getUserMedia ||
(navigator.getUserMedia = navigator.mozGetUserMedia ||
navigator.webkitGetUserMedia || navigator.msGetUserMedia);

if (navigator.getUserMedia) {
navigator.getUserMedia({video:true,audio:false}, onSuccess, onError);
} else{
alert(‘Your browser isn’t supported’);
}

function onSuccess(stream) {
vidContainer = document.getElementById(‘webcam’);
var vidStream;
if (window.webkitURL){
vidStream = window.webkitURL.createObjectURL(stream);
}else{
vidStream = stream;
}
vidContainer.autoplay = true;
vidContainer.src = vidStream;

}

function onError(){
alert(‘Houston, we have a problem’);
}

function picCapture(){
var picture = document.getElementById(‘capture’),
context = picture.getContext(‘2d’);

picture.width = "600";
picture.height = "400";
context.drawImage(vidContainer, 0, 0, picture.width, picture.height);

var dataURL = picture.toDataURL();
document.getElementById(‘canvasImg’).src = dataURL;
}[/code]

4. Save both the files on the same folder.
Now just open up the file “camera.html” that you wrote previously and there you have it. An web application
that takes the pic with the webcam. Need more help.

See this YouTube video from Gigafied.

About Bhattarai Diwas (thenepaltech) 213 Articles
I'm an Engineer and have Bachelor's Degree in Electrical and information technology. Right now I am working as a software developer in Germany. All in all I love programming and I am a tech geek.