93 lines
2.7 KiB
HTML
93 lines
2.7 KiB
HTML
<ion-app class="transparent">
|
|
<ion-header>
|
|
<ion-toolbar color="dark">
|
|
<img class="demo-logo" src="assets/images/openvidu_vert_white_bg_trans_cropped.png" />
|
|
<ion-buttons slot="primary">
|
|
<ion-button color="light" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-ionic">
|
|
<ion-icon slot="icon-only" name="logo-github"></ion-icon>
|
|
</ion-button>
|
|
</ion-buttons>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content class="ion-padding transparent" *ngIf="!session">
|
|
<div id="img-div">
|
|
<img src="assets/images/openvidu_grey_bg_transp_cropped.png" />
|
|
</div>
|
|
<h1 align="center" id="title">Join a video session</h1>
|
|
<ion-item>
|
|
<ion-label position="floating">Participant</ion-label>
|
|
<ion-input id="user-input" [(ngModel)]="myUserName"></ion-input>
|
|
</ion-item>
|
|
<ion-item>
|
|
<ion-label position="floating">Session</ion-label>
|
|
<ion-input id="session-input" [(ngModel)]="mySessionId"></ion-input>
|
|
</ion-item>
|
|
|
|
<ion-button
|
|
id="join-button"
|
|
[disabled]="!mySessionId && !myUserName"
|
|
(click)="joinSession()"
|
|
expand="block"
|
|
shape="round"
|
|
color="primary"
|
|
>
|
|
<ion-icon slot="start" name="videocam"></ion-icon>
|
|
Join
|
|
</ion-button>
|
|
|
|
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
|
|
<ion-fab-button
|
|
id="settings-button"
|
|
[disabled]="!mySessionId && !myUserName"
|
|
(click)="presentSettingsAlert()"
|
|
size="small"
|
|
color="dark"
|
|
>
|
|
<ion-icon name="settings"></ion-icon>
|
|
</ion-fab-button>
|
|
</ion-fab>
|
|
</ion-content>
|
|
|
|
<ion-content [scrollEvents]="true" *ngIf="session" class="transparent">
|
|
<div id="session-header">
|
|
<h1 id="session-title">{{ mySessionId }}</h1>
|
|
</div>
|
|
|
|
<ion-grid>
|
|
<!--Subscribers and Publishers-->
|
|
<ion-row>
|
|
<ion-col size="6">
|
|
<div *ngIf="publisher" class="stream-container">
|
|
<user-video [streamManager]="publisher"></user-video>
|
|
</div>
|
|
</ion-col>
|
|
|
|
<ion-col size="6" *ngFor="let sub of subscribers">
|
|
<div class="stream-container">
|
|
<user-video [streamManager]="sub"></user-video>
|
|
</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
|
|
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
|
|
<ion-fab-button class="action-button" color="light" id="camButton" (click)="swapCamera()">
|
|
<ion-icon name="camera-reverse-sharp"></ion-icon>
|
|
</ion-fab-button>
|
|
|
|
<ion-fab-button (click)="toggleMicrophone()" class="action-button">
|
|
<ion-icon name="{{ microphoneIcon }}"></ion-icon>
|
|
</ion-fab-button>
|
|
|
|
<ion-fab-button (click)="toggleCamera()" class="action-button">
|
|
<ion-icon name="{{ cameraIcon }}"></ion-icon>
|
|
</ion-fab-button>
|
|
|
|
<ion-fab-button color="danger" (click)="leaveSession()" class="action-button">
|
|
<ion-icon name="power"></ion-icon>
|
|
</ion-fab-button>
|
|
</ion-fab>
|
|
</ion-content>
|
|
</ion-app>
|