如何在Ionic/Angular中流式传输设备摄像头并将其与tensorflowjs一起使用以进行面部识别?

Question

我正在尝试使用IOS/Android的设备相机。我希望获取视频流并将其传递给张量流并检测人脸。我已经使用python + opencv + tensorflow在Windows中实现了这一目标。现在我想使用ionic/Angular为ios/android实现相同的目标。关于如何实现这一目标的任何建议？

terminal.page.ts：

async detectFromVideo(video) {
const results = await this.detect(video);
const canvas = this.canvas.nativeElement;
this.canvas.nativeElement.width = this.video.nativeElement.videoWidth;
this.canvas.nativeElement.height = this.video.nativeElement.videoHeight;
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(video, 0, 0);
for (const bboxInfo of results) {
const bbox = bboxInfo[0];
const classID = bboxInfo[1];
const score = bboxInfo[2];
ctx.beginPath();
ctx.lineWidth = '4';
if (classID === 0) {
ctx.strokeStyle = 'green';
ctx.fillStyle = 'green';
} else {
ctx.strokeStyle = 'red';
ctx.fillStyle = 'red';
}
ctx.rect(bbox[0], bbox[1], bbox[2] - bbox[0], bbox[3] - bbox[1]);
ctx.stroke();
ctx.font = '30px Arial';
const content = this.id2class[classID] + ' ' + score.toFixed(2);
ctx.fillText(content, bbox[0], bbox[1] < 20 ? bbox[1] + 30 : bbox[1] - 5);
}
requestAnimationFrame(() => {
this.detectFromVideo(video);
});
}

终端页面.html：

<ion-header>
<ion-toolbar>
<ion-title>Terminal Page</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-grid >
<ion-row>
<ion-col size="12" class="ion-text-center">
<ion-icon color="success" name="thermometer-outline"></ion-icon>
<span>35 F/C</span>
</ion-col>
</ion-row>
</ion-grid>
<ion-card class="">
<ion-card-content class="card-success">
<img [src]="currentImage">
</ion-card-content>
<ion-button (click)="takeSnap()">Snapshot</ion-button>
</ion-card>
</ion-content>

Answer 1

通过使用interval(1)每毫秒捕获一次视频，这意味着60000帧/秒。这是很多。视频通常在 20 帧/秒左右。

要每秒捕获：

interval(1000)

与其设置捕获帧的硬编码时间间隔，不如使用requestAnimationFrame以便浏览器可以在准备就绪时捕获帧。

ngOnInit() {
...
takeSnap()
}
takeSnap() {
this.cameraPreview.takeSnapshot({quality: 85}).then((data) => {
this.currentImage = 'data:image/jpeg;base64,' + data;
requestAnimationFrame(takeSnap)
});
}
}