Angular 2 Use Camera to Upload Picture

Utilize WebCam in Athwart simplified

It is easy to utilize an android phone to take pictures and upload. The tough part comes when it is been asked to bargain with the webcam of the laptop. The below article will simplify your difficulties and volition aid you in getting over the tough chore of integrating the webcam with your angular application. So stay tuned……….

1. Install the library via standard npm command:

npm install — relieve ngx-webcam

two. Import the WebcamModule into your Athwart module:

                      import            {WebcamModule}            from            'ngx-webcam';          @NgModule({          imports: [          WebcamModule,                      ...                    ],                      ...                    })                      export            course AppModule { }        

3. Create a Camera component

          ng 1000 c camera        

3.1 camera.component.html

          <div manner="text-marshal:heart">          <div>          <webcam [height]="500" [width]="500" [trigger]="triggerObservable" (imageCapture)="handleImage($outcome)" *ngIf="showWebcam"          [allowCameraSwitch]="allowCameraSwitch" [switchCamera]="nextWebcamObservable" [videoOptions]="videoOptions" (cameraSwitched)="cameraWasSwitched($event)"          (initError)="handleInitError($upshot)"></webcam>          <br/>          <div class="actionBtn" (click)="triggerSnapshot();" title="Take Picture">📸</div>          <div course="actionBtn" (click)="showNextWebcam(true);" title="Switch Camera">🔁</div>          </div>          </div>          <h4 *ngIf="errors.length > 0">Messages:</h4>          <ul *ngFor="let fault of errors">          <li>{{fault | json}}</li>          </ul>        

3.two camera.component.css

          .actionBtn {
            font-size: 4em;
            cursor: pointer;
}
.snapshot{
            text-align: eye;
            img{
            max-width: 800px;
            max-height: 800px;
            }
}
ul.links{
            padding-lesser: 20px;
}        

3.3 photographic camera.component.ts

          import {Component, OnInit, Output, EventEmitter} from '@angular/core';
import {Discipline} from 'rxjs/Subject';
import {Observable} from 'rxjs/Observable';
import {WebcamImage, WebcamInitError, WebcamUtil} from 'ngx-webcam';          @Component({
selector: 'app-camera',
templateUrl: './camera.component.html',
styleUrls: ['./camera.component.scss']
})          export class CameraComponent implements OnInit {          @Output()
public pictureTaken = new EventEmitter<WebcamImage>();
// toggle webcam on/off
public showWebcam = true;
public allowCameraSwitch = true;
public multipleWebcamsAvailable = false;
public deviceId: string;
public videoOptions: MediaTrackConstraints = {
// width: {platonic: 1024},
// height: {ideal: 576}
};          public errors: WebcamInitError[] = [];
// webcam snapshot trigger
private trigger: Subject area<void> = new Subject<void>();          // switch to next / previous / specific webcam; true/false: forward/backwards, string: deviceId          individual nextWebcam: Discipline<boolean|string> = new Subject<boolean|string>();          public ngOnInit(): void {
WebcamUtil.getAvailableVideoInputs()
.then((mediaDevices: MediaDeviceInfo[]) => {
this.multipleWebcamsAvailable = mediaDevices && mediaDevices.length > ane;
});
}          public triggerSnapshot(): void {
this.trigger.adjacent();
}          public toggleWebcam(): void {
this.showWebcam = !this.showWebcam;
}          public handleInitError(fault: WebcamInitError): void {
this.errors.push(error);
}          public showNextWebcam(directionOrDeviceId: boolean|cord): void {
// true => move forrad through devices
// faux => movement backwards through devices
// string => move to device with given deviceId
this.nextWebcam.adjacent(directionOrDeviceId);
}          public handleImage(webcamImage: WebcamImage): void {
console.info('received webcam epitome', webcamImage);
this.pictureTaken.emit(webcamImage);
}          public cameraWasSwitched(deviceId: string): void {
console.log('active device: ' + deviceId);
this.deviceId = deviceId;
}          public get triggerObservable(): Observable<void> {
return this.trigger.asObservable();
}          public go nextWebcamObservable(): Observable<boolean|cord> {
render this.nextWebcam.asObservable();
}
}        

