penambahan logic pada cctv
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user