penambahan logic pada cctv

2024-06-25 14:45:11 +07:00 · 2024-06-25 14:45:11 +07:00 · e27493171e
parent 873e24a6ac
commit e27493171e
5 changed files with 143 additions and 36 deletions
--- a/src/app/content/hemat-app/cost-management/modal-add-actual/modal-add-actual.component.ts
+++ b/src/app/content/hemat-app/cost-management/modal-add-actual/modal-add-actual.component.ts
@ -16,6 +16,7 @@ export class ModalAddActualComponent {
  dateCurrent: any;
  dataCost: any;
  formattedDate: any;
+  formattedDate2: any;
  buildingName: any;

  constructor(
@ -29,16 +30,14 @@ export class ModalAddActualComponent {
  ngOnInit() {
    const currentDate = new Date();
    this.dateCurrent = currentDate.toISOString().slice(0, 7);
-    this.datalistcost();
    this.dateFormat();
    this.getBuildingById();
+    this.datalistcost();
  }

  dateFormat() {
    let year = this.periode.slice(0, 4);
-    let month = this.periode.slice(5);
-
-    // Ubah format bulan ke bahasa Indonesia (opsional)
+    let month = this.periode.slice(5, 7);
    let monthNames = [
      "Januari",
      "Februari",
@ -53,10 +52,11 @@ export class ModalAddActualComponent {
      "November",
      "Desember",
    ];
-    let monthName = monthNames[parseInt(month) - 1]; // Menggunakan parseInt karena month dalam format string
-
-    // Gabungkan kembali untuk mendapatkan format "Juni 2024"
+    let monthName = monthNames[parseInt(month) - 1];
    this.formattedDate = `${monthName} ${year}`;
+    this.formattedDate2 = `${year}-${month}`;
+    
+    
  }

  createForm() {
@ -73,7 +73,7 @@ export class ModalAddActualComponent {

  datalistcost() {
    this.costService
-      .getRealCostByBuildingId(this.buildingId, this.dateCurrent)
+      .getRealCostByBuildingId(this.buildingId, this.formattedDate2)
      .subscribe((data) => {
        this.dataCost = data.data[0];
        this.myForm.patchValue({
--- a/src/app/content/hemat-app/monitoring/monitoring.module.ts
+++ b/src/app/content/hemat-app/monitoring/monitoring.module.ts
@ -27,6 +27,8 @@ import { SurveillanceComponent } from './surveillance/surveillance.component';
 import { WaterComponent } from './water/water.component';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { ControlDeviceSeemoreComponent } from './control-device-seemore/control-device-seemore.component';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HttpErrorInterceptorService } from 'src/app/interceptors/http-error-interceptor.service';

@NgModule({
  declarations: [
@ -101,6 +103,9 @@ import { ControlDeviceSeemoreComponent } from './control-device-seemore/control-
        data: { mode: 'room' }
      },
    ])
+  ],
+  providers: [
+    { provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptorService, multi: true }
  ]
 })
 export class MonitoringModule { }
--- a/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html
+++ b/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html
@ -214,15 +214,14 @@
              style="height: 500px !important"
            ></iframe> -->

-
-            <video id="streamplayer" class="video-js vjs-big-play-centered" style="width: 100% !important; height: 500px !important">
-              <source src="#" type="application/x-mpegurl">
+            <video id="streamplayer" class="video-js vjs-big-play-centered" style="width: 100% !important; height: 500px !important" autoplay>
+              <source src="" type="application/x-mpegurl">
            </video>
          </div>
        </div>

        <div class="row">
-          <div class="col-lg-3 col-md-6 col-12" *ngFor="let item of cameras">
+          <div class="col-lg-3 col-md-6 col-12" *ngFor="let item of filteredRows">
            <div class="card" style="background-color: #252525 !important">
              <div class="card-content">
                <label style="color: #ffffff">{{ item.name }}</label>
@ -230,7 +229,7 @@
                  class="card-img-top img-fluid"
                  src="../../../../../assets/images/cctv.jpg"
                  alt="Image 1"
-                  (click)="loadStream(item.videoUrl)"
+                  (click)="loadStream(item.device_id)"
                />
              </div>
            </div>
--- a/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.ts
+++ b/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.ts
@ -26,19 +26,21 @@ export class SurveillanceComponent {
  public breadcrumb: any;
  showIframe = false;
  clicktrue = false;
-  
+
+  bufferingTimeout: any;
+
  cameras = [
    {
      id: 1,
      name: "Pengadilan Agama Padang Cam 1",
      videoUrl:
-        "https://wework-7-us.stream.iot-11.com:8080/hls/eb48441e886701e55bbk52/cprg5g0d9fpsg3dvh27gSD1XjuVVd8h8oWqjoFJ6.m3u8?signInfo=C6fuX1l4syLFPeCPQ476iYDjNU_WZC24E6oGVwBvK3k6iIhqjvzzQIAAO5rUJjWLfeqY6YpDPsRB9JGEQTL_ZpxUOJB_L0VfgPX45SAecU_6_6ybAVcK-m0xxUrcGr3_EvzF_d1czqOHplNUMYodotvkWWQ9yP0NOEYJhtMemSw",
+        "https://wework-1-us.stream.iot-11.com:8080/hls/eb48441e886701e55bbk52/cpsgbti59barred964v0pXFm2hujw6pfrksNebnJ.m3u8?signInfo=1nOzF8oTGaesUDaWKWwVvm48YUWzA1giepIfLDeyEYHizShw3V4xT0zp9YI7NBbpOiPBfg1zDalVkjzpVQL_6l9z6Q3TptY5lOW3FkZFb7U3lbqHzHiLCh89GKPH6DvUzYXymA4X2hsKU89jJ9y9UwVZwUxs0jHq19rk3CrZ0cE",
    },
    {
      id: 2,
      name: "Pengadilan Agama Padang Cam 2",
      videoUrl:
-        "https://pdg2.cctvbadilag.my.id:5443/401900PTAPADANG/play.html?name=671014455048381705129283",
+        "https://wework-4-us.stream.iot-11.com:8080/hls/eb48441e886701e55bbk52/cpsgq28n0asmj2buiihgh0ssY0CuqMVC9LCVeEQH.m3u8?signInfo=0j00FMq5E3kn3oIImQU1laHoYvbLKZuQ8f_IPgKZjRPysw_xbZGfXpbqqP05DnRlsyG40oPuYr2dSylrSppO4vkr0YtJqeTTy0FELIv4nrLAv2vcMyD6So4NJev-nmHpS3GPOIuTiy879xuADEtnYMIt5BqU68L3s9yKaJx5AAE",
    },
    {
      id: 3,
@ -53,7 +55,7 @@ export class SurveillanceComponent {
        "https://bdg2.cctvbadilag.my.id:5443/400854PAPURWAKARTA/play.html?name=113658520181242556385273",
    },
  ];
-
+  private intervalId: any;
  player: any;
  constructor(
    private router: Router,
@ -88,35 +90,112 @@ export class SurveillanceComponent {
  }

  ngAfterViewInit() {
-    const options = {
-      controls: true,
-      preload: "none",
-      techOrder: ["html5"],
-      html5: {
-        hls: {
-          overrideNative: !videojs.browser.IS_SAFARI,
-        },
-      },
-    };
+    const deviceid = localStorage.getItem("deviceId");
+    const parsedData = JSON.parse(deviceid);
+    console.log(parsedData, "parsedData");

-    this.player = videojs("streamplayer", options);
+    this.deviceService
+      .getStreamUrl(parsedData.device_id)
+      .subscribe((data) => {
+        console.log("hit ini");
+
+        const options = {
+          controls: true,
+          autoplay: true,
+          preload: "none",
+          techOrder: ["html5"],
+          html5: {
+            hls: {
+              overrideNative: !videojs.browser.IS_SAFARI,
+            },
+          },
+        };
+        this.player = videojs("streamplayer", options);
+        this.player.src({
+          type: "application/x-mpegURL",
+          src: data.result.data.result.url,
+        });
+
+        // Event listener for errors
+        this.player.on("error", () => {
+          const error = this.player.error();
+          console.error("Video error:", error);
+          // Handle the error
+        });
+
+        // Event listener for stalled
+        this.player.on("stalled", () => {
+          console.warn("Video playback stalled");
+          // Handle the stall
+        });
+
+        this.player.on("waiting", () => {
+          console.warn("Video playback buffer");
+          this.clearBufferingTimeout();
+          this.bufferingTimeout = setTimeout(() => {
+            const savedData = localStorage.getItem("deviceId");
+            const parsedData = JSON.parse(savedData);
+            console.log('masuk timeout buffer');
+            this.loadStream(parsedData.device_id);
+          }, 60000);
+        });
+        this.player.on("playing", () => {
+          this.clearBufferingTimeout();
+        });
+      });
  }

-  loadStream(streamUrl) {
-    this.player.src({
-      type: "application/x-mpegURL",
-      src: streamUrl,
+  loadStream(device_id) {
+    localStorage.setItem("deviceId", JSON.stringify({ device_id: device_id }));
+    this.deviceService.getStreamUrl(device_id).subscribe((data) => {
+      this.player.src({
+        type: "application/x-mpegURL",
+        src: data.result.data.result.url,
+      });
+      this.player.controls(true);
+      this.player.play();
    });
-    this.player.controls(true);
-    this.player.play();
+  }
+
+  clearBufferingTimeout() {
+    if (this.bufferingTimeout) {
+      clearTimeout(this.bufferingTimeout);
+      this.bufferingTimeout = null;
+    }
  }

  fetchData(buildingSelected, categorySelected, statusSelected) {
    this.deviceService
      .getDeviceData(buildingSelected, categorySelected, statusSelected)
      .subscribe((res) => {
-        this.filteredRows = res.results.data;
-        console.log(this.filteredRows);
+        this.filteredRows = res.results.data.filter(
+          (item) => item.category_id === 30
+        );
+        localStorage.setItem(
+          "deviceId",
+          JSON.stringify({ device_id: this.filteredRows[0].device_id })
+        );
+        this.deviceService
+          .getStreamUrl(this.filteredRows[0].device_id)
+          .subscribe((data) => {
+            const options = {
+              controls: true,
+              autoplay: true,
+              preload: "none",
+              techOrder: ["html5"],
+              html5: {
+                hls: {
+                  overrideNative: !videojs.browser.IS_SAFARI,
+                },
+              },
+            };
+            this.player = videojs("streamplayer", options);
+            this.player.src({
+              type: "application/x-mpegURL",
+              src: data.result.data.result.url,
+            });
+          });
+        console.log(this.filteredRows, "filteredrow");
      });
  }

@ -141,6 +220,12 @@ export class SurveillanceComponent {
    });
  }

+  dataListDevice() {
+    this.monitoringApiService.getBuildingList().subscribe((data) => {
+      this.dataBuildingList = data.data.filter((item) => item.statusId === 2);
+    });
+  }
+
  doFilter() {
    this.spinnerFilterActive = true;
    this.fetchData(
@ -153,6 +238,14 @@ export class SurveillanceComponent {
    }, 3000);
  }

+  ngOnDestroy() {
+    localStorage.removeItem("deviceId");
+    this.clearBufferingTimeout();
+    if (this.player) {
+      this.player.dispose();
+    }
+  }
+
  // onClick(videoUrl: string) {
  //   const iframe = this.videoIframe.nativeElement;
  //   iframe.src = videoUrl;
--- a/src/app/content/hemat-app/service/device.service.ts
+++ b/src/app/content/hemat-app/service/device.service.ts
@ -60,4 +60,14 @@ export class DeviceService {
    });
    return this.http.post<any>(url, data, { headers });
  }
+
+  getStreamUrl(id): Observable<any> {
+    const endpoint = `/devices`;
+    const url = `${BASE_URL}${endpoint}/live-stream?device_id=${id}`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+    });
+    return this.http.get<any>(url, { headers });
+  }
 }