fix bug

src/app/modules/overview/camera-stream/camera-stream.component.html

@@ -1,5 +1,5 @@
 <h3>Camera Stream</h3>
-<!--<canvas #videoPlayer></canvas>-->
+<canvas #videoPlayer></canvas>
 
 <video width="700" controls style="display: block; margin-left: auto; margin-right: auto">
   <source src="assets/video/video.mp4" type="video/mp4">

src/app/modules/overview/camera-stream/camera-stream.component.scss

@@ -1,22 +0,0 @@
-.tooltip {
-  position: relative;
-  display: inline-block;
-}
-
-.tooltip .tooltiptext {
-  visibility: hidden;
-  width: 300px;
-  padding: 10px;
-  background-color: #fff;
-  color: black;
-  border-radius: 6px;
-  position: absolute;
-  z-index: 1;
-  bottom: 100%;
-  left: 50%;
-  margin-left: -60px;
-}
-
-.tooltip:hover .tooltiptext {
-  visibility: visible;
-}

src/app/modules/overview/camera-stream/camera-stream.component.ts

@@ -16,14 +16,14 @@ export class CameraStreamComponent implements OnInit, AfterViewInit{
   }
   constructor(private el: ElementRef, private renderer: Renderer2) {}
   async ngAfterViewInit() {
-    // this.player = await loadPlayer({
-    //   url: 'ws://localhost:8081',
-    //   canvas: this.videoPlayer!.nativeElement,
-    //
-    //   onDisconnect: () => console.log('Connection lost!'),
-    // });
-    //
-    // console.log('Connected!', this.player);
+    this.player = await loadPlayer({
+      url: 'ws://localhost:8081',
+      canvas: this.videoPlayer!.nativeElement,
+
+      onDisconnect: () => console.log('Connection lost!'),
+    });
+
+    console.log('Connected!', this.player);
   }
 
 

src/app/modules/overview/overall-ground/overall-ground.component.html

@@ -47,11 +47,10 @@
             <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
           </a>
         </div>
-        <ng-template [ngIf]="Sstate1 && Sstate2">
-          <div class="alarm-text"
-               [ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">ALARM: <br>VIBRATION ALERT</div>
-        </ng-template>
 
+          <div  *ngIf="Sstate1 && Sstate2"
+               class="alarm-text"
+               [ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">ALARM: <br>VIBRATION ALERT</div>
       </div>
       <div class="state t6 " id="State6">
         <div>
@@ -63,11 +62,9 @@
             <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
           </a>
         </div>
-        <ng-template [ngIf]="Sstate1 && Sstate2">
-          <div class="alarm-text"
-               [ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">ALARM: <br>SMOKE ALERT</div>
-        </ng-template>
-
+        <div  *ngIf="Sstate1 && Sstate2"
+              class="alarm-text"
+              [ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">ALARM:<br>SMOKE ALERT</div>
     </div>
 
 <!--      <div *ngFor="let state of states; let i = index"-->