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>
//-------------------------------------
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
Post a Comment