HTML5 Photo Booth

// davisde // Programming Tips

[vc_row][vc_column width=”2/3″][vc_separator][venera_framed_image content_type=”video” css_animation=”appear” frame_type=”browser” slider_engine=”flexslider” video_link=”https://www.youtube.com/watch?v=2sXkl3rR-yc” browser_url=”https://www.youtube.com/watch?v=2sXkl3rR-yc”][vc_separator][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row][vc_row][vc_column width=”2/3″][vc_tabs][vc_tab title=”About This Project” tab_id=”1402713028-1-39e9a4-2f88123b-77946048-9294925e-bc34″][vc_column_text]

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.

[/vc_column_text][vc_button title=”View Demo” target=”_self” icon=”none” size=”btn-huge” href=”http://www.tinkernut.com/demos/343_photobooth/photobooth.html”][/vc_tab][vc_tab title=”Code” tab_id=”1402753910272-3-8123b-77946048-9294925e-bc34″][vc_button title=”Download Code” target=”_blank” icon=”none” size=”btn-huge” href=”http://www.tinkernut.com/demos/343_photobooth/343_photobooth.zip”][vc_column_text]

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

 

[/vc_column_text][/vc_tab][vc_tab title=”Important Links” tab_id=”1402753981900-3-10123b-77946048-9294925e-bc34″][vc_column_text]

Important Links

Help support my channel: http://www.patreon.com/tinkernut

Follow Tinkernut!

[/vc_column_text][/vc_tab][/vc_tabs][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row]

3 Responses

  • Remco // //

    The demo don’t work get HTML error 404

  • Robert Sommerville // //

    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

Leave a Reply