Annotation:

import {Subject} from 'rxjs/Subject area';
import {Appreciable} from 'rxjs/Observable';

Note A: if the to a higher place lines do not work in import supervene upon with the below line…

import { Bailiwick, Observable } from 'rxjs';

Note B: If then besides information technology not work do check and install RXJS with below command:-

npm install rxjs

4. app.component.html

          <app-camera (pictureTaken)="handleImage($result)"></app-photographic camera>          <div course="snapshot" *ngIf="webcamImage">          <img [src]="webcamImage.imageAsDataUrl" />          </div>        

v. app.component.ts

          import {Component} from '@athwart/core';
import {Subject} from 'rxjs/Bailiwick';
import {Observable} from 'rxjs/Appreciable';
import {WebcamImage} from 'ngx-webcam';          @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})          export class AppComponent {
// latest snapshot          public webcamImage: WebcamImage = null;
handleImage(webcamImage: WebcamImage) {
this.webcamImage = webcamImage;
}
}        

And by this, you are done with your project of using a webcam in an angular project ……………… for more than details about the options refer below…..

All the knowledge courtesy goes to the below links which helped me to make my project and at present I am able to share with you lot people:-

1. Click

2. Click

Options and Events

This section describes the bones inputs/outputs of the component. All inputs are optional.

Inputs

• trigger: Observable<void>: An Appreciable to trigger image capturing. When it fires, an image volition be captured and emitted (run into Outputs).
• width: number: The maximal video width of the webcam alive view.
• height: number: The maximal video pinnacle of the webcam live view. The bodily view will be placed within these boundaries, respecting the attribute ratio of the video stream.
• videoOptions: MediaTrackConstraints: Defines constraints (MediaTrackConstraints) to apply when requesting the video track.
• mirrorImage: string | WebcamMirrorProperties: Flag to command image mirroring. If the attribute is missing or cypher and a webcam claims to be user-facing, the image volition be mirrored (10-axis) to provide a ameliorate user experience. A string value of "never" will forbid mirroring, whereas a value of "always" will mirror every webcam stream, even if the webcam cannot exist detected as user-facing. For future extensions, the WebcamMirrorProperties object can also be used to prepare these values.
• allowCameraSwitch: boolean: Flag to enable/disable camera switch. If enabled, a switch icon will be displayed if multiple cameras are found.
• switchCamera: Observable<boolean|string>: Tin can be used to cycle through available cameras (true=forrard, false=backwards), or to switch to a specific device by deviceId (string).
• captureImageData: boolean = faux: Flag to enable/disable capturing of a lossless pixel ImageData object when a snapshot is taken. ImageData will be included in the emitted WebcamImage object.
• imageType: string = 'epitome/jpeg': Image blazon to use when capturing snapshots. Default is 'epitome/jpeg'.
• imageQuality: number = 0.92: Image quality to use when capturing snapshots. Must be a number between 0..ane. Default is 0.92.

Outputs

• imageCapture: EventEmitter<WebcamImage>: Whenever an image is captured (i.due east. triggered by [trigger]), the image is emitted via this EventEmitter. The paradigm information is contained in the WebcamImage information structure as both, manifestly Base64 string and data-url.
• imageClick: EventEmitter<void>: An EventEmitter to signal clicks on the webcam surface area.
• initError: EventEmitter<WebcamInitError>: An EventEmitter to signal errors during the webcam initialization.
• cameraSwitched: EventEmitter<string>: Emits the active deviceId after the active video device has been switched.

rutherfordrestroulner62.blogspot.com

Source: https://medium.com/@coolchoudharyvijay/use-webcam-in-angular-simplified-c1ee012e875f

Share this post