How To Access Webcam using html, css and javascript

 Hi friends,  we are about to explore how to access our Webcam using html, css and javascript.  Without wasting any time.  The aim and objective of this project is to access Webcam, stream and perform basic Webcam screenshot-image. Let us start by identification of all needed materials to accomplished our project. 


  1. IDE:We will make use of Microsoft Visual Studio for desktop or Anwriter for mobile developers Environment. This is were will write all our codes and debugging 
  2. We need a web browser to preview our project  and for translation,interpretation and app testing.
  3. Create 3 files (index.html,style.css and main.js)
  4. Copy and paste all the provided code below in there respective files.







HTML CODE:
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    
    <title>Webcam</title>
    <script src="https://unpkg.com/feather-icons"></script>
     <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="display-cover">
    <video autoplay></video>
    <canvas class="d-none"></canvas>

    <div class="video-options">
        <select name="" id="" class="custom-select">
            <option value="">Select camera</option>
        </select>
    </div>

    <img class="screenshot-image d-none" alt="">

    <div class="controls">
        <button class="btn btn-danger play" title="Play"><i data-feather="play-circle"></i></button>
        <button class="btn btn-info pause d-none" title="Pause"><i data-feather="pause"></i></button>
        <button class="btn btn-outline-success screenshot d-none" title="ScreenShot"><i data-feather="image"></i></button>
    
    </div>
</div>
<script src="main.js"></script>
</body>
</html>



STYLING (CSSC) CODE:

<style type="text/css">

.screenshot-image {
  width: 150px;
  height: 90px;
  border-radius: 4px;
  border: 2px solid whitesmoke;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  position: absolute;
  bottom: 5px;
  left: 10px;
  background: white;
}

.display-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70%;
  margin: 5% auto;
  position: relative;
}

video {
  //margin: 5% auto;
  width: 100%;
  background: rgba(0,0,0,0.2);
}

.video-options {
  position: absolute;
  left: 20px;
  top: 30px;
}

.controls {
  position: absolute;
  right: 20px;
  top: 20px;
  display: flex;

}

.controls > button {
  width: 45px;
  height: 45px;
  text-align: center;
  border-radius: 100%;
  margin: 0 6px;
  background: transparent;

  &:hover {
    svg {
      color: white !important;
    }
  }
}


@media (min-width: 300px) and (max-width: 400px) {
  .controls {
    flex-direction: column;

    button {
      margin: 5px 0 !important;
    }
  }
}

.controls > button > svg {
  height: 20px;
  width: 18px;
  text-align: center;
  margin: 0 auto;
  padding: 0;
}

.controls button:nth-child(1) {
  border: 2px solid #D2002E;

  svg {
    color: #D2002E;

  }
}

.controls button:nth-child(2) {
  border: 2px solid #008496;

  svg {
    color: #008496;
  }
}

.controls button:nth-child(3) {
  border: 2px solid #00B541;

  svg {
    color: #00B541;
  }
}

.controls > button {
  width: 45px;
  height: 45px;
  text-align: center;
  border-radius: 100%;
  margin: 0 6px;
  background: transparent;

  &:hover {
    svg {
      color: white;
    }
  }
}
</style>




JAVASCRIPT CODE:

<script type="text/javascript">
feather.replace();

const controls = document.querySelector('.controls');
const cameraOptions = document.querySelector('.video-options>select');
const video = document.querySelector('video');
const canvas = document.querySelector('canvas');
const screenshotImage = document.querySelector('img');
const buttons = [...controls.querySelectorAll('button')];
let streamStarted = false;

const [play, pause, screenshot] = buttons;

const constraints = {
  video: {
    width: {
      min: 1280,
      ideal: 1920,
      max: 2560,
    },
    height: {
      min: 720,
      ideal: 1080,
      max: 1440
    },
  }
};

cameraOptions.onchange = () => {
  const updatedConstraints = {
    ...constraints,
    deviceId: {
      exact: cameraOptions.value
    }
  };

  startStream(updatedConstraints);
};

play.onclick = () => {
  if (streamStarted) {
    video.play();
    play.classList.add('d-none');
    pause.classList.remove('d-none');
    return;
  }
  if ('mediaDevices' in navigator && navigator.mediaDevices.getUserMedia) {
    const updatedConstraints = {
      ...constraints,
      deviceId: {
        exact: cameraOptions.value
      }
    };
    startStream(updatedConstraints);
  }
};

const pauseStream = () => {
  video.pause();
  play.classList.remove('d-none');
  pause.classList.add('d-none');
};

const doScreenshot = () => {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0);
  screenshotImage.src = canvas.toDataURL('image/webp');
  screenshotImage.classList.remove('d-none');
};

pause.onclick = pauseStream;
screenshot.onclick = doScreenshot;

const startStream = async (constraints) => {
  const stream = await navigator.mediaDevices.getUserMedia(constraints);
  handleStream(stream);
};


const handleStream = (stream) => {
  video.srcObject = stream;
  play.classList.add('d-none');
  pause.classList.remove('d-none');
  screenshot.classList.remove('d-none');

};


const getCameraSelection = async () => {
  const devices = await navigator.mediaDevices.enumerateDevices();
  const videoDevices = devices.filter(device => device.kind === 'videoinput');
  const options = videoDevices.map(videoDevice => {
    return `<option value="${videoDevice.deviceId}">${videoDevice.label}</option>`;
  });
  cameraOptions.innerHTML = options.join('');
};






</script>


  • The htlm code is a web structural programming language that serves as the main Fondation for this app development. Such as creating all needed div and buttons 


  •  The css is the art and graphic design part of the project.  


  • While the javascript code performs all necessary functionality which include:

  1.  startStream(updatedConstraints);
  2. getCameraSelection();
  3. Selection of all id 
  4. doScreenshot
  5. handleStream
  6. getCameraSelection etc

 Use the below lines of code to links our style.css and main.js to our index.html 

This goes inside your <body> tag
<script src="main.js"></script>

This goes inside your <header >tag 
 <link rel="stylesheet" href="app.css">




Comments

Post a Comment

Popular posts from this blog

Home Automation using NodeMCU ESP8266 and Blynk 2.0(IOT)

Image
 Hello! guys,let us develop another real life project today. we are about to control any of our home electronics,lighting and power system with our  smart phone . We are using a diffrent micro controller with wifi module called NodeMCU ESP8266 to hook up all our connection to cloud . In addition, we are using Blynk 2.0 as our mobile app to control all the embeded system from our smart phones. THE WORK FLOW IS AS FOLLOWING: CODE<------>NodeMCU ESP8266<---->CLOUD<---->BLYNK2.0<------>RELAYS<-->LOADS<--->CODE Circuit of the Blynk NodeMCU Home Automation projects The circuit is very simple, I have used  D1, D2, D5 & D6  GPIO pins to control the 4-channel relay module. And the GPIO  SD3, D3, D7  &  RX  are connected with the switches to control the relay module manually. I have used the  INPUT_PULLUP  function in Arduino IDE instead of using the pull-up resistors with each switch. As per t...
Read more