├── src
    ├── assets
    │   └── .gitkeep
    ├── favicon.ico
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── styles.scss
    ├── app
    │   ├── app.component.scss
    │   ├── app.module.ts
    │   ├── app.component.html
    │   └── app.component.ts
    ├── index.html
    ├── main.ts
    ├── test.ts
    └── polyfills.ts
├── e2e
    ├── tsconfig.json
    ├── src
    │   ├── app.po.ts
    │   └── app.e2e-spec.ts
    └── protractor.conf.js
├── tsconfig.app.json
├── .editorconfig
├── tsconfig.spec.json
├── browserslist
├── tsconfig.json
├── .gitignore
├── karma.conf.js
├── README.md
├── package.json
├── tslint.json
└── angular.json


/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/basst314/ngx-webcam-demo/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/e2e",
 5 |     "module": "commonjs",
 6 |     "target": "es5",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "jasminewd2",
10 |       "node"
11 |     ]
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "./out-tsc/app",
 5 |     "types": []
 6 |   },
 7 |   "files": [
 8 |     "src/main.ts",
 9 |     "src/polyfills.ts"
10 |   ],
11 |   "include": [
12 |     "src/**/*.d.ts"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
 1 | .actionBtn {
 2 |   margin-top: 5px;
 3 |   margin-bottom: 2px;
 4 |   font-size: 1.2em;
 5 | }
 6 | 
 7 | .snapshot {
 8 |   text-align: center;
 9 |   img {
10 |     max-width: 800px;
11 |     max-height: 800px;
12 |   }
13 | }
14 | 
15 | ul.links {
16 |   padding-bottom: 20px;
17 | }
18 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo(): Promise<unknown> {
 5 |     return browser.get(browser.baseUrl) as Promise<unknown>;
 6 |   }
 7 | 
 8 |   getTitleText(): Promise<string> {
 9 |     return element(by.css('app-root h1')).getText() as Promise<string>;
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "./out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts",
12 |     "src/polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "src/**/*.spec.ts",
16 |     "src/**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>AngularTourOfHeroes</title>
 6 |   <base href="/">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
 9 | </head>
10 | <body>
11 |   <app-root></app-root>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.error(err));
13 | 


--------------------------------------------------------------------------------
/browserslist:
--------------------------------------------------------------------------------
 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | 
 5 | # You can see what browsers were selected by your queries by running:
 6 | #   npx browserslist
 7 | 
 8 | > 0.5%
 9 | last 2 versions
10 | Firefox ESR
11 | not dead
12 | not IE 9-11 # For IE 9-11 support, remove 'not'.


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {BrowserModule} from '@angular/platform-browser';
 2 | import {NgModule} from '@angular/core';
 3 | import {AppComponent} from './app.component';
 4 | import {FormsModule} from '@angular/forms';
 5 | import {WebcamModule} from 'ngx-webcam';
 6 | 
 7 | 
 8 | @NgModule({
 9 |   declarations: [
10 |     AppComponent
11 |   ],
12 |   imports: [
13 |     BrowserModule,
14 |     FormsModule,
15 |     WebcamModule
16 |   ],
17 |   providers: [],
18 |   bootstrap: [AppComponent]
19 | })
20 | export class AppModule {
21 | }
22 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "downlevelIteration": true,
 9 |     "experimentalDecorators": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "node",
12 |     "importHelpers": true,
13 |     "target": "es2015",
14 |     "lib": [
15 |       "es2018",
16 |       "dom"
17 |     ]
18 |   },
19 |   "angularCompilerOptions": {
20 |     "fullTemplateTypeCheck": true,
21 |     "strictInjectionParameters": true
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | import { browser, logging } from 'protractor';
 3 | 
 4 | describe('workspace-project App', () => {
 5 |   let page: AppPage;
 6 | 
 7 |   beforeEach(() => {
 8 |     page = new AppPage();
 9 |   });
10 | 
11 |   it('should display welcome message', () => {
12 |     page.navigateTo();
13 |     expect(page.getTitleText()).toEqual('Ngx-Webcam Demo');
14 |   });
15 | 
16 |   afterEach(async () => {
17 |     // Assert that there are no errors emitted from the browser
18 |     const logs = await browser.manage().logs().get(logging.Type.BROWSER);
19 |     expect(logs).not.toContain(jasmine.objectContaining({
20 |       level: logging.Level.SEVERE,
21 |     } as logging.Entry));
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | # Only exists if Bazel was run
 8 | /bazel-out
 9 | 
10 | # dependencies
11 | /node_modules
12 | 
13 | # profiling files
14 | chrome-profiler-events*.json
15 | speed-measure-plugin*.json
16 | 
17 | # IDEs and editors
18 | /.idea
19 | .project
20 | .classpath
21 | .c9/
22 | *.launch
23 | .settings/
24 | *.sublime-workspace
25 | 
26 | # IDE - VSCode
27 | .vscode/*
28 | !.vscode/settings.json
29 | !.vscode/tasks.json
30 | !.vscode/launch.json
31 | !.vscode/extensions.json
32 | .history/*
33 | 
34 | # misc
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 | 
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: {
11 |   context(path: string, deep?: boolean, filter?: RegExp): {
12 |     keys(): string[];
13 |     <T>(id: string): T;
14 |   };
15 | };
16 | 
17 | // First, initialize the Angular testing environment.
18 | getTestBed().initTestEnvironment(
19 |   BrowserDynamicTestingModule,
20 |   platformBrowserDynamicTesting()
21 | );
22 | // Then we find all the tests.
23 | const context = require.context('./', true, /\.spec\.ts$/);
24 | // And load the modules.
25 | context.keys().map(context);
26 | 


--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | // Protractor configuration file, see link for more information
 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 4 | 
 5 | const { SpecReporter } = require('jasmine-spec-reporter');
 6 | 
 7 | /**
 8 |  * @type { import("protractor").Config }
 9 |  */
10 | exports.config = {
11 |   allScriptsTimeout: 11000,
12 |   specs: [
13 |     './src/**/*.e2e-spec.ts'
14 |   ],
15 |   capabilities: {
16 |     browserName: 'chrome'
17 |   },
18 |   directConnect: true,
19 |   baseUrl: 'http://localhost:4200/',
20 |   framework: 'jasmine',
21 |   jasmineNodeOpts: {
22 |     showColors: true,
23 |     defaultTimeoutInterval: 30000,
24 |     print: function() {}
25 |   },
26 |   onPrepare() {
27 |     require('ts-node').register({
28 |       project: require('path').join(__dirname, './tsconfig.json')
29 |     });
30 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
31 |   }
32 | };


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, './coverage/ngx-webcam-demo'),
20 |       reports: ['html', 'lcovonly', 'text-summary'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false,
30 |     restartOnFileChange: true
31 |   });
32 | };
33 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ngx-webcam-demo
 2 | This is a simple Demo-Project for <a href="https://github.com/basst314/ngx-webcam">ngx-webcam</a>.
 3 | 
 4 | It shows how to use the Webcam-Component from `ngx-webcam` in a simple use-case, including parameters and event-bindings.
 5 | 
 6 | ## Demo
 7 | Try the <a href="https://basst314.github.io/ngx-webcam/?">Live-Demo</a> to see everything in action.
 8 | 
 9 | ## Usage
10 | To see how `ngx-webcam` is being used, take a closer look at these files:
11 | * <a href="https://github.com/basst314/ngx-webcam-demo/blob/master/package.json#L22">package.json</a>: Add the latest version of `ngx-webcam` to your project.
12 | * <a href="https://github.com/basst314/ngx-webcam-demo/blob/master/src/app/app.module.ts#L15">app.module.ts</a>: See how the `WebcamModule` is imported into the Angular project.
13 | * <a href="https://github.com/basst314/ngx-webcam-demo/blob/master/src/app/app.component.ts">app.component.ts</a>: The snapshot-trigger and event-handler for the `WebcamComponent` are placed here.
14 | * <a href="https://github.com/basst314/ngx-webcam-demo/blob/master/src/app/app.component.html#L7">app.component.html</a>: The `<webcam>`-tag binds it all together - parameters and event-handlers. It displays the live view of the user's webcam.
15 | 
16 | ## Issues
17 | Please open issues at the original <a href="https://github.com/basst314/ngx-webcam">ngx-webcam repository</a>.
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ngx-webcam-demo",
 3 |   "version": "0.1.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve",
 7 |     "build": "ng build --prod",
 8 |     "test": "ng test",
 9 |     "lint": "ng lint",
10 |     "e2e": "ng e2e"
11 |   },
12 |   "private": true,
13 |   "dependencies": {
14 |     "@angular/animations": "~9.0.7",
15 |     "@angular/common": "~9.0.7",
16 |     "@angular/compiler": "~9.0.7",
17 |     "@angular/core": "~9.0.7",
18 |     "@angular/forms": "~9.0.7",
19 |     "@angular/platform-browser": "~9.0.7",
20 |     "@angular/platform-browser-dynamic": "~9.0.7",
21 |     "@angular/router": "~9.0.7",
22 |     "ngx-webcam": "^0.3.2",
23 |     "rxjs": "~6.5.4",
24 |     "tslib": "^1.10.0",
25 |     "zone.js": "~0.10.2"
26 |   },
27 |   "devDependencies": {
28 |     "@angular-devkit/build-angular": "^0.1100.2",
29 |     "@angular/cli": "~9.0.7",
30 |     "@angular/compiler-cli": "~9.0.7",
31 |     "@angular/language-service": "~9.0.7",
32 |     "@types/jasmine": "~3.5.0",
33 |     "@types/jasminewd2": "~2.0.3",
34 |     "@types/node": "^12.11.1",
35 |     "codelyzer": "^5.1.2",
36 |     "jasmine-core": "~3.5.0",
37 |     "jasmine-spec-reporter": "~4.2.1",
38 |     "karma": "~4.3.0",
39 |     "karma-chrome-launcher": "~3.1.0",
40 |     "karma-coverage-istanbul-reporter": "~2.1.0",
41 |     "karma-jasmine": "~2.0.1",
42 |     "karma-jasmine-html-reporter": "^1.4.2",
43 |     "protractor": "~5.4.3",
44 |     "ts-node": "~8.3.0",
45 |     "tslint": "~5.18.0",
46 |     "typescript": "~3.7.5"
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
 1 | <div style="text-align:center">
 2 |   <h1>
 3 |     Ngx-Webcam Demo
 4 |   </h1>
 5 | 
 6 |   <div>
 7 |     <webcam [height]="500" [width]="500" [trigger]="triggerObservable" (imageCapture)="handleImage($event)" *ngIf="showWebcam"
 8 |             [allowCameraSwitch]="allowCameraSwitch" [switchCamera]="nextWebcamObservable"
 9 |             [videoOptions]="videoOptions"
10 |             [imageQuality]="1"
11 |             (cameraSwitched)="cameraWasSwitched($event)"
12 |             (initError)="handleInitError($event)"
13 |     ></webcam>
14 |     <br/>
15 |     <button class="actionBtn" (click)="triggerSnapshot();">Take A Snapshot</button>
16 |     <button class="actionBtn" (click)="toggleWebcam();">Toggle Webcam</button>
17 |     <br/>
18 |     <button class="actionBtn" (click)="showNextWebcam(true);" [disabled]="!multipleWebcamsAvailable">Next Webcam</button>
19 |     <input id="cameraSwitchCheckbox" type="checkbox" [(ngModel)]="allowCameraSwitch"><label for="cameraSwitchCheckbox">Allow Camera Switch</label>
20 |     <br/>
21 |     DeviceId: <input id="deviceId" type="text" [(ngModel)]="deviceId" style="width: 500px">
22 |     <button (click)="showNextWebcam(deviceId);">Activate</button>
23 |   </div>
24 | </div>
25 | 
26 | <div class="snapshot" *ngIf="webcamImage">
27 |   <h2>Nice one!</h2>
28 |   <img [src]="webcamImage.imageAsDataUrl"/>
29 | </div>
30 | 
31 | <h4 *ngIf="errors.length > 0">Messages:</h4>
32 | <ul *ngFor="let error of errors">
33 |   <li>{{error | json}}</li>
34 | </ul>
35 | 
36 | <h2>Like this project on GitHub:</h2>
37 | <ul class="links">
38 |   <li>
39 |     <h2><a target="_blank" rel="noopener" href="https://github.com/basst314/ngx-webcam">Ngx-Webcam / GitHub</a></h2>
40 |   </li>
41 | </ul>
42 | 
43 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "tslint:recommended",
 3 |   "rules": {
 4 |     "array-type": false,
 5 |     "arrow-parens": false,
 6 |     "deprecation": {
 7 |       "severity": "warning"
 8 |     },
 9 |     "component-class-suffix": true,
10 |     "contextual-lifecycle": true,
11 |     "directive-class-suffix": true,
12 |     "directive-selector": [
13 |       true,
14 |       "attribute",
15 |       "app",
16 |       "camelCase"
17 |     ],
18 |     "component-selector": [
19 |       true,
20 |       "element",
21 |       "app",
22 |       "kebab-case"
23 |     ],
24 |     "import-blacklist": [
25 |       true,
26 |       "rxjs/Rx"
27 |     ],
28 |     "interface-name": false,
29 |     "max-classes-per-file": false,
30 |     "max-line-length": [
31 |       true,
32 |       140
33 |     ],
34 |     "member-access": false,
35 |     "member-ordering": [
36 |       true,
37 |       {
38 |         "order": [
39 |           "static-field",
40 |           "instance-field",
41 |           "static-method",
42 |           "instance-method"
43 |         ]
44 |       }
45 |     ],
46 |     "no-consecutive-blank-lines": false,
47 |     "no-console": [
48 |       true,
49 |       "debug",
50 |       "info",
51 |       "time",
52 |       "timeEnd",
53 |       "trace"
54 |     ],
55 |     "no-empty": false,
56 |     "no-inferrable-types": [
57 |       true,
58 |       "ignore-params"
59 |     ],
60 |     "no-non-null-assertion": true,
61 |     "no-redundant-jsdoc": true,
62 |     "no-switch-case-fall-through": true,
63 |     "no-var-requires": false,
64 |     "object-literal-key-quotes": [
65 |       true,
66 |       "as-needed"
67 |     ],
68 |     "object-literal-sort-keys": false,
69 |     "ordered-imports": false,
70 |     "quotemark": [
71 |       true,
72 |       "single"
73 |     ],
74 |     "trailing-comma": false,
75 |     "no-conflicting-lifecycle": true,
76 |     "no-host-metadata-property": true,
77 |     "no-input-rename": true,
78 |     "no-inputs-metadata-property": true,
79 |     "no-output-native": true,
80 |     "no-output-on-prefix": true,
81 |     "no-output-rename": true,
82 |     "no-outputs-metadata-property": true,
83 |     "template-banana-in-box": true,
84 |     "template-no-negated-async": true,
85 |     "use-lifecycle-interface": true,
86 |     "use-pipe-transform-interface": true
87 |   },
88 |   "rulesDirectory": [
89 |     "codelyzer"
90 |   ]
91 | }


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, OnInit} from '@angular/core';
 2 | import {Subject, Observable} from 'rxjs';
 3 | import {WebcamImage, WebcamInitError, WebcamUtil} from 'ngx-webcam';
 4 | 
 5 | @Component({
 6 |   selector: 'app-root',
 7 |   templateUrl: './app.component.html',
 8 |   styleUrls: ['./app.component.scss']
 9 | })
