mirror of https://github.com/OpenVidu/openvidu.git
83 lines
3.0 KiB
HTML
83 lines
3.0 KiB
HTML
<div *ngIf="!session">
|
|
<h1>Join a video session</h1>
|
|
<form (submit)="joinSession()" accept-charset="UTF-8">
|
|
<div>
|
|
<label>Participant:</label>
|
|
<input type="text" name="participantId" [(ngModel)]="participantId" required>
|
|
</div>
|
|
<div>
|
|
<label>Session:</label>
|
|
<input type="text" name="sessionId" [(ngModel)]="sessionId" required>
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" [(ngModel)]="joinWithVideo" id="join-with-video" name="join-with-video"> Send video
|
|
<div *ngIf="joinWithVideo">
|
|
<table>
|
|
<tr>
|
|
<th>Constraint</th>
|
|
<th>Value</th>
|
|
</tr>
|
|
<tr>
|
|
<td>width</td>
|
|
<td><input type="text" id="width" required></td>
|
|
</tr>
|
|
<tr>
|
|
<td>height</td>
|
|
<td><input type="text" id="height" required></td>
|
|
</tr>
|
|
<tr>
|
|
<td>frameRate</td>
|
|
<td><input type="text" id="frameRate" required></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" [(ngModel)]="joinWithAudio" id="join-with-audio" name="join-with-audio"> Send audio
|
|
</div>
|
|
<div>
|
|
<input type="submit" name="commit" value="Join!">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div *ngIf="session">
|
|
<h2>{{sessionId}}</h2>
|
|
<input type="button" (click)="leaveSession()" value="Leave session">
|
|
<input type="checkbox" id="toggle-video" name="toggle-video" [checked]="toggleVideo" (change)="updateToggleVideo($event)"> Toggle your video
|
|
<input type="checkbox" id="toggle-audio" name="toggle-audio" [checked]="toggleAudio" (change)="updateToggleAudio($event)"> Toggle your audio
|
|
<div>
|
|
<div *ngFor="let s of streams; let i = index">
|
|
<div style="top: 0;">
|
|
<stream [stream]="s"></stream>
|
|
</div>
|
|
<div *ngIf="stats[i]">
|
|
<div style="margin-left: 50px;">
|
|
<input type="checkbox" id="toggle-state" name="toggle-state" [checked]="true" (change)="updateToggleState(i)"> Show conexion state
|
|
<div [attr.id]="'state-' + i" style="display: block;">
|
|
<p><b>Signaling state:</b> {{signalingState[i]}}</p>
|
|
<p><b>ICE connection state:</b> {{iceConnectionState[i]}}</p>
|
|
</div>
|
|
<input type="checkbox" id="toggle-statistics" name="toggle-statistics" (change)="updateToggleStatistics(i)"> Show statistics
|
|
<div>
|
|
<h2 *ngIf="stats[i].bitrate">Bitrate: {{stats[i].bitrate}}</h2>
|
|
<h2 *ngIf="stats[i].framerate">Framerate: {{stats[i].framerate}}</h2>
|
|
</div>
|
|
<table [attr.id]="'table-' + i" style="display: none;">
|
|
<tr>
|
|
<th>Type</th>
|
|
<th>Time</th>
|
|
<th>Other attributes</th>
|
|
</tr>
|
|
<tr *ngFor="let st of stats[i].statsArray">
|
|
<td>{{st.type}}</td>
|
|
<td>{{st.timestamp}}</td>
|
|
<td>{{getStatAttributes(st.res)}}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|