Open cmera and upload images

Open camera 


import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild("video")
    public video: ElementRef;

    @ViewChild("canvas")
    public canvas: ElementRef;

    public captures: Array<any>;

    public constructor() {
        this.captures = [];
    }

    public ngOnInit() {
        this.captures;
    }

    public ngAfterViewInit() {
    }
    start() {
        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();
            });
        }
    }
    stop() {
        this.video.nativeElement.src = "";
        this.video.nativeElement.stop();
    }

    delete() {
        for (var i = 0; i < this.captures.length; i++)
            this.captures.splice(i, 1);
    }

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

}
//-----------------------------------------------------------------

  <div class="start_wrapper" (click)="start()"> Start </div>
  <div class="start_wrapper" (click)="stop()"> Close </div>
  

<div id="app">
  <div><video #video id="video" width="640" height="480" autoplay></video></div>
  <div class="start_wrapper"id="snap" (click)="capture()"> Capture </div>

  <div class="start_wrapper"id="snap" (click)="delete()"> Delete </div>

  <canvas #canvas id="canvas" width="300px" height="300px"></canvas>
  <ul>
      <li *ngFor="let c of captures">
          <img src="{{ c }}" height="200" />
      </li>
  </ul>
</div>

//-------------------------------------




Comments

Popular Posts