Javascript Webcam Project to Build Camera Selfie App in Browser Using HTML5 & CSS3

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

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

<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

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

<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

const cameraView = document.querySelector("#camera--view"),
    cameraOutput = document.querySelector("#camera--output"),
    cameraSensor = document.querySelector("#camera--sensor"),
    cameraTrigger = document.querySelector("#camera--trigger")

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

var constraints = { video: { facingMode: "user" }, audio: false };

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

window.addEventListener("load", cameraStart, false);

1	window.addEventListener("load", cameraStart, false);

So now we will be defining the cameraStart() function as shown below

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

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

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

<!Doctype html>

<head>

<title>DevCam 2.0</title>

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

<button id="camera--trigger">Take a picture</button>

</main>

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