이번에는 WebCAM stream을 Capture하는 방법을 살펴보도록 하겠습니다.
일단 app.component.html에 캡쳐버튼과 캡쳐된 내용이 표시될 <canvas> 태그를 만들어 줍니다.
먼저 캡쳐버튼을 만들어 보도록하겠습니다.
<div class="ui container">
<h2 class="ui center aligned icon header">
<img class="ui image" src="./assets/img/electron_icon.png">
<div class="content">
{{title}}
<div class="sub header">{{subTitle}}</div>
</div>
</h2>
<video #camera class="ui fluid" autoplay> </video>
<!-- 이 부분을 추가해 줍니다. -->
<button id="btn_photo" class="ui fluid button" (click)="takePhoto()">
<i class="icon photo"></i>
Take a Photo!
</button>
<canvas #myCanvas class="ui fluid" width="640" height="480"></canvas>
</div>
#camera{
transform: scaleX(-1);
}
.fluid {
margin-bottom: 20px;
width: 100%;
}
이와 같이 잘 따라오셨다면 아래와 같은 화면이 나오게됩니다.
다음은 캡처버튼이 클릭되었을 때 캡쳐된 내용을 <canvas> 태그에 표시하는 작업을 해보겠습니다.
먼저 app.component.ts를 열어서 canvas와 canvas의 내용이 들어갈 ctx를 멤버 변수로 선언해줍니다. 그 다음 데이터가 들어갈 수 있도록 아래와 같은 작업을 해줍니다.
...
export class AppComponent implements AfterViewInit {
private title = 'Electron with Angular2';
private subTitle = 'This app was made for Electron Angular Example';
@ViewChild('camera') video;
@ViewChild('myCanvas') canvas;
private ctx;
ngAfterViewInit() {
const _video = this.video.nativeElement;
// canvas 초기화
const _canvas = this.canvas.nativeElement;
// ctx 초기화
this.ctx = this.canvas.getContext('2d');
// ctx 좌우 반전
this.ctx.translate(this.canvas.width, 0);
this.ctx.scale(-1, 1);
navigator.getUserMedia({video: true, audio: false},
(stream) => {
_video.srcObject = stream;
},
(error) => {
console.log('Error' + error);
}
);
}
// btn_photo에 바인딩할 takePhoto() 함수 정의하기
takePhoto = () => {
const _video = this.video.nativeElement;
const _canvas = this.canvas.nativeElement;
// 캡쳐된 화면 그리기
this.ctx.drawImage(_video, 0, 0, _canvas.width, _canvas.height);
}
...
Electron은 기본적으로 Notification을 지원합니다.
만드는 방법은 간단합니다.
new Notification('title', {body: 'message'});
이제 btn_photo가 눌릴 경우 Notification을 띄워보도록 하겠습니다.
...
takePhoto = () => {
const _video = this.video.nativeElement;
const _canvas = this.canvas.nativeElement;
this.ctx.drawImage(_video, 0, 0, _canvas.width, _canvas.height);
new Notification('캡쳐 완료', {body: '캡쳐가 완료되었습니다.'});
}
이제 btn_photo를 누를 경우에 아래와 같은 Notification이 뜨는 것을 확인할 수 있습니다.
