DEV Community

Cover image for How to capture picture using JavaScript | Webcam Js Tutorial
Stackfindover
Stackfindover

Posted on • Edited on

How to capture picture using JavaScript | Webcam Js Tutorial

#html #css #javascript #beginners

Hello, guys In this tutorial we will try to solve the mentioned query. and also we will learn how to capture picture using JavaScript.

Common Query

  1. How to capture picture using JavaScript?
  2. How to capture a webcam image using JavaScript?
  3. How to draw a snapshot of a webcam in HTML?

For capturing pictures using JavaScript, first we need the Webcam JS library

See Also:- How to Integrate Webcam using JavaScript

What is webcam js?

Webcam.js is an Open Source JavaScript library that allows us to capture a picture from the webcam. It uses HTML5 getUserMedia API to capture the picture.

Webcam Js Quick Start Guide

We need to host the webcam.js and webcam.swf files on your web server, and drop in this HTML snippet:

<script src="webcam.js"></script>
<div id="camera"></div>
<div id="snapShot"></div>
<script language="JavaScript">
    Webcam.attach( '#camera' );

    takeSnapShot = function() {
      Webcam.snap(function(data_uri) {
        document.getElementById('snapShot').innerHTML = 
        '<img src=" ' +data_uri+' " width="400" height="400">';
      })
    }
</script>
<input type="button" value="" id="cameraBtn" onclick="takeSnapShot()">
Enter fullscreen mode Exit fullscreen mode

This will create a live camera view in the #camera DIV, and when the Take Snapshot link is clicked it will take a still snapshot, convert it to a JPEG, and deliver a Data URI which is inserted into the #snapShot DIV as a standard <img> tag.

Webcam Js Configuration

If you want to change the default settings, just call Webcam.set() and pass in a hash with any of the following keys:

Height    : Auto
Width   : Auto
dest_width :    Auto
dest_height :   Auto
crop_width :    Disabled
crop_height :   Disabled
image_format :  jpeg
force_flash :   false
jpeg_quality :  90
Enter fullscreen mode Exit fullscreen mode

I will show you an example of overriding some parameters. Remember to call this before you attach the viewer.

Webcam.set({
    width:650,
    height:310,
    dest_width: 1300,
    dest_height: 620,
    image_format: 'jpeg',
    jpeg_quality: 90,
    force_flash: false   
});
Enter fullscreen mode Exit fullscreen mode

Capture picture using JavaScript Video Output

Check Full Article With Source Code

Top comments (4)

Collapse
 
polaroidkidd profile image
Daniel Einars •

Webcam JS is in maintenance mode and the library linked to my the author of webcamjs is no longer maintained.

Recommending either of these libraries isn't good.

Collapse
 
stackfindover profile image
Stackfindover •

Thanks, You're Right
Check more info about Webcam Js

Collapse
 
polaroidkidd profile image
Daniel Einars •

getting the webcam these days is a lot easier than it used to be (with the exception of IE11, which doesn't have webcam features enabled without flash).

To get a webcam stream you can do


navigator.mediaDevices.getUserMedia({audio: false, video: true})
    .then((stream) => {
        // work with the stream, like assigning it to a video element and playing it. 
        // To Capture an image you can paint a reference to the video element to
        // the canvas and then  get the image from the canvas to work with.
        console.debug("stream: ", stream)
        })
    .catch((error) => {
        // some error occured
        console.error(error)
       })
Enter fullscreen mode Exit fullscreen mode
Collapse
 
mrwolferinc profile image
mrwolferinc •

but flash is dead

Read next

mikeyoung44 profile image

Generate Lifelike 3D Avatars with URAvatar's Neural Rendering Technology

Mike Young -

mikeyoung44 profile image

Weight Decay's Critical Role: Theoretical Insights for Better Deep Learning Generalization

Mike Young -

mikeyoung44 profile image

GenXD: The AI System Generating Realistic 3D and 4D Scenes Without Complex Modeling

Mike Young -

mikeyoung44 profile image

AI Boosts Math Construction Problems: PatternBoost Finds Elegant Solutions

Mike Young -