3 <div class="centerdiv">
8 <mat-expansion-panel-header>
12 <mat-panel-description>
13 Please upload the required details
14 </mat-panel-description>
15 </mat-expansion-panel-header>
16 <p>Camera Upload Video</p>
18 <div class="mp4-upload">
19 <form [formGroup]="videoUploadForm" (ngSubmit)="onSubmit()">
21 <img [src]="url" *ngIf="format==='image' && url" height="200"> <br />
22 <video [src]="url" *ngIf="format==='video' && url" height="200" controls></video> <br />
23 <input type="file" name="video" (change)="onFileSelect($event)" />
25 <div class="center-button">
26 <button mat-raised-button color="primary" type="submit">Upload</button>
31 </mat-expansion-panel>
35 <div style="padding-top:10px;">
38 <mat-expansion-panel-header>
40 Input Stream and location
42 <mat-panel-description>
43 Please upload the required details
44 </mat-panel-description>
45 </mat-expansion-panel-header>
47 <form [formGroup]="cameraDetailsForm" (ngSubmit)="cameraDetailsSubmit()">
51 <mat-label style="padding-right: 20px;">Provide Video Details.....</mat-label>
55 <mat-label style="padding-right: 20px;">Camera Input Stream.....</mat-label>
56 <mat-form-field appearance="fill">
57 <mat-label>Select Camera Input</mat-label>
59 <input matInput [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedCamera">
64 <mat-label style="padding-right: 20px;">Select Camera Location </mat-label>
65 <mat-form-field appearance="fill">
66 <mat-label>Camera Location</mat-label>
68 <input matInput [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedLocation">
70 <mat-option *ngFor="let loc of location" [ngModelOptions]="{standalone: true}"
71 [(ngModel)]="selectedLocation" [value]="loc.value">
72 {{selectedLocation}}</mat-option>
78 <mat-label style="padding-right: 20px;">Provide RTSP URL....... </mat-label>
79 <mat-form-field appearance="fill">
80 <mat-label>RTSP URL</mat-label>
81 <input matInput [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedRTSP">
86 <div style="display:flex; justify-content: center">
87 <button mat-raised-button color="primary" type="submit">Camera-Details-Upload</button>
91 </mat-expansion-panel>
94 <div style="padding-top:20px;">
96 <div class="tablepage">
97 <div class="cameratable">
99 <table mat-table [dataSource]="cameraDataSource">
101 <ng-container matColumnDef="checked">
102 <mat-header-cell *matHeaderCellDef>Check</mat-header-cell>
103 <mat-cell *matCellDef="let element">
104 <mat-checkbox [(ngModel)]="element.checked"></mat-checkbox>
108 <ng-container matColumnDef="cameraID">
109 <th mat-header-cell *matHeaderCellDef> CAMERA ID </th>
111 <td mat-cell *matCellDef="let camera"> {{camera.cameraID}} </td>
114 <ng-container matColumnDef="cameraLocation">
115 <th mat-header-cell *matHeaderCellDef> CAMERA LOCATION </th>
116 <td mat-cell *matCellDef="let camera"> {{camera.cameraLocation}} </td>
119 <ng-container matColumnDef="cameraNumber">
120 <th mat-header-cell *matHeaderCellDef> CAMERA NUMBER </th>
121 <td mat-cell *matCellDef="let camera"> {{camera.cameraNumber}} </td>
124 <ng-container matColumnDef="rtspUrl">
125 <th mat-header-cell *matHeaderCellDef> RTSP URL </th>
126 <td mat-cell *matCellDef="let camera"> {{camera.rtspUrl}} </td>
129 <tr mat-header-row *matHeaderRowDef="cameraColumns"></tr>
130 <tr mat-row *matRowDef="let row; columns: cameraColumns;"></tr>
133 <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
134 <div style="padding: 20px">
135 <mat-select placeholder="Select Camera values to send" [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedCameraID"
136 (ngModelChange)="onCameraIDSelection()">
137 <mat-option *ngFor="let camera of selectedCameraId" [value]="camera">
148 <div style="padding-top: 20px; display:flex; justify-content: center">
149 <button (click)="refreshPage()" mat-raised-button color="primary" type="submit">Refresh</button>