HTML5 Photo Booth

https://www.youtube.com/watch?v=2sXkl3rR-yc

HTML5 is ramping up to become a more and more robust markup language. So flex your code monkey muscles and lets make an HTML5 photo booth application.

View Demo
Download Code

What you should already know

Before starting this tutorial, it is assumed that you already know the basics of web development. This includes, HTML, CSS, Javascript, and HTML5. Without a basic understanding of these languages, it will be very difficult to understand the logic used to make this program work. So, as a prerequisite, it is recommended that you view these tutorials on the basics of web development before continuing.

  1. HTML Basics
  2. CSS Basics
  3. Javascript Basics
  4. HTML5 Basics

Needed Tools

Programming with web languages requires very little extra software. You only need three things:

  1. A text editor (I recommend Notepad ++)
  2. A compiler (Any web browser that supports HTML5 will do)
  3. A web server (A good free web server service is 000webhost)

Demo and Download

The code

photobooth.html

This is the full code that should be saved as photobooth.html and uploaded to your web server.

<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>

 

script_photo.js

This is the code for script_photo.js. This should be uploaded to your web server in the same direcotry as photobooth.html

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;
}



 

3 thoughts on “HTML5 Photo Booth

  1. Robert Sommerville says:

    You are really inspiring and fun. People like you are very refreshing to me. I am retired and you brought back the urge to discover and have FUN again with the computer. I remember my old Osborn , 4Dos multitasking
    had alot of great times back then. Excellent Tutorials … Beautiful !!

    can’t say enough … very excited to create new things and to have fun again.

    Feel like I’m 16 again :)

    Thank you
    Bob

  2. Pingback: Carlos

Leave a Reply