fuzi_fauzia
/
hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

penambahan logic pada cctv

This commit is contained in:
Fuzi_fauzia 2024-06-25 14:45:11 +07:00
parent 873e24a6ac
commit e27493171e
5 changed files with 143 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/content/hemat-app/cost-management/modal-add-actual/modal-add-actual.component.ts
View File

@ -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({

5
src/app/content/hemat-app/monitoring/monitoring.module.ts
View File

@ -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 { }

9
src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html
View File

@ -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>

113
src/app/content/hemat-app/monitoring/surveillance/surveillance.component.ts
View File

@ -27,18 +27,20 @@ export class SurveillanceComponent {
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,8 +90,18 @@ export class SurveillanceComponent {
}
ngAfterViewInit() {
const deviceid = localStorage.getItem("deviceId");
const parsedData = JSON.parse(deviceid);
console.log(parsedData, "parsedData");
this.deviceService
.getStreamUrl(parsedData.device_id)
.subscribe((data) => {
console.log("hit ini");
const options = {
controls: true,
autoplay: true,
preload: "none",
techOrder: ["html5"],
html5: {
@ -98,25 +110,92 @@ export class SurveillanceComponent {
},
},
};
this.player = videojs("streamplayer", options);
}
loadStream(streamUrl) {
this.player.src({
type: "application/x-mpegURL",
src: streamUrl,
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(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();
});
}
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;

10
src/app/content/hemat-app/service/device.service.ts
View File

@ -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 });
}
}