Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on October 7, 2022

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

 

 

CSS
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

 

 

JavaScript
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

 

 

JavaScript
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

 

 

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

 

 

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

 

 

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

 

 

 

 

Recent Posts

  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Android Java Project to Embed Google Maps & Add Markers Using Maps SDK
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme