Welcome folks today in this blog post we will be building a webcam camera selfie app in browser using html5 css3 and javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html
file and copy paste the below code
index.html
1 2 3 4 5 6 7 8 9 10 |
<main id="camera"> <!-- Camera sensor --> <canvas id="camera--sensor"></canvas> <!-- Camera view --> <video id="camera--view" autoplay playsinline></video> <!-- Camera output --> <img src="//:0" alt="" id="camera--output"> <!-- Camera trigger --> <button id="camera--trigger">Take a picture</button> </main> |
Now inside this html code we have a main section having the id camera and then inside this we have the canvas element in which we will be capturing the photo from webcam. And then we have the video element in which we will be showing the webcam live feed. We have the img element where it holds the resultant captured image and also we have the button to capture the image. So if you open the index.html file inside the browser you will see the below output
Adding the CSS Styles
Now we will be adding the css styles for this app. Copy paste the below styles as shown below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<style> html, body{ margin: 0; padding: 0; height: 100%; width: 100%; } #camera, #camera--view, #camera--sensor, #camera--output{ position: fixed; height: 100%; width: 100%; object-fit: cover; } #camera--view, #camera--sensor, #camera--output{ transform: scaleX(-1); filter: FlipH; } #camera--trigger{ width: 200px; background-color: black; color: white; font-size: 16px; border-radius: 30px; border: none; padding: 15px 20px; text-align: center; box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2); position: fixed; bottom: 30px; left: calc(50% - 100px); } .taken{ height: 100px!important; width: 100px!important; transition: all 0.5s ease-in; border: solid 3px white; box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2); top: 20px; right: 20px; z-index: 2; } </style> |
Javascript Code
So now we will write the javascript code for this app. So first of all we will get the references of all the DOM elements as shown below
app.js
1 2 3 4 |
const cameraView = document.querySelector("#camera--view"), cameraOutput = document.querySelector("#camera--output"), cameraSensor = document.querySelector("#camera--sensor"), cameraTrigger = document.querySelector("#camera--trigger") |
And now we will be adding a webcam constraints object to allow the facing mode of user and audio
1 |
var constraints = { video: { facingMode: "user" }, audio: false }; |
Now we will be adding the event listener when we load the page we will be executing the function camerastart as shown below
1 |
window.addEventListener("load", cameraStart, false); |
So now we will be defining the cameraStart() function as shown below
1 2 3 4 5 6 7 8 9 10 11 |
function cameraStart() { navigator.mediaDevices .getUserMedia(constraints) .then(function(stream) { track = stream.getTracks()[0]; cameraView.srcObject = stream; }) .catch(function(error) { console.error("Oops. Something is broken.", error); }); } |
And inside this function we are using the navigator api inside the browser to access the webcam and passing the constraints object. And inside the callback function we are returning the stream and then we are attaching the stream to the cameraView.
Attaching onClick on Capture Photo Button
So now we will be attaching the onClick listener to the capture photo button. In this function we are using the canvas api to draw the canvas image and then we are attaching the image to the canvas and the dom. If you execute this application in the browser the result is shown below.
Full Source Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
<!Doctype html> <html lang=”en”> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Name of your awesome camera app --> <title>DevCam 2.0</title> <!-- Link to your main style sheet--> <style> html, body{ margin: 0; padding: 0; height: 100%; width: 100%; } #camera, #camera--view, #camera--sensor, #camera--output{ position: fixed; height: 100%; width: 100%; object-fit: cover; } #camera--view, #camera--sensor, #camera--output{ transform: scaleX(-1); filter: FlipH; } #camera--trigger{ width: 200px; background-color: black; color: white; font-size: 16px; border-radius: 30px; border: none; padding: 15px 20px; text-align: center; box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2); position: fixed; bottom: 30px; left: calc(50% - 100px); } .taken{ height: 100px!important; width: 100px!important; transition: all 0.5s ease-in; border: solid 3px white; box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2); top: 20px; right: 20px; z-index: 2; } </style> </head> <body> <!-- Camera --> <main id="camera"> <!-- Camera sensor --> <canvas id="camera--sensor"></canvas> <!-- Camera view --> <video id="camera--view" autoplay playsinline></video> <!-- Camera output --> <img src="//:0" alt="" id="camera--output"> <!-- Camera trigger --> <button id="camera--trigger">Take a picture</button> </main> <!-- Reference to your JavaScript file --> <script> // Set constraints for the video stream var constraints = { video: { facingMode: "user" }, audio: false }; // Define constants const cameraView = document.querySelector("#camera--view"), cameraOutput = document.querySelector("#camera--output"), cameraSensor = document.querySelector("#camera--sensor"), cameraTrigger = document.querySelector("#camera--trigger") // Access the device camera and stream to cameraView function cameraStart() { navigator.mediaDevices .getUserMedia(constraints) .then(function(stream) { track = stream.getTracks()[0]; cameraView.srcObject = stream; }) .catch(function(error) { console.error("Oops. Something is broken.", error); }); } // Take a picture when cameraTrigger is tapped cameraTrigger.onclick = function() { cameraSensor.width = cameraView.videoWidth; cameraSensor.height = cameraView.videoHeight; cameraSensor.getContext("2d").drawImage(cameraView, 0, 0); cameraOutput.src = cameraSensor.toDataURL("image/png"); cameraOutput.classList.add("taken"); }; // Start the video stream when the window loads window.addEventListener("load", cameraStart, false); </script> </body> </html> |