ng2-webcam is a cross-browser angular2 component, it will use the browser's native
getUserMedia()implementation, otherwise a Flash fallback will be loaded instead.
This component based on MediaDevices and getUserMedia.js Polyfill.
Please, check original repository for clear understanding
npm install ng2-webcam --save
Use webcam as a pure angular2 component
- Add component into your module
import { WebCamComponent } from 'ng2-webcam';
...
@NgModule({
imports: [
BrowserModule,
HttpModule,
AppRouting
],
declarations: [
AppComponent,
WebCamComponent
],
bootstrap: [ AppComponent ]
})
class AppModule {
}
export default AppModule;- Use in html markup
<ng2-webcam [options]="options" [onSuccess]="onSuccess" [onError]="onError"></ng2-webcam>- Below is a sample of options structure
cont options = {
audio: false,
video: true,
width: 500,
height: 500
};
const onSuccess = (stream: MediaStream) => {};
const onError = (err) => {};- You can capture image form webcam using following example
...
const video = <any>document.getElementsByTagName('video')[0];
const canvas = <any>document.getElementsByTagName('canvas')[0];
if (video) {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0);
}
...On devices you can switch camera modes using following option:
cont options = {
cameraType: 'front' // or 'back'
};
Tested for tablet (Android 4.4.2 GT-N5110) and phone (Android 4.1.2 GT-I8268)
Action script fallback provide the following API
interface FallbackDispatcher {
capture: Function;
save: Function;
setCamera: Function;
getCameraSize: Function;
getCameraList: Function;
}
For correct communication with this script You have to implement following external callback interface
interface EventCallbacks {
debug: Function;
onCapture: Function;
onTick: Function;
onSave: Function;
}
Below is a sample of fallback implementation
import { FallbackDispatcher } from 'ng2-webcam'
...
cont options = {
audio: false,
video: true
};
const onSuccess = (flashplayer: MediaStream | FallbackDispatcher) => {
if (stream instanceof FallbackDispatcher) {
this.flashPlayer = <FallbackDispatcher>stream;
this.onFallback();
}
};
const onError = (err) => {
console.log(err);
};
...
/**
* Implement fallback external interface
*/
onFallback(): void {
const self = this;
const canvas = <any>document.getElementsByTagName('canvas')[0];
if (canvas) {
const ctx = canvas.getContext('2d');
const size = self.flashPlayer.getCameraSize();
const w = size.width;
const h = size.height;
const externData = {
imgData: ctx.getImageData(0, 0, w, h),
pos: 0
};
canvas.width = w;
canvas.height = h;
ctx.clearRect(0, 0, w, h);
FallbackDispatcher.implementExternal({
onSave: (data) => {
try {
let col = data.split(';');
let tmp = null;
for (let i = 0; i < w; i++) {
tmp = parseInt(col[i], 10);
externData.imgData.data[externData.pos + 0] = (tmp >> 16) & 0xff;
externData.imgData.data[externData.pos + 1] = (tmp >> 8) & 0xff;
externData.imgData.data[externData.pos + 2] = tmp & 0xff;
externData.imgData.data[externData.pos + 3] = 0xff;
externData.pos += 4;
}
if (externData.pos >= 4 * w * h) {
ctx.putImageData(externData.imgData, 0, 0);
externData.pos = 0;
}
} catch (e) {
console.error(e);
}
},
debug: (tag, message) => {
console.log(tag, message);
},
onCapture: () => {
self.flashPlayer.save();
},
onTick: (time) => {
// do nothing
}
});
}
}Also You can extend options using specific flash fallback params
cont options = {
audio: false,
video: true,
width: 320, // by default, need remake .swf for other size
height: 240, // by default, need remake .swf for other size
fallbackMode: 'callback',
fallbackSrc: '/node_modules/ng2-webcam/lib/fallback/jscam_canvas_only.swf', // you can put your fallback swf
fallbackQuality: 85
};Check this file lib/fallback/src/jscam.as for clear understanding
You can check example using following npm commands:
cd ng2-webcam
npm i
npm start
For tests:
cd ng2-webcam
npm i
npm run lint
npm test
npm run e2e
Copyright (c) 2016 archik Licensed under the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent