Artem Halushko
6 years ago
13 changed files with 842 additions and 195 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,74 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2020 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<div fxLayout="column" fxLayoutAlign="center center" class="tb-web-camera" tb-fullscreen [fullscreen]="isShowCamera"> |
|||
<div [fxShow]="isEntityDetected && dataKeyDetected && isCameraSupport && isDeviceDetect" fxFlexFill> |
|||
<div [fxShow]="!isShowCamera" fxLayout="column" fxLayoutAlign="space-between center" fxFlexFill> |
|||
<div class="tb-web-camera__last-photo" fxFlex> |
|||
<span [fxShow]="!lastPhoto" class="tb-web-camera__last-photo_text" translate>widgets.input-widgets.no-image</span> |
|||
<img [fxShow]="lastPhoto" class="tb-web-camera__last-photo_img" [src]="lastPhoto" alt="last photo"/> |
|||
</div> |
|||
<button mat-raised-button color="primary" (click)="takePhoto()"> |
|||
{{ "widgets.input-widgets.take-photo" | translate }} |
|||
</button> |
|||
</div> |
|||
<div [fxShow]="isShowCamera" fxLayout="column" fxLayoutAlign="center center" class="camera-container"> |
|||
<div class="camera" [fxShow]="!isPreviewPhoto"> |
|||
<video autoplay muted playsinline class="camera-stream" #videoStream></video> |
|||
<div class="camera-controls" fxLayout="row wrap" fxLayoutAlign="space-between end"> |
|||
<div fxFlex></div> |
|||
<button mat-mini-fab color="primary" (click)="switchWebCamera()" [disabled]="singleDevice"> |
|||
<mat-icon>switch_camera</mat-icon> |
|||
</button> |
|||
<button mat-fab color="accent" (click)="createPhoto()"> |
|||
<mat-icon>photo_camera</mat-icon> |
|||
</button> |
|||
<button mat-mini-fab color="primary" (click)="closeCamera()"> |
|||
<mat-icon>close</mat-icon> |
|||
</button> |
|||
<div fxFlex></div> |
|||
</div> |
|||
</div> |
|||
<div class="camera" [fxShow]="isPreviewPhoto"> |
|||
<img alt="preview photo" class="camera-stream" [src]="previewPhoto"> |
|||
<canvas #canvas style="display:none;"></canvas> |
|||
<div class="camera-controls" fxLayout="row" fxLayoutAlign="space-between end"> |
|||
<div fxFlex></div> |
|||
<button mat-fab color="primary" [disabled]="updatePhoto" (click)="cancelPhoto()"> |
|||
<mat-icon>close</mat-icon> |
|||
</button> |
|||
<button mat-fab color="accent" [disabled]="updatePhoto" (click)="savePhoto()"> |
|||
<mat-icon>check</mat-icon> |
|||
</button> |
|||
<div fxFlex></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="message-text" [fxHide]="isEntityDetected"> |
|||
{{ 'widgets.input-widgets.no-entity-selected' | translate }} |
|||
</div> |
|||
<div class="message-text" [fxShow]="isEntityDetected && !dataKeyDetected"> |
|||
{{ 'widgets.input-widgets.no-datakey-selected' | translate }} |
|||
</div> |
|||
<div class="message-text" [fxShow]="isEntityDetected && dataKeyDetected && !isCameraSupport"> |
|||
{{ 'widgets.input-widgets.no-support-web-camera' | translate }} |
|||
</div> |
|||
<div class="message-text" [fxShow]="isEntityDetected && dataKeyDetected && isCameraSupport && !isDeviceDetect"> |
|||
{{ 'widgets.input-widgets.no-support-web-camera' | translate }} |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,74 @@ |
|||
/** |
|||
* Copyright © 2016-2020 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
.tb-web-camera { |
|||
height: 100%; |
|||
|
|||
&__last-photo { |
|||
width: 100%; |
|||
margin: 5px 0; |
|||
text-align: center; |
|||
border: solid 1px; |
|||
|
|||
&_text { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
margin-top: -.625em; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
|
|||
&_img { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: contain; |
|||
} |
|||
} |
|||
|
|||
.camera-container{ |
|||
height: 100%; |
|||
} |
|||
|
|||
.camera { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
|
|||
.camera-stream { |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: contain; |
|||
} |
|||
|
|||
.camera-controls { |
|||
position: absolute; |
|||
bottom: 0; |
|||
width: 100%; |
|||
padding: 0 5px 5px; |
|||
|
|||
.mat-button-base{ |
|||
margin: 6px 8px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.message-text { |
|||
font-size: 18px; |
|||
color: #a0a0a0; |
|||
text-align: center; |
|||
} |
|||
} |
|||
@ -0,0 +1,274 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { |
|||
Component, |
|||
ElementRef, |
|||
Inject, |
|||
Input, |
|||
NgZone, |
|||
OnDestroy, |
|||
OnInit, |
|||
ViewChild, |
|||
ViewEncapsulation |
|||
} from '@angular/core'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { WidgetContext } from '@home/models/widget-component.models'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { Overlay } from '@angular/cdk/overlay'; |
|||
import { UtilsService } from '@core/services/utils.service'; |
|||
import { Datasource, DatasourceData, DatasourceType } from '@shared/models/widget.models'; |
|||
import { WINDOW } from '@core/services/window.service'; |
|||
import { AttributeService } from '@core/http/attribute.service'; |
|||
import { EntityId } from '@shared/models/id/entity-id'; |
|||
import { AttributeScope, DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
|||
import { Observable } from 'rxjs'; |
|||
|
|||
interface WebCameraInputWidgetSettings { |
|||
widgetTitle: string; |
|||
imageQuality: number; |
|||
imageFormat: string; |
|||
maxWidth: number; |
|||
maxHeight: number; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-web-camera-widget', |
|||
templateUrl: './web-camera-input.component.html', |
|||
styleUrls: ['./web-camera-input.component.scss'], |
|||
encapsulation: ViewEncapsulation.None |
|||
}) |
|||
export class WebCameraInputWidgetComponent extends PageComponent implements OnInit, OnDestroy { |
|||
|
|||
constructor(@Inject(WINDOW) private window: Window, |
|||
protected store: Store<AppState>, |
|||
private elementRef: ElementRef, |
|||
private ngZone: NgZone, |
|||
private overlay: Overlay, |
|||
private utils: UtilsService, |
|||
private attributeService: AttributeService, |
|||
) { |
|||
super(store); |
|||
} |
|||
|
|||
public get videoElement() { |
|||
return this.videoStreamRef.nativeElement; |
|||
} |
|||
|
|||
public get canvasElement() { |
|||
return this.canvasRef.nativeElement; |
|||
} |
|||
|
|||
public get videoWidth() { |
|||
const videoRatio = this.getVideoAspectRatio(); |
|||
return Math.min(this.width, this.height * videoRatio); |
|||
} |
|||
|
|||
public get videoHeight() { |
|||
const videoRatio = this.getVideoAspectRatio(); |
|||
return Math.min(this.height, this.width / videoRatio); |
|||
} |
|||
|
|||
private static DEFAULT_IMAGE_TYPE = 'image/jpeg'; |
|||
private static DEFAULT_IMAGE_QUALITY = 0.92; |
|||
|
|||
@Input() |
|||
ctx: WidgetContext; |
|||
|
|||
@ViewChild('videoStream', {static: true}) videoStreamRef: ElementRef<HTMLVideoElement>; |
|||
@ViewChild('canvas', {static: true}) canvasRef: ElementRef<HTMLCanvasElement>; |
|||
|
|||
private videoInputsIndex = 0; |
|||
private settings: WebCameraInputWidgetSettings; |
|||
private datasource: Datasource; |
|||
private width = 640; |
|||
private height = 480; |
|||
private availableVideoInputs: MediaDeviceInfo[]; |
|||
private mediaStream: MediaStream; |
|||
|
|||
isEntityDetected = false; |
|||
dataKeyDetected = false; |
|||
isCameraSupport = false; |
|||
isDeviceDetect = false; |
|||
isShowCamera = false; |
|||
isPreviewPhoto = false; |
|||
singleDevice = true; |
|||
updatePhoto = false; |
|||
previewPhoto: any; |
|||
lastPhoto: any; |
|||
|
|||
private static hasGetUserMedia(): boolean { |
|||
return !!(window.navigator.mediaDevices && window.navigator.mediaDevices.getUserMedia); |
|||
} |
|||
|
|||
private static getAvailableVideoInputs(): Promise<MediaDeviceInfo[]> { |
|||
return new Promise((resolve, reject) => { |
|||
navigator.mediaDevices.enumerateDevices() |
|||
.then((devices: MediaDeviceInfo[]) => { |
|||
resolve(devices.filter((device: MediaDeviceInfo) => device.kind === 'videoinput')); |
|||
}) |
|||
.catch(err => { |
|||
reject(err.message || err); |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.ctx.$scope.webCameraInputWidget = this; |
|||
this.settings = this.ctx.settings; |
|||
this.datasource = this.ctx.datasources[0]; |
|||
|
|||
if (this.settings.widgetTitle && this.settings.widgetTitle.length) { |
|||
this.ctx.widgetTitle = this.utils.customTranslation(this.settings.widgetTitle, this.settings.widgetTitle); |
|||
} else { |
|||
this.ctx.widgetTitle = this.ctx.widgetConfig.title; |
|||
} |
|||
|
|||
this.width = this.settings.maxWidth ? this.settings.maxWidth : 640; |
|||
this.height = this.settings.maxHeight ? this.settings.maxWidth : 480; |
|||
|
|||
if (this.datasource.type === DatasourceType.entity) { |
|||
if (this.datasource.entityType && this.datasource.entityId) { |
|||
this.isEntityDetected = true; |
|||
} |
|||
} |
|||
if (this.datasource.dataKeys.length) { |
|||
this.dataKeyDetected = true; |
|||
} |
|||
this.detectAvailableDevices(); |
|||
} |
|||
|
|||
ngOnDestroy(): void { |
|||
this.stopMediaTracks(); |
|||
} |
|||
|
|||
private updateWidgetData(data: Array<DatasourceData>) { |
|||
const keyData = data[0].data; |
|||
if (keyData && keyData.length) { |
|||
this.lastPhoto = keyData[0][1]; |
|||
} |
|||
} |
|||
|
|||
public onDataUpdated() { |
|||
this.ngZone.run(() => { |
|||
this.updateWidgetData(this.ctx.defaultSubscription.data); |
|||
this.ctx.detectChanges(); |
|||
}); |
|||
} |
|||
|
|||
|
|||
private detectAvailableDevices(): void { |
|||
if (WebCameraInputWidgetComponent.hasGetUserMedia()) { |
|||
this.isCameraSupport = true; |
|||
WebCameraInputWidgetComponent.getAvailableVideoInputs().then((devices) => { |
|||
this.isDeviceDetect = !!devices.length; |
|||
this.singleDevice = devices.length < 2; |
|||
this.availableVideoInputs = devices; |
|||
this.ctx.detectChanges(); |
|||
}, () => { |
|||
this.availableVideoInputs = []; |
|||
} |
|||
) |
|||
} |
|||
} |
|||
|
|||
private getVideoAspectRatio(): number { |
|||
if (this.videoElement.videoWidth && this.videoElement.videoWidth > 0 && |
|||
this.videoElement.videoHeight && this.videoElement.videoHeight > 0) { |
|||
return this.videoElement.videoWidth / this.videoElement.videoHeight; |
|||
} |
|||
return this.width / this.height; |
|||
} |
|||
|
|||
private stopMediaTracks() { |
|||
if (this.mediaStream && this.mediaStream.getTracks) { |
|||
this.mediaStream.getTracks() |
|||
.forEach((track: MediaStreamTrack) => track.stop()); |
|||
} |
|||
} |
|||
|
|||
takePhoto() { |
|||
this.isShowCamera = true; |
|||
this.initWebCamera(this.availableVideoInputs[this.videoInputsIndex].deviceId); |
|||
} |
|||
|
|||
closeCamera() { |
|||
this.stopMediaTracks(); |
|||
this.videoElement.srcObject = null; |
|||
this.isShowCamera = false; |
|||
} |
|||
|
|||
cancelPhoto() { |
|||
this.isPreviewPhoto = false; |
|||
this.previewPhoto = ''; |
|||
} |
|||
|
|||
savePhoto() { |
|||
this.updatePhoto = true; |
|||
let task: Observable<any>; |
|||
const entityId: EntityId = { |
|||
entityType: this.datasource.entityType, |
|||
id: this.datasource.entityId |
|||
}; |
|||
const saveData = [{ |
|||
key: this.datasource.dataKeys[0].name, |
|||
value: this.previewPhoto |
|||
}]; |
|||
if (this.datasource.dataKeys[0].type === DataKeyType.attribute) { |
|||
task = this.attributeService.saveEntityAttributes(entityId, AttributeScope.SERVER_SCOPE, saveData); |
|||
} else if (this.datasource.dataKeys[0].type === DataKeyType.timeseries) { |
|||
task = this.attributeService.saveEntityTimeseries(entityId, 'scope', saveData); |
|||
} |
|||
task.subscribe(() => { |
|||
this.isPreviewPhoto = false; |
|||
this.updatePhoto = false; |
|||
this.closeCamera(); |
|||
}, () => { |
|||
this.updatePhoto = false; |
|||
}) |
|||
} |
|||
|
|||
switchWebCamera() { |
|||
this.videoInputsIndex = (this.videoInputsIndex + 1) % this.availableVideoInputs.length; |
|||
this.stopMediaTracks(); |
|||
this.initWebCamera(this.availableVideoInputs[this.videoInputsIndex].deviceId) |
|||
} |
|||
|
|||
createPhoto() { |
|||
this.canvasElement.width = this.videoWidth; |
|||
this.canvasElement.height = this.videoHeight; |
|||
this.canvasElement.getContext('2d').drawImage(this.videoElement, 0, 0, this.videoWidth, this.videoHeight); |
|||
|
|||
const mimeType: string = this.settings.imageFormat ? this.settings.imageFormat : WebCameraInputWidgetComponent.DEFAULT_IMAGE_TYPE; |
|||
const quality: number = this.settings.imageQuality ? this.settings.imageQuality : WebCameraInputWidgetComponent.DEFAULT_IMAGE_QUALITY; |
|||
this.previewPhoto = this.canvasElement.toDataURL(mimeType, quality); |
|||
this.isPreviewPhoto = true; |
|||
} |
|||
|
|||
private initWebCamera(deviceId?: string) { |
|||
if (window.navigator.mediaDevices && window.navigator.mediaDevices.getUserMedia) { |
|||
const videoTrackConstraints = { |
|||
video: {deviceId: deviceId !== '' ? {exact: deviceId} : undefined} |
|||
}; |
|||
|
|||
window.navigator.mediaDevices.getUserMedia(videoTrackConstraints).then((stream: MediaStream) => { |
|||
this.mediaStream = stream; |
|||
this.videoElement.srcObject = stream; |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue