• HTML5 Photo Booth

    [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


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

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



    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);
                   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]

  • Awesome HTML5 Video Trick

    Create a free chroma key effect using HTML5 and canvas.

    Live example – http://www.tinkernut.com/demos/273_chroma/video_chroma.html
    Project Files – www.tinkernut.com/demos/273_chroma/html5_chroma.zip
    HTML5 video  tutorial –

    Learn how to code an HTML5 video player in under 5 minutes and make it so that it plays on any browser!

    View the sample (You can attain the source code for this project by viewing the HTML source in the webpage listed below.):