add video

src/app/app.module.ts

-import { NgModule } from '@angular/core';
+import {APP_INITIALIZER, NgModule} from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {SharedModule} from "./shared/shared.module";
+import {HttpClientModule} from "@angular/common/http";
+import {AppInitService} from "./shared/services/app-init.service";
+
+export function appInitializerFactory(appInitializerService: AppInitService): () => Promise<any> {
+  return () => appInitializerService.initializeApp();
+}
+
 
 @NgModule({
   declarations: [
     AppRoutingModule,
     BrowserAnimationsModule,
     SharedModule,
+    HttpClientModule
+  ],
+  providers: [
+
+    {
+      provide: APP_INITIALIZER,
+      useFactory: appInitializerFactory,
+      deps: [AppInitService],
+      multi: true
+    }
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

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

 <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">
+</video>

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

   }
   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

     <div class="card-state">
       <img src="assets/images/ground.png">
 
-      <div *ngFor="let state of states; let i = index"
-           [ngClass]="{'sensor-on': Sstate1 && Sstate2}"
-           class="state t{{i + 1}}"
-           id="State{{i + 1}}">
-        <img [src]="getImageSource()" style="width: 30px; height: 30px">
-      </div>
+      <p class="state t1" id="State1">
+        <img src="assets/images/sensor-off.png" style="width: 30px; height: 30px">
+      </p>
+      <p class="state t2" id="State2">
+        <img src="assets/images/sensor-off.png" style="width: 30px; height: 30px">
+      </p>
+      <p class="state t3" id="State3">
+        <img src="assets/images/sensor-off.png" style="width: 30px; height: 30px">
+      </p>
+      <p class="state t4" id="State4">
+        <img src="assets/images/sensor-off.png" style="width: 30px; height: 30px">
+      </p>
+      <p class="state t5" id="State5" [ngClass]="{'sensor-on': Sstate1 && Sstate2}">
+        <img [src]="getImageSource()"  style="width: 30px; height: 30px">
+      </p>
+      <p class="state t6 " id="State6" [ngClass]="{'sensor-on': Sstate1 && Sstate2}">
+        <img [src]="getImageSource()"  style="width: 30px; height: 30px">
+    </p>
 
+<!--      <div *ngFor="let state of states; let i = index"-->
+<!--           [ngClass]="{'sensor-on': Sstate1 && Sstate2}"-->
+<!--           class="state t{{i + 1}}"-->
+<!--           id="State{{i + 1}}">-->
+<!--        <img [src]="getImageSource()" style="width: 30px; height: 30px">-->
+<!--      </div>-->
     </div>
   </div>
   <div fxFlex="30" fxLayout="column" fxLayoutGap="50px">

src/app/shared/services/app-init.service.ts

+import { Injectable } from '@angular/core';
+import {config} from "../../../assets/config/config";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AppInitService {
+  appConfig = config;
+
+  constructor() {}
+
+  initializeApp(): Promise<any> {
+    return new Promise((resolve, reject) => {
+      console.log('Loaded:', this.appConfig);
+      resolve(true);
+    });
+  }
+}

src/assets/config/config.ts

 export const config = {
   gateway: 'wss:/socket.aztrace.vn/ws'
 };
-// export function loadConfig() {
-//   return {
-//     gateway: 'wss:/socket.aztrace.vn/ws'
-//   };
-// }

src/config.ts

-export const config = {
-  gateway: 'wss:/socket.aztrace.vn/ws'
-};