Take a Selfie With JavaScript

<h1>Take a Selfie With JavaScript </h1> <div class="container"> <div class="app"> <a href="#" id="start-camera" class="visible">Touch here to start the app.</a> <video id="camera-stream"></video> <img id="snap"> <p id="error-message"></p> <div class="controls"> <a href="#" id="delete-photo" title="Delete Photo" class="disabled"><i class="material-icons">delete</i></a> <a href="#" id="take-photo" title="Take Photo"><i class="material-icons">camera_alt</i></a> <a href="#" id="download-photo" download="selfie.png" title="Save Photo" class="disabled"><i class="material-icons">file_download</i></a> </div> <!-- Hidden canvas element. Used for taking snapshot of video. --> <canvas></canvas> </div> </div>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700'); *{ box-sizing: border-box; margin: 0; padding: 0; } html{ background-color: #fff; font:normal 16px/1.5 sans-serif; color: #333; } h1{ font: normal 32px/1.5 'Open Sans', sans-serif; color: #2c3e50; margin: 50px 0; text-align: center; } .container{ max-width: 1000px; margin: 50px auto; padding: 20px; background-color: #efefef; } .app{ width: 100%; position: relative; } .app #start-camera{ display: none; border-radius: 3px; max-width: 400px; color: #fff; background-color: #448AFF; text-decoration: none; padding: 15px; opacity: 0.8; margin: 50px auto; text-align: center; } .app video#camera-stream{ display: none; width: 100%; } .app img#snap{ position: absolute; top: 0; left: 0; width: 100%; z-index: 10; display: none; } .app #error-message{ width: 100%; background-color: #ccc; color: #9b9b9b; font-size: 28px; padding: 200px 100px; text-align: center; display: none; } .app .controls{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; display: flex; align-items: flex-end; justify-content: space-between; padding: 30px; display: none; } .app .controls a{ border-radius: 50%; color: #fff; background-color: #111; text-decoration: none; padding: 15px; line-height: 0; opacity: 0.7; outline: none; -webkit-tap-highlight-color: transparent; } .app .controls a:hover{ opacity: 1; } .app .controls a.disabled{ background-color: #555; opacity: 0.5; cursor: default; pointer-events: none; } .app .controls a.disabled:hover{ opacity: 0.5; } .app .controls a i{ font-size: 18px; } .app .controls #take-photo i{ font-size: 32px; } .app canvas{ display: none; } .app video#camera-stream.visible, .app img#snap.visible, .app #error-message.visible { display: block; } .app .controls.visible{ display: flex; } @media(max-width: 1000px){ .container{ margin: 40px; } .app #start-camera.visible{ display: block; } .app .controls a i{ font-size: 16px; } .app .controls #take-photo i{ font-size: 24px; } } @media(max-width: 600px){ .container{ margin: 10px; } .app #error-message{ padding: 80px 50px; font-size: 18px; } .app .controls a i{ font-size: 12px; } .app .controls #take-photo i{ font-size: 18px; } }
document.addEventListener('DOMContentLoaded', function () { // References to all the element we will need. var video = document.querySelector('#camera-stream'), image = document.querySelector('#snap'), start_camera = document.querySelector('#start-camera'), controls = document.querySelector('.controls'), take_photo_btn = document.querySelector('#take-photo'), delete_photo_btn = document.querySelector('#delete-photo'), download_photo_btn = document.querySelector('#download-photo'), error_message = document.querySelector('#error-message'); // The getUserMedia interface is used for handling camera input. // Some browsers need a prefix so here we're covering all the options navigator.getMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); if(!navigator.getMedia){ displayErrorMessage("Your browser doesn't have support for the navigator.getUserMedia interface."); } else{ // Request the camera. navigator.getMedia( { video: true }, // Success Callback function(stream){ // Create an object URL for the video stream and // set it as src of our HTLM video element. video.src = window.URL.createObjectURL(stream); // Play the video element to start the stream. video.play(); video.onplay = function() { showVideo(); }; }, // Error Callback function(err){ displayErrorMessage("There was an error with accessing the camera stream: " + err.name, err); } ); } // Mobile browsers cannot play video without user input, // so here we're using a button to start it manually. start_camera.addEventListener("click", function(e){ e.preventDefault(); // Start video playback manually. video.play(); showVideo(); }); take_photo_btn.addEventListener("click", function(e){ e.preventDefault(); var snap = takeSnapshot(); // Show image. image.setAttribute('src', snap); image.classList.add("visible"); // Enable delete and save buttons delete_photo_btn.classList.remove("disabled"); download_photo_btn.classList.remove("disabled"); // Set the href attribute of the download button to the snap url. download_photo_btn.href = snap; // Pause video playback of stream. video.pause(); }); delete_photo_btn.addEventListener("click", function(e){ e.preventDefault(); // Hide image. image.setAttribute('src', ""); image.classList.remove("visible"); // Disable delete and save buttons delete_photo_btn.classList.add("disabled"); download_photo_btn.classList.add("disabled"); // Resume playback of stream. video.play(); }); function showVideo(){ // Display the video stream and the controls. hideUI(); video.classList.add("visible"); controls.classList.add("visible"); } function takeSnapshot(){ // Here we're using a trick that involves a hidden canvas element. var hidden_canvas = document.querySelector('canvas'), context = hidden_canvas.getContext('2d'); var width = video.videoWidth, height = video.videoHeight; if (width && height) { // Setup a canvas with the same dimensions as the video. hidden_canvas.width = width; hidden_canvas.height = height; // Make a copy of the current frame in the video on the canvas. context.drawImage(video, 0, 0, width, height); // Turn the canvas image into a dataURL that can be used as a src for our photo. return hidden_canvas.toDataURL('image/png'); } } function displayErrorMessage(error_msg, error){ error = error || ""; if(error){ console.error(error); } error_message.innerText = error_msg; hideUI(); error_message.classList.add("visible"); } function hideUI(){ // Helper function for clearing the app UI. controls.classList.remove("visible"); start_camera.classList.remove("visible"); video.classList.remove("visible"); snap.classList.remove("visible"); error_message.classList.remove("visible"); } });
Expand for more options Login