Capture the Image From Webcam and Upload Image Angular

Vue.js is a very popular JavaScript framework, but it isn't the just framework bachelor for creating web applications. I am a huge advocate of Angular, and then it made sense to try to accomplish this with Athwart.

We're going to see how to create a web application with Angular and TypeScript that captures webcam photos directly from inside the spider web browser.

Creating an Angular Web Application with the Angular CLI

To proceed things simple and piece of cake to understand, we're going to create a fresh Angular projection. There are enough of methods for accomplishing this, but nosotros're going to utilize the Athwart CLI.

With the Angular CLI installed, execute the following:

            ng new ngx-photographic camera-project                      

We don't need whatever extra dependencies.

Developing the TypeScript Logic and HTML UI for Capturing Images in the Web Browser

Nosotros know that the goal of this project will be to capture images from the webcam, but what exactly will we be doing?

In the above screenshot, you'll see that nosotros have a big image followed by a button and followed past several smaller images. The big image is a live stream from the webcam while the smaller images are previously captured frames from the webcam stream.

So how do nosotros make this possible?

Inside the new Angular project, open the project'south src/app/app.component.html file and include the following:

            <div id="app">     <div><video #video id="video" width="640" height="480" autoplay></video></div>     <div><button id="snap" (click)="capture()">Snap Photograph</push button></div>     <canvass #canvas id="canvass" width="640" meridian="480"></canvas>     <ul>         <li *ngFor="let c of captures">             <img src="{{ c }}" height="50" />         </li>     </ul> </div>                      

There isn't a lot of HTML here, but we need to understand what is happening.

Take observe of the <video> and <canvas> tags. Each element has a local variable denoted by a # symbol. In other words, at that place is a #video and a #sail variable. This is how we'll be able to access the elements from within our TypeScript.

The <push> element has a click event that volition telephone call a capture method from within our TypeScript.

            <ul>     <li *ngFor="let c of captures">         <img src="{{ c }}" meridian="50" />     </li> </ul>                      

Finally, nosotros have a listing. Looking into the hereafter for a moment, we're going to have a variable called captures which holds each of our captured images. In the HTML, we are going to loop through this array and render them on the screen.

Now permit's have a look at the TypeScript logic that goes with the HTML markup. Open the project's src/app/app.component.ts file and include the following TypeScript code:

            import { Component, OnInit, ViewChild, ElementRef } from '@athwart/cadre';  @Component({     selector: 'app-root',     templateUrl: './app.component.html',     styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit {      @ViewChild("video")     public video: ElementRef;      @ViewChild("canvas")     public canvas: ElementRef;      public captures: Array<any>;      public constructor() {         this.captures = [];     }      public ngOnInit() { }      public ngAfterViewInit() {         if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {             navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {                 this.video.nativeElement.src = window.URL.createObjectURL(stream);                 this.video.nativeElement.play();             });         }     }      public capture() {         var context = this.canvass.nativeElement.getContext("2d").drawImage(this.video.nativeElement, 0, 0, 640, 480);         this.captures.push(this.canvas.nativeElement.toDataURL("image/png"));     }  }                      

A lot is happening in the to a higher place TypeScript code, and then nosotros're going to break information technology down.

Starting with the variables of our AppComponent grade:

            @ViewChild("video") public video: ElementRef;  @ViewChild("sheet") public canvas: ElementRef;  public captures: Array<any>;                      

Think those local variables from the HTML? By using @ViewChild with the variable proper name, nosotros tin load the elements into the variable that follows. This will allow u.s.a. to manipulate these DOM elements.

            public ngAfterViewInit() {     if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {         navigator.mediaDevices.getUserMedia({ video: truthful }).then(stream => {             this.video.nativeElement.src = window.URL.createObjectURL(stream);             this.video.nativeElement.play();         });     } }                      

When we're certain that the view elements have initialized, we can do some tasks via the ngAfterViewInit method. Substantially, nosotros're asking for permission to use the webcam, and nosotros're showing the stream from the webcam in the <video> element.

To give credit where credit is deserved, much of the logic in the ngAfterViewInit was taken from an article by David Walsh titled, Camera and Video Command with HTML5. We've merely gone ahead and made it Angular friendly.

When we want to capture an prototype, we tin can telephone call the capture method:

            public capture() {     var context = this.canvas.nativeElement.getContext("2d").drawImage(this.video.nativeElement, 0, 0, 640, 480);     this.captures.push(this.sheet.nativeElement.toDataURL("epitome/png")); }                      

The capture method will apply the canvas to capture a frame from the video stream and add it to the captures array.

There are a few improvements we tin can brand to our project. For case, it isn't particularly necessary to display the canvass on the screen. Allow'due south make some CSS adjustments to make our project a little more attractive.

Open the project'south src/app/app.component.css file and include the following:

            body {     background-color: #F0F0F0; } #app {     text-align: heart;     colour: #2c3e50;     margin-height: 60px; } #video {     groundwork-color: #000000; } #canvas {     brandish: none; } li {     display: inline;     padding: 5px; }                      

Everything should wait and piece of work pretty well at this point. You can take snapshots from the webcam and do whatever you'd similar with them.

Conclusion

You just saw how to utilise Angular to capture images from the webcam using a spider web browser. In Angular, yous admission DOM elements via local variables and the @ViewChild reference.

The base64 encoded image data captured can easily be used to ship to a remote web service and saved within a database. In that location are plenty of other use cases to practice with the data as well.

milleraftecte75.blogspot.com

Source: https://x-team.com/blog/webcam-image-capture-angular/

Share this post