webcam.js is a javascript library for web-camera handling
webcam.js is distributed under MIT license.
- 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.
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() 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);
});
});
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);
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
Download actual files
<script src="webcam.js"></script>