Web ClientはブラウザさえあればOSを選ばないのですが折角なのでカメラ制御を行ってみます。
今回はMagic xpa 4.81で構築です。
内容は
① カメラで静止画を撮る
② BlobURL形式のデータを取得しMagicのBlob型の変数に代入
③ 「みえないボタン」をクリック。Magic側のイベントを動かす
こんな感じです＾－＾。
プログラム名とかを合わせるとコピペで行けるように作ります。
動作はLocalhostかSSLのみで動きます。httpでは動きませんので注意が必要です。
あと、TypeScriptの内容は説明いたしません。まずはコピペ。
Web Client プログラム名(大文字小文字関係あります)
Camera
必要変数
項目 BlobData BLOB 内容 ANSI
ボタン V_Shutter A20
両方ともフォームに貼り付けます。
Blob型は直接貼れないので、エディットコントロールを貼り付けたのちBlobDataを設定します。
ロジック
とりあえず警告でも出しておきましょ。
Magicはこれだけ。
あとはAngularコードを出力してください。
あとはコピペしてプログラムを入れ替えてください
Camera.component.html
<divnovalidate[formGroup]="screenFormGroup">
<style>
#video {
position: absolute;
z-index: 10;
}
#frame {
position: absolute;
z-index: 20;
}
#canvas {
height: 225px;
}
video {
width: 300px;
;
}
</style>
<div[magic]="mgc.Camera"class="container-fluid">
<div>
<videoid="video"#videoautoplayplaysinline></video>
<canvasid="frame"#frame></canvas>
</div>
<divclass="input-group"style="margin-top: 260px;">
<inputclass="form-control"[formControlName]="mgc.BlobData"[magic]="mgc.BlobData"
[placeholder]="mg.getPlaceholder(mgc.BlobData)"/>
<mgError[magic]=mgc.BlobData></mgError>
<buttonclass="btn btn-primary"(click)="SHUTTER()"> Shutter
</button>
</div>
<hr>
<div>
<canvasid="canvas"#canvas></canvas>
</div>
</div>
</div>
Camera.component.ts
import { Component } from'@angular/core';
import { FormGroup } from"@angular/forms";
import { MgFormControlsAccessor, MgControlName, MgCustomProperties } from"./Camera.mg.controls.g";
import { TaskBaseMagicComponent, magicProviders } from"@magic-xpa/angular";
import {
MagicServices, // Add
} from'@magic-xpa/angular';
import {
ChangeDetectorRef, // Add
ViewContainerRef,
} from'@angular/core';
import {
ElementRef,
ViewChild
} from'@angular/core';
@Component({
selector:'mga-Camera',
providers: [...magicProviders],
templateUrl:'./Camera.component.html'
})
exportclassCameraextendsTaskBaseMagicComponent {
mgc = MgControlName;
mgcp = MgCustomProperties;
mgfc!: MgFormControlsAccessor;
constructor(
ref: ChangeDetectorRef,
magicServices: MagicServices,
protectedvcRef: ViewContainerRef,) {
super(ref, magicServices);
}
overridecreateFormControlsAccessor(formGroup: FormGroup) {
this.mgfc = newMgFormControlsAccessor(formGroup, this.magicServices);
}
@ViewChild('video', { 'static':true }) videoElm: ElementRef;
@ViewChild('frame', { 'static':true }) frameElm: ElementRef;
@ViewChild('canvas', { 'static':true }) canvasElm: ElementRef;
readonlymedias: MediaStreamConstraints = {
audio:false, video: {
width:200,
height:150,
}
};
overridengOnInit() {
constframectx = this.frameElm.nativeElement.getContext('2d') asCanvasRenderingContext2D;
this.task.initTask(this.taskIdParam, this.taskDescription);
window.navigator.mediaDevices.getUserMedia(this.medias)
.then(stream=>this.videoElm.nativeElement.srcObject = stream)
.catch(error=> {
console.error(error);
alert(error);
});
}
SHUTTER = () => {
vartype = 'image/jpeg';
constctx = this.canvasElm.nativeElement.getContext('2d') asCanvasRenderingContext2D;
varcaptureData = this.canvasElm.nativeElement.toDataURL(ctx.drawImage(this.videoElm.nativeElement, 0, 0, 300, 225, 0, 0, 300, 225));
varbin = atob(captureData.split(',')[1]);
varbuffer = newUint8Array(bin.length);
for (vari = 0; i<bin.length; i++) {
buffer[i] = bin.charCodeAt(i);
}
varblob = newBlob([buffer.buffer], { type:type });
varreader = newFileReader();
reader.readAsDataURL(blob);
constme = this;
reader.onloadend = function () {
varbase64data = reader.result;
constj = blob.type.length;
constnum = 5 + j + 8;
me.mg.setValueToControl(me.mgc.BlobData, base64data.slice(num));
me.mg.simulateClick(me.mgc.V_Shutter);
}
}
}
これでShutterボタンをおすと「みえないV_Shutterボタンを押すので」Magicのイベントが動きます。
BlobDataの中にはBlobUrlデータが入っているので
Blb2File(BlobFromBase64(BlobUrlの中身),ファイルパス)
で、実ファイルにしてサーバーに保存することができます。
ね？簡単でしょ？
で、なぜ最初に「カメラ制御」を選択したかというととても幅が広がるのです。
顔認識AIと絡めて顔認証ログインやOCR、バーコード読み取りなどこの「カメラ制御」を最初に行ってあとはJPEGをどうするかという分岐にたつのです。
ぜひカメラ制御で遊んでみてください＾－＾。
「こんなサンプルどう？」ってのがありましたら是非リクエストくださいね！
コメント
0件のコメント
サインインしてコメントを残してください。