10 | export class AppComponent implements OnInit {
11 |   // toggle webcam on/off
12 |   public showWebcam = true;
13 |   public allowCameraSwitch = true;
14 |   public multipleWebcamsAvailable = false;
15 |   public deviceId: string;
16 |   public videoOptions: MediaTrackConstraints = {
17 |     // width: {ideal: 1024},
18 |     // height: {ideal: 576}
19 |   };
20 |   public errors: WebcamInitError[] = [];
21 | 
22 |   // latest snapshot
23 |   public webcamImage: WebcamImage = null;
24 | 
25 |   // webcam snapshot trigger
26 |   private trigger: Subject<void> = new Subject<void>();
27 |   // switch to next / previous / specific webcam; true/false: forward/backwards, string: deviceId
28 |   private nextWebcam: Subject<boolean|string> = new Subject<boolean|string>();
29 | 
30 |   public ngOnInit(): void {
31 |     WebcamUtil.getAvailableVideoInputs()
32 |       .then((mediaDevices: MediaDeviceInfo[]) => {
33 |         this.multipleWebcamsAvailable = mediaDevices && mediaDevices.length > 1;
34 |       });
35 |   }
36 | 
37 |   public triggerSnapshot(): void {
38 |     this.trigger.next();
39 |   }
40 | 
41 |   public toggleWebcam(): void {
42 |     this.showWebcam = !this.showWebcam;
43 |   }
44 | 
45 |   public handleInitError(error: WebcamInitError): void {
46 |     this.errors.push(error);
47 |   }
48 | 
49 |   public showNextWebcam(directionOrDeviceId: boolean|string): void {
50 |     // true => move forward through devices
51 |     // false => move backwards through devices
52 |     // string => move to device with given deviceId
53 |     this.nextWebcam.next(directionOrDeviceId);
54 |   }
55 | 
56 |   public handleImage(webcamImage: WebcamImage): void {
57 |     console.info('received webcam image', webcamImage);
58 |     this.webcamImage = webcamImage;
59 |   }
60 | 
61 |   public cameraWasSwitched(deviceId: string): void {
62 |     console.log('active device: ' + deviceId);
63 |     this.deviceId = deviceId;
64 |   }
65 | 
66 |   public get triggerObservable(): Observable<void> {
67 |     return this.trigger.asObservable();
68 |   }
69 | 
70 |   public get nextWebcamObservable(): Observable<boolean|string> {
71 |     return this.nextWebcam.asObservable();
72 |   }
73 | }
74 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
23 | 
24 | /**
25 |  * Web Animations `@angular/platform-browser/animations`
26 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 |  */
29 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
30 | 
31 | /**
32 |  * By default, zone.js will patch all possible macroTask and DomEvents
33 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
34 |  * because those flags need to be set before `zone.js` being loaded, and webpack
35 |  * will put import in the top of bundle, so user need to create a separate file
36 |  * in this directory (for example: zone-flags.ts), and put the following flags
37 |  * into that file, and then add the following code before importing zone.js.
38 |  * import './zone-flags';
39 |  *
40 |  * The flags allowed in zone-flags.ts are listed here.
41 |  *
42 |  * The following flags will work for all browsers.
43 |  *
44 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 |  * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 |  *
48 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
50 |  *
51 |  *  (window as any).__Zone_enable_cross_context_check = true;
52 |  *
53 |  */
54 | 
55 | /***************************************************************************************************
56 |  * Zone JS is required by default for Angular itself.
57 |  */
58 | import 'zone.js/dist/zone';  // Included with Angular CLI.
59 | 
60 | 
61 | /***************************************************************************************************
62 |  * APPLICATION IMPORTS
63 |  */
64 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "ngx-webcam-demo": {
  7 |       "projectType": "application",
  8 |       "schematics": {
  9 |         "@schematics/angular:component": {
 10 |           "style": "scss"
 11 |         }
 12 |       },
 13 |       "root": "",
 14 |       "sourceRoot": "src",
 15 |       "prefix": "app",
 16 |       "architect": {
 17 |         "build": {
 18 |           "builder": "@angular-devkit/build-angular:browser",
 19 |           "options": {
 20 |             "outputPath": "dist/ngx-webcam-demo",
 21 |             "index": "src/index.html",
 22 |             "main": "src/main.ts",
 23 |             "polyfills": "src/polyfills.ts",
 24 |             "tsConfig": "tsconfig.app.json",
 25 |             "aot": true,
 26 |             "assets": [
 27 |               "src/favicon.ico",
 28 |               "src/assets"
 29 |             ],
 30 |             "styles": [
 31 |               "src/styles.scss"
 32 |             ],
 33 |             "scripts": []
 34 |           },
 35 |           "configurations": {
 36 |             "production": {
 37 |               "fileReplacements": [
 38 |                 {
 39 |                   "replace": "src/environments/environment.ts",
 40 |                   "with": "src/environments/environment.prod.ts"
 41 |                 }
 42 |               ],
 43 |               "optimization": true,
 44 |               "outputHashing": "all",
 45 |               "sourceMap": false,
 46 |               "extractCss": true,
 47 |               "namedChunks": false,
 48 |               "extractLicenses": true,
 49 |               "vendorChunk": false,
 50 |               "buildOptimizer": true,
 51 |               "budgets": [
 52 |                 {
 53 |                   "type": "initial",
 54 |                   "maximumWarning": "2mb",
 55 |                   "maximumError": "5mb"
 56 |                 },
 57 |                 {
 58 |                   "type": "anyComponentStyle",
 59 |                   "maximumWarning": "6kb",
 60 |                   "maximumError": "10kb"
 61 |                 }
 62 |               ]
 63 |             }
 64 |           }
 65 |         },
 66 |         "serve": {
 67 |           "builder": "@angular-devkit/build-angular:dev-server",
 68 |           "options": {
 69 |             "browserTarget": "ngx-webcam-demo:build"
 70 |           },
 71 |           "configurations": {
 72 |             "production": {
 73 |               "browserTarget": "ngx-webcam-demo:build:production"
 74 |             }
 75 |           }
 76 |         },
 77 |         "extract-i18n": {
 78 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 79 |           "options": {
 80 |             "browserTarget": "ngx-webcam-demo:build"
 81 |           }
 82 |         },
 83 |         "test": {
 84 |           "builder": "@angular-devkit/build-angular:karma",
 85 |           "options": {
 86 |             "main": "src/test.ts",
 87 |             "polyfills": "src/polyfills.ts",
 88 |             "tsConfig": "tsconfig.spec.json",
 89 |             "karmaConfig": "karma.conf.js",
 90 |             "assets": [
 91 |               "src/favicon.ico",
 92 |               "src/assets"
 93 |             ],
 94 |             "styles": [
 95 |               "src/styles.scss"
 96 |             ],
 97 |             "scripts": []
 98 |           }
 99 |         },
100 |         "lint": {
101 |           "builder": "@angular-devkit/build-angular:tslint",
102 |           "options": {
103 |             "tsConfig": [
104 |               "tsconfig.app.json",
105 |               "tsconfig.spec.json",
106 |               "e2e/tsconfig.json"
107 |             ],
108 |             "exclude": [
109 |               "**/node_modules/**"
110 |             ]
111 |           }
112 |         },
113 |         "e2e": {
114 |           "builder": "@angular-devkit/build-angular:protractor",
115 |           "options": {
116 |             "protractorConfig": "e2e/protractor.conf.js",
117 |             "devServerTarget": "ngx-webcam-demo:serve"
118 |           },
119 |           "configurations": {
120 |             "production": {
121 |               "devServerTarget": "ngx-webcam-demo:serve:production"
122 |             }
123 |           }
124 |         }
125 |       }
126 |     }},
127 |   "defaultProject": "ngx-webcam-demo"
128 | }
129 | 


--------------------------------------------------------------------------------