The Palos Publishing Company

Categories We Write About

Create a webcam screenshot tool

Written by

Bernardo Palos

in

Here is a simple webcam screenshot tool implemented using HTML, CSS, and JavaScript. It accesses your webcam, displays the live video feed, and lets you capture a screenshot that can be downloaded as an image.

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Webcam Screenshot Tool</title>
<style>
  body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 20px;
    background: #f0f0f0;
  }
  video, canvas {
    border: 2px solid #333;
    border-radius: 8px;
    max-width: 100%;
    height: auto;
  }
  #controls {
    margin-top: 10px;
  }
  button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 6px;
    border: none;
    background-color: #007bff;
    color: white;
    transition: background-color 0.3s;
  }
  button:hover {
    background-color: #0056b3;
  }
  #downloadLink {
    display: none;
    margin-top: 10px;
    font-size: 16px;
  }
</style>
</head>
<body>

<h2>Webcam Screenshot Tool</h2>

<video id="video" autoplay playsinline></video>
<canvas id="canvas" style="display:none;"></canvas>

<div id="controls">
  <button id="snap">Take Screenshot</button>
  <a id="downloadLink" href="#" download="webcam-screenshot.png">Download Screenshot</a>
</div>

<script>
  const video = document.getElementById('video');
  const canvas = document.getElementById('canvas');
  const snapBtn = document.getElementById('snap');
  const downloadLink = document.getElementById('downloadLink');

  // Access webcam
  async function startWebcam() {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
      video.srcObject = stream;
    } catch (error) {
      alert('Error accessing webcam: ' + error.message);
    }
  }

  // Capture screenshot from video
  snapBtn.addEventListener('click', () => {
    const context = canvas.getContext('2d');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    context.drawImage(video, 0, 0, canvas.width, canvas.height);

    // Convert canvas to image URL
    const imageURL = canvas.toDataURL('image/png');
    downloadLink.href = imageURL;
    downloadLink.style.display = 'inline-block';
  });

  startWebcam();
</script>

</body>
</html>

Open this file in a modern browser that supports webcam access (like Chrome, Firefox, Edge). It will ask for permission to access the webcam, then show live video. Clicking “Take Screenshot” captures the current frame and displays a download link to save the image as a PNG file.

Share This Page:

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Out Our Newest Posts we wrote about

Categories We Write About