Merge pull request #3285 from vvlladd28/improvement/web-camera-widget

Fix updated data from web camera input widget

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": {

ui-ngx/src/app/modules/home/components/widget/lib/web-camera-input.component.html

@@ -16,11 +16,11 @@
 
 -->
 <div fxLayout="column" fxLayoutAlign="center center" class="tb-web-camera" tb-fullscreen [fullscreen]="isShowCamera">
-  <div [fxShow]="isEntityDetected && dataKeyDetected && isCameraSupport && isDeviceDetect" fxFlexFill>
+  <div *ngIf="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"/>
+        <img [fxShow]="lastPhoto" class="tb-web-camera__last-photo_img" [src]="safeLastPhoto" alt="last photo"/>
       </div>
       <button mat-raised-button color="primary" (click)="takePhoto()">
         {{ "widgets.input-widgets.take-photo" | translate }}
@@ -59,16 +59,16 @@
       </div>
     </div>
   </div>
-  <div class="message-text" [fxHide]="isEntityDetected">
+  <div class="message-text" *ngIf="!isEntityDetected">
     {{ 'widgets.input-widgets.no-entity-selected' | translate }}
   </div>
-  <div class="message-text" [fxShow]="isEntityDetected && !dataKeyDetected">
+  <div class="message-text" *ngIf="isEntityDetected && !dataKeyDetected">
     {{ 'widgets.input-widgets.no-datakey-selected' | translate }}
   </div>
-  <div class="message-text" [fxShow]="isEntityDetected && dataKeyDetected && !isCameraSupport">
+  <div class="message-text" *ngIf="isEntityDetected && dataKeyDetected && !isCameraSupport">
     {{ 'widgets.input-widgets.no-support-web-camera' | translate }}
   </div>
-  <div class="message-text" [fxShow]="isEntityDetected && dataKeyDetected && isCameraSupport && !isDeviceDetect">
+  <div class="message-text" *ngIf="isEntityDetected && dataKeyDetected && isCameraSupport && !isDeviceDetect">
     {{ 'widgets.input-widgets.no-support-web-camera' | translate }}
   </div>
 </div>

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;
+  previewPhoto: SafeUrl;
-  lastPhoto: any;
+  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<DatasourceData>) {
     const keyData = data[0].data;
-    if (keyData && keyData.length) {
+    if (keyData?.length && isString(keyData[0][1]) && keyData[0][1].startsWith('data:image/')) {
-      this.lastPhoto = keyData[0][1];
+      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;
   }