ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-testapp: add reconnect button

pull/635/head
pabloFuente 2021-06-24 15:07:56 +02:00
parent 322ac2e843
commit 6d624209a0
3 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
openvidu-testapp/src/app/components/video/video.component.css
View File

@ -26,10 +26,10 @@ p {
}
.material-icons {
font-size: 17px;
width: 17px;
height: 17px;
line-height: 20px;
font-size: 14px;
width: 14px;
height: 14px;
line-height: 16px;
}
.video-btn {
@ -37,7 +37,7 @@ p {
background: rgba(255, 255, 255, 0.75);
cursor: pointer;
padding: 0;
height: 20px;
height: 16px;
float: left;
}
@ -64,6 +64,10 @@ p {
float: right;
}
.filter-btn {
float: right;
}
.top-left-rounded {
border-top-left-radius: 2px;
}
@ -94,6 +98,6 @@ p {
.bottom-div {
position: absolute;
bottom: 0;
height: 20px;
height: 16px;
width: 100%;
}

18
openvidu-testapp/src/app/components/video/video.component.html
View File

@ -5,6 +5,9 @@
<button class="video-btn events-btn bottom-left-rounded" title="Publisher events" (click)="openPublisherEventsDialog()">
<mat-icon aria-label="Publisher events" class="mat-icon material-icons" role="img" aria-hidden="true">notifications</mat-icon>
</button>
<button class="video-btn filter-btn" *ngIf="!this.unpublished" title="Filter configuration" (click)="filterConfig()">
<mat-icon aria-label="Filter configuration" class="mat-icon material-icons" role="img" aria-hidden="true">filter_vintage</mat-icon>
</button>
<button class="video-btn stats-button bottom-left-rounded" title="Peer Connection Stats" (click)="showCodecUsed()">
<mat-icon aria-label="Peer Connection Stats" class="mat-icon material-icons" role="img" aria-hidden="true">info</mat-icon>
</button>
@ -24,8 +27,8 @@
<button *ngIf="!this.unpublished" class="video-btn change-publisher-btn" title="Change publisher" (click)="changePub()">
<mat-icon aria-label="Change publisher" class="mat-icon material-icons" role="img" aria-hidden="true">switch_video</mat-icon>
</button>
<button *ngIf="!this.unpublished" class="video-btn filter-btn" title="Filter configuration" (click)="filterConfig()">
<mat-icon aria-label="Filter configuration" class="mat-icon material-icons" role="img" aria-hidden="true">filter_vintage</mat-icon>
<button *ngIf="!this.unpublished" class="video-btn reconnect-publisher-btn" title="Reconnect publisher" (click)="reconnect()">
<mat-icon aria-label="Reconnect publisher" class="mat-icon material-icons" role="img" aria-hidden="true">refresh</mat-icon>
</button>
<button *ngIf="!this.unpublished" class="video-btn rec-btn publisher-rec-btn" title="Record" (click)="record()">
<mat-icon aria-label="Start/Stop local recording" class="mat-icon material-icons" role="img" aria-hidden="true">
@ -44,6 +47,9 @@
<button *ngIf="subbed" class="video-btn events-btn bottom-left-rounded" title="Subscriber events" (click)="openSubscriberEventsDialog()">
<mat-icon aria-label="Subscriber events" class="mat-icon material-icons" role="img" aria-hidden="true">notifications</mat-icon>
</button>
<button *ngIf="OV.session.capabilities.forceDisconnect" class="video-btn filter-btn" title="Filter configuration" (click)="filterConfig()">
<mat-icon aria-label="Filter configuration" class="mat-icon material-icons" role="img" aria-hidden="true">filter_vintage</mat-icon>
</button>
<button class="video-btn stats-button bottom-left-rounded" title="Peer Connection Stats" (click)="showCodecUsed()">
<mat-icon aria-label="Peer Connection Stats" class="mat-icon material-icons" role="img" aria-hidden="true">info</mat-icon>
</button>
@ -60,17 +66,15 @@
(click)="subUnsubAudio()">
<mat-icon aria-label="Subscribe or unsubscribe audio" class="mat-icon material-icons" role="img" aria-hidden="true">{{pubSubAudioIcon}}</mat-icon>
</button>
<button *ngIf="!!pubSubVideoIcon" class="video-btn reconnect-subscriber-btn" title="Reconnect subscriber" (click)="reconnect()">
<mat-icon aria-label="Reconnect subscriber" class="mat-icon material-icons" role="img" aria-hidden="true">refresh</mat-icon>
</button>
<button *ngIf="OV.session.capabilities.forceUnpublish" class="video-btn force-unpub-btn" title="Force Unpublish" (click)="forceUnpublish()">
<mat-icon aria-label="Force unpublish" class="mat-icon material-icons" role="img" aria-hidden="true">voice_over_off</mat-icon>
</button>
<button *ngIf="OV.session.capabilities.forceDisconnect" class="video-btn force-disconnect-btn" title="Force Disconnect" (click)="forceDisconnect()">
<mat-icon aria-label="Force disconnect" class="mat-icon material-icons" role="img" aria-hidden="true">clear</mat-icon>
</button>
<button *ngIf="OV.session.capabilities.forceDisconnect" class="video-btn filter-btn" title="Filter configuration" (click)="filterConfig()">
<mat-icon aria-label="Filter configuration" class="mat-icon material-icons" role="img" aria-hidden="true">filter_vintage</mat-icon>
</button>
<button *ngIf="!!recordIcon" class="video-btn rec-btn" title="Record" (click)="record()">
<mat-icon aria-label="Start/Stop recording" class="mat-icon material-icons" role="img" aria-hidden="true">{{recordIcon}}</mat-icon>
</button>

6
openvidu-testapp/src/app/components/video/video.component.ts
View File

@ -327,6 +327,12 @@ export class VideoComponent implements OnInit, OnDestroy {
this.publisherChanged = !this.publisherChanged;
}
reconnect() {
this.streamManager.stream.reconnect()
.then(() => console.log(`Stream ${this.streamManager.stream} (${this.streamManager.remote ? 'Subscriber' : 'Publisher'}) successfully reconnected`))
.catch(error => console.error(`Error while reconnecting stream ${this.streamManager.stream} (${this.streamManager.remote ? 'Subscriber' : 'Publisher'})`, error));
}
updateSubscriberEvents(oldValues) {
const sub: Subscriber = <Subscriber>this.streamManager;