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

openvidu-testapp: add speech-to-text buttons to videos

pull/748/head
pabloFuente 2022-10-09 13:14:05 +02:00
parent 98a1ea0cd2
commit 9fe3a6856c
3 changed files with 707 additions and 689 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,6 +35,9 @@
<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="streamManager.stream.hasAudio && !this.unpublished" class="video-btn stt-btn" title="Speech To Text" (click)="speechToText()">
<mat-icon aria-label="Speech To Text" class="mat-icon material-icons" role="img" aria-hidden="true">{{captionIcon}}</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">
{{recordIcon}}</mat-icon>
@ -79,6 +82,9 @@
<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="streamManager.stream.hasAudio && !!captionIcon" class="video-btn stt-btn" title="Speech To Text" (click)="speechToText()">
<mat-icon aria-label="Speech To Text" class="mat-icon material-icons" role="img" aria-hidden="true">{{captionIcon}}</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>

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

@ -69,6 +69,7 @@ export class VideoComponent implements OnInit, OnDestroy {
pubSubAudioIcon = 'mic';
recordIcon = 'fiber_manual_record';
pauseRecordIcon = '';
captionIcon = 'closed_caption';
// Stats
usedVideoCodec: string;
@ -165,6 +166,7 @@ export class VideoComponent implements OnInit, OnDestroy {
this.pubSubVideoIcon = '';
this.pubSubAudioIcon = '';
this.captionIcon = '';
this.recordIcon = '';
this.pauseRecordIcon = '';
this.pubSubIcon = 'play_arrow';
@ -185,6 +187,7 @@ export class VideoComponent implements OnInit, OnDestroy {
this.pubSubVideoIcon = 'videocam';
this.pubSubAudioIcon = 'mic';
this.captionIcon = 'closed_caption';
this.recordIcon = 'fiber_manual_record';
this.pauseRecordIcon = '';
this.pubSubIcon = 'stop';
@ -334,6 +337,15 @@ export class VideoComponent implements OnInit, OnDestroy {
.catch(error => console.error(`Error while reconnecting stream ${this.streamManager.stream} (${this.streamManager.remote ? 'Subscriber' : 'Publisher'})`, error));
}
async speechToText() {
if (this.captionIcon === 'closed_caption') {
await this.streamManager.stream.session.subscribeToSpeechToText(this.streamManager.stream);
} else {
await this.streamManager.stream.session.unsubscribeFromSpeechToText(this.streamManager.stream);
}
this.captionIcon = this.captionIcon === 'closed_caption' ? 'closed_caption_disabled' : 'closed_caption';
}
updateSubscriberEvents(oldValues) {
const sub: Subscriber = <Subscriber>this.streamManager;

8
openvidu-testapp/src/material-icons.css
View File

@ -3,10 +3,10 @@
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(/assets/fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
.material-icons {
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
@ -20,4 +20,4 @@
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
}