webcam.js

Overview

webcam.js is a javascript library for web-camera handling

webcam.js is distributed under MIT license.

Functions

• Open/Close the Web Camera
• Support multiple-camera
• Get snapshot image (Classical way)
• Get snapshots continuously (Classical way)
• Grab Frame (use new API ImageCapture :A new way to take a snapshot)
• Take Photo (use new API ImageCapture API)

The status of ImageCapture API is now(11.27.2017) WORKING DRAFT.
But the experimental implementation is available on chrome 59+ etc.

Demo

• Demo

Examples

• 01.Get Snapshot
• 02.Take Photo
• 03.Capture Continuously
• 04.Web Camera on WebGL
• 05.Skin Detection

Usage

#grabFrame

grabFrame() takes a snapshot of the live video being held in track, returning an ImageBitmap if successful. Wrapped W3C ImageCapture API.

var wcm = new WebCamera({
       videoTag: document.getElementById("video"),
       constraints: {
           video: {
               width: 640,
               height: 480,
           }
       }
   });

 wcm.startCamera();

 //grabFrame() takes a snapshot of the live video
 wcm.grabFrame().then(function (imageBitmap) {

 var canvas = document.getElementById("canvas");
 canvas.width = imageBitmap.width;
 canvas.height = imageBitmap.height;
 var ctx = canvas.getContext("2d");
 ctx.drawImage(imageBitmap, 0, 0);

});

#takePhoto

takePhoto() produces the result of a single exposure using the video capture device.Briefly, in the case of grabframe(), image data is subsampled in the process of image processing.In the case of takePhoto(),you may get an original image(not subsampled) from image sensor.

Wrapped W3C ImageCapture API.

var wcm = new WebCamera({
       videoTag: document.getElementById("video"),
       constraints: {
           video: {
               width: 640,
               height: 480,
           }
       }
   });

 wcm.startCamera();

 //take photo
 wcm.takePhoto()
    .then(function (blob) {
        return window.createImageBitmap(blob);
    })
    .then(function (imageBitmap) {

        var canvas = document.getElementById("canvas");
        canvas.width = imageBitmap.width;
        canvas.height = imageBitmap.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(imageBitmap, 0, 0);
    });

});

#repeated grabbing

If you call setOnSnapShotCallback(callbackFunc) , repeated grabbing is starting.

var wcm = new WebCamera({
       videoTag: document.getElementById("video"),
       constraints: {
           video: {
               width: 640,
               height: 480,
           }
       }
   });

 wcm.startCamera();

 //set continuous capturing callback with specfied size
wcm.setOnSnapShotCallback(function (imageBitmap) {
    canvas.width = imageBitmap.width;
    canvas.height = imageBitmap.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(imageBitmap, 0, 0);

},320,240);

Run on node.js

You can import library with npm.

Install

npm install webcam.js

Run demo

npm run ex00

Run exmaples

npm run ex01

npm run ex02

npm run ex03

npm run ex03

npm run ex04

npm run ex05

Run on browser

Download actual files

<script src="webcam.js"></script>