diff --git a/ui-ngx/package-lock.json b/ui-ngx/package-lock.json index 443b1e5999..dba45b6c63 100644 --- a/ui-ngx/package-lock.json +++ b/ui-ngx/package-lock.json @@ -8044,6 +8044,11 @@ "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.6.0.tgz", "integrity": "sha512-CPkhyqWUKZKFJ6K8umN5/D2wrJ2+/8UIpXppY7QDnUZW5bZL5+SEI2J7GBpwh4LIupOKqbNSQXgqmrEJopHVNQ==" }, + "leaflet-editable": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/leaflet-editable/-/leaflet-editable-1.2.0.tgz", + "integrity": "sha512-wG11JwpL8zqIbypTop6xCRGagMuWw68ihYu4uqrqc5Ep0wnEJeyob7NB2Rt5t74Oih4rwJ3OfwaGbzdowOGfYQ==" + }, "leaflet-polylinedecorator": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/leaflet-polylinedecorator/-/leaflet-polylinedecorator-1.6.0.tgz", @@ -9021,10 +9026,10 @@ "integrity": "sha512-4O3GWAYJaauMCILm07weko2rHA8a4kjn7+8Lg4s1d7SxwS/3IpkVD/GljbRrIJ1c1W/XGJ3GbuK7RyYZEJChhw==" }, "ngx-flowchart": { - "version": "git://github.com/thingsboard/ngx-flowchart.git#97a77477ca8579becf0e3a07866046b4536fe30a", + "version": "git://github.com/thingsboard/ngx-flowchart.git#7a02f4748b5e7821a883c903107af5f20415d026", "from": "git://github.com/thingsboard/ngx-flowchart.git#master", "requires": { - "tslib": "^1.10.0" + "tslib": "^1.13.0" }, "dependencies": { "tslib": { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/web-camera-input.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/web-camera-input.component.html index e0caedafd0..c02ebfdcb0 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/web-camera-input.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/web-camera-input.component.html @@ -16,11 +16,11 @@ -->
-
+
widgets.input-widgets.no-image - last photo + last photo
-
+
{{ 'widgets.input-widgets.no-entity-selected' | translate }}
-
+
{{ 'widgets.input-widgets.no-datakey-selected' | translate }}
-
+
{{ 'widgets.input-widgets.no-support-web-camera' | translate }}
-
+
{{ 'widgets.input-widgets.no-support-web-camera' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/web-camera-input.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/web-camera-input.component.ts index 92ba6e43d9..ee92ee8fe0 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/web-camera-input.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/web-camera-input.component.ts @@ -37,6 +37,8 @@ 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'; +import { isString } from '@core/utils'; +import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; interface WebCameraInputWidgetSettings { widgetTitle: string; @@ -62,6 +64,7 @@ export class WebCameraInputWidgetComponent extends PageComponent implements OnIn private overlay: Overlay, private utils: UtilsService, private attributeService: AttributeService, + private sanitizer: DomSanitizer ) { super(store); } @@ -109,8 +112,8 @@ export class WebCameraInputWidgetComponent extends PageComponent implements OnIn isPreviewPhoto = false; singleDevice = true; updatePhoto = false; - previewPhoto: any; - lastPhoto: any; + previewPhoto: SafeUrl; + lastPhoto: SafeUrl; private static hasGetUserMedia(): boolean { return !!(window.navigator.mediaDevices && window.navigator.mediaDevices.getUserMedia); @@ -159,8 +162,8 @@ export class WebCameraInputWidgetComponent extends PageComponent implements OnIn private updateWidgetData(data: Array) { const keyData = data[0].data; - if (keyData && keyData.length) { - this.lastPhoto = keyData[0][1]; + if (keyData?.length && isString(keyData[0][1]) && keyData[0][1].startsWith('data:image/')) { + this.lastPhoto = this.sanitizer.bypassSecurityTrustUrl(keyData[0][1]); } } @@ -256,7 +259,7 @@ export class WebCameraInputWidgetComponent extends PageComponent implements OnIn 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.previewPhoto = this.sanitizer.bypassSecurityTrustUrl(this.canvasElement.toDataURL(mimeType, quality)); this.isPreviewPhoto = true; }