| <h3>Camera Stream</h3> | <h3>Camera Stream</h3> | ||||
| <!--<canvas #videoPlayer></canvas>--> | |||||
| <canvas #videoPlayer></canvas> | |||||
| <video width="700" controls style="display: block; margin-left: auto; margin-right: auto"> | <video width="700" controls style="display: block; margin-left: auto; margin-right: auto"> | ||||
| <source src="assets/video/video.mp4" type="video/mp4"> | <source src="assets/video/video.mp4" type="video/mp4"> |
| .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; | |||||
| } |
| } | } | ||||
| constructor(private el: ElementRef, private renderer: Renderer2) {} | constructor(private el: ElementRef, private renderer: Renderer2) {} | ||||
| async ngAfterViewInit() { | 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); | |||||
| } | } | ||||
| <img style="width: 30px; height: 30px;" src="assets/images/camera.png"> | <img style="width: 30px; height: 30px;" src="assets/images/camera.png"> | ||||
| </a> | </a> | ||||
| </div> | </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> | ||||
| <div class="state t6 " id="State6"> | <div class="state t6 " id="State6"> | ||||
| <div> | <div> | ||||
| <img style="width: 30px; height: 30px;" src="assets/images/camera.png"> | <img style="width: 30px; height: 30px;" src="assets/images/camera.png"> | ||||
| </a> | </a> | ||||
| </div> | </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> | ||||
| <!-- <div *ngFor="let state of states; let i = index"--> | <!-- <div *ngFor="let state of states; let i = index"--> |