simple manager class for web camera
npm install webcam.jsjavascript
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.
`javascript
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.
`javascript
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
`node
npm install webcam.js
`
Run demo
`node
npm run ex00
`
Run exmaples
`node
npm run ex01
`
`node
npm run ex02
`
`node
npm run ex03
`
`node
npm run ex03
`
`node
npm run ex04
`
`node
npm run ex05
`
Run on browser
Download actual files
`
``