mirror of https://github.com/OpenVidu/openvidu.git
openvidu-testapp: RecordingProperties refactoring
pabloFuente
parent
2faeb965ca
commit
2cafb64f4b
|
|
@ -26,12 +26,13 @@ import { PublisherPropertiesDialogComponent } from './components/dialogs/publish
|
|||
import { ScenarioPropertiesDialogComponent } from './components/dialogs/scenario-properties-dialog/scenario-properties-dialog.component';
|
||||
import { FilterDialogComponent } from './components/dialogs/filter-dialog/filter-dialog.component';
|
||||
import { ShowCodecDialogComponent } from './components/dialogs/show-codec-dialog/show-codec-dialog.component';
|
||||
import { RecordingPropertiesComponent } from './components/dialogs/recording-properties/recording-properties.component';
|
||||
|
||||
import { OpenviduRestService } from './services/openvidu-rest.service';
|
||||
import { OpenviduParamsService } from './services/openvidu-params.service';
|
||||
import { TestFeedService } from './services/test-feed.service';
|
||||
import { MuteSubscribersService } from './services/mute-subscribers.service';
|
||||
import {SessionInfoDialogComponent} from "./components/dialogs/session-info-dialog/session-info-dialog.component";
|
||||
import { SessionInfoDialogComponent } from "./components/dialogs/session-info-dialog/session-info-dialog.component";
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
|
|
@ -46,6 +47,7 @@ import {SessionInfoDialogComponent} from "./components/dialogs/session-info-dial
|
|||
SessionPropertiesDialogComponent,
|
||||
SessionApiDialogComponent,
|
||||
EventsDialogComponent,
|
||||
RecordingPropertiesComponent,
|
||||
LocalRecordingDialogComponent,
|
||||
PublisherPropertiesDialogComponent,
|
||||
ScenarioPropertiesDialogComponent,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
.inner-text-input {
|
||||
margin-left: 9px;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
#rec-properties-btn {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#rec-properties-div {
|
||||
background-color: #f7f7f7;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 5px 0 5px;
|
||||
border: 1px solid #00000026;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#rec-properties-div mat-form-field {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
#rec-properties-div mat-checkbox {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#recording-resolution-form {
|
||||
max-width: 100px !important;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
font-weight: 400;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
mat-checkbox {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<div id="rec-properties-div">
|
||||
<label class="label">Recording properties</label>
|
||||
<div>
|
||||
<mat-form-field class="inner-text-input" [style.fontSize.px]=14>
|
||||
<input matInput id="recording-name-field" placeholder="Recording name" [(ngModel)]="recordingProperties.name">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="inner-text-input" [style.fontSize.px]=14>
|
||||
<mat-select id="rec-outputmode-select" placeholder="Output mode" [(ngModel)]="recordingProperties.outputMode">
|
||||
<mat-option *ngFor="let enumerator of enumToArray(recMode)" [value]="enumerator">
|
||||
<span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<div class="inner-text-input mat-form-field">
|
||||
<mat-checkbox id="rec-hasaudio-checkbox" [(ngModel)]="recordingProperties.hasAudio">Has audio</mat-checkbox>
|
||||
<mat-checkbox id="rec-hasvideo-checkbox" [(ngModel)]="recordingProperties.hasVideo">Has video</mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
*ngIf="recordingProperties.hasVideo && (recordingProperties.outputMode === 'COMPOSED' || recordingProperties.outputMode === 'COMPOSED_QUICK_START')">
|
||||
<mat-form-field class="inner-text-input" [style.fontSize.px]=14>
|
||||
<mat-select placeholder="Recording layout" id="recording-layout-select"
|
||||
[(ngModel)]="recordingProperties.recordingLayout">
|
||||
<mat-option *ngFor="let enumerator of enumToArray(recLayouts)" [value]="enumerator">
|
||||
<span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field *ngIf="recordingProperties.recordingLayout === 'CUSTOM'" class="inner-text-input"
|
||||
[style.fontSize.px]=14>
|
||||
<input matInput placeholder="Custom layout" id="custom-layout-input" type="text" [(ngModel)]="recordingProperties.customLayout">
|
||||
</mat-form-field>
|
||||
<mat-form-field id="recording-resolution-form" class="inner-text-input" [style.fontSize.px]=14>
|
||||
<input matInput id="recording-resolution-field" placeholder="Resolution" type="text"
|
||||
[(ngModel)]="recordingProperties.resolution">
|
||||
</mat-form-field>
|
||||
<mat-form-field id="recording-framerate-form" class="inner-text-input" [style.fontSize.px]=14>
|
||||
<input matInput id="recording-framerate-field" placeholder="FrameRate" type="number"
|
||||
[(ngModel)]="recordingProperties.frameRate">
|
||||
</mat-form-field>
|
||||
<mat-form-field id="recording-shmsize-form" class="inner-text-input" [style.fontSize.px]=14>
|
||||
<input matInput id="recording-shmsize-field" placeholder="Shmsize" type="number"
|
||||
[(ngModel)]="recordingProperties.shmSize">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="inner-text-input" [style.fontSize.px]=14>
|
||||
<input matInput id="recording-media-node-field" placeholder="Media Node"
|
||||
[(ngModel)]="recordingProperties.mediaNode.id">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { Recording, RecordingLayout, RecordingProperties } from 'openvidu-node-client';
|
||||
|
||||
@Component({
|
||||
selector: 'app-recording-properties',
|
||||
templateUrl: './recording-properties.component.html',
|
||||
styleUrls: ['./recording-properties.component.css']
|
||||
})
|
||||
export class RecordingPropertiesComponent {
|
||||
|
||||
recMode = Recording.OutputMode;
|
||||
recLayouts = RecordingLayout;
|
||||
|
||||
getRecordingProperties: RecordingProperties;
|
||||
@Output() recordingPropertiesChange: EventEmitter<RecordingProperties> = new EventEmitter<RecordingProperties>();
|
||||
|
||||
@Input()
|
||||
get recordingProperties(): RecordingProperties {
|
||||
return this.getRecordingProperties;
|
||||
}
|
||||
|
||||
set recordingProperties(value: RecordingProperties) {
|
||||
this.getRecordingProperties = value;
|
||||
this.recordingPropertiesChange.emit(this.getRecordingProperties);
|
||||
}
|
||||
|
||||
enumToArray(enumerator: any) {
|
||||
return Object.keys(enumerator);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -33,29 +33,3 @@ mat-dialog-content button {
|
|||
margin-left: 9px;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
#rec-properties-btn {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#rec-properties-div {
|
||||
background-color: #f7f7f7;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 5px 0 5px;
|
||||
border: 1px solid #00000026;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#rec-properties-div mat-form-field {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
#rec-properties-div mat-checkbox {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
#recording-resolution-form {
|
||||
max-width: 100px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,66 +42,22 @@
|
|||
</div>
|
||||
|
||||
<label class="label">Recordings</label>
|
||||
<button mat-button id="list-recording-btn" (click)="listRecordings()">List recordings</button>
|
||||
<button mat-button id="start-recording-btn" (click)="startRecording()">Start recording</button>
|
||||
<button id="rec-properties-btn" mat-icon-button style="width: 24px; height: 24px; line-height: 24px;"
|
||||
title="Recording properties" (click)="toggleRecProperties()">
|
||||
<mat-icon style="font-size: 18px; line-height: 18px; width: 18px; height: 18px" aria-label="Recording properties">
|
||||
{{recPropertiesIcon}}</mat-icon>
|
||||
</button>
|
||||
<div *ngIf="showRecProperties" id="rec-properties-div">
|
||||
<div>
|
||||
<mat-form-field class="inner-text-input" [style.fontSize.px]=14>
|
||||
<input matInput id="recording-media-node-field" placeholder="Media Node"
|
||||
[(ngModel)]="recordingProperties.mediaNode.id">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="inner-text-input" [style.fontSize.px]=14>
|
||||
<input matInput id="recording-name-field" placeholder="Recording name" [(ngModel)]="recordingProperties.name">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="inner-text-input" [style.fontSize.px]=14>
|
||||
<mat-select id="rec-outputmode-select" placeholder="Output mode" [(ngModel)]="recordingProperties.outputMode">
|
||||
<mat-option *ngFor="let enumerator of enumToArray(recMode)" [value]="enumerator">
|
||||
<span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div
|
||||
*ngIf="recordingProperties.hasVideo && (recordingProperties.outputMode === 'COMPOSED' || recordingProperties.outputMode === 'COMPOSED_QUICK_START')"
|
||||
id="rec-layout-div">
|
||||
<mat-form-field class="inner-text-input" [style.fontSize.px]=14>
|
||||
<mat-select placeholder="Recording layout" [(ngModel)]="recordingProperties.recordingLayout">
|
||||
<mat-option *ngFor="let enumerator of enumToArray(recLayouts)" [value]="enumerator">
|
||||
{{ enumerator }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field *ngIf="recordingProperties.hasVideo && recordingProperties.recordingLayout === 'CUSTOM'"
|
||||
class="inner-text-input" [style.fontSize.px]=14>
|
||||
<input matInput placeholder="Custom layout" type="text" [(ngModel)]="recordingProperties.customLayout">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div>
|
||||
<mat-checkbox id="rec-hasaudio-checkbox" [(ngModel)]="recordingProperties.hasAudio">Has audio</mat-checkbox>
|
||||
<mat-checkbox id="rec-hasvideo-checkbox" [(ngModel)]="recordingProperties.hasVideo">Has video</mat-checkbox>
|
||||
<mat-form-field
|
||||
*ngIf="recordingProperties.hasVideo && (recordingProperties.outputMode === 'COMPOSED' || recordingProperties.outputMode === 'COMPOSED_QUICK_START')"
|
||||
id="recording-resolution-form" class="inner-text-input" [style.fontSize.px]=14>
|
||||
<input matInput id="recording-resolution-field" placeholder="Resolution" type="text"
|
||||
[(ngModel)]="recordingProperties.resolution">
|
||||
</mat-form-field>
|
||||
<mat-form-field
|
||||
*ngIf="recordingProperties.hasVideo && (recordingProperties.outputMode === 'COMPOSED' || recordingProperties.outputMode === 'COMPOSED_QUICK_START')"
|
||||
id="recording-framerate-form" class="inner-text-input" [style.fontSize.px]=14>
|
||||
<input matInput id="recording-framerate-field" placeholder="FrameRate" type="number"
|
||||
[(ngModel)]="recordingProperties.frameRate">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<mat-form-field class="inner-text-input" [style.fontSize.px]=14>
|
||||
<input matInput id="recording-id-field" placeholder="recordingId" [(ngModel)]="recordingId">
|
||||
</mat-form-field>
|
||||
<div>
|
||||
<button mat-button id="list-recording-btn" (click)="listRecordings()">List recordings</button>
|
||||
<button mat-button id="start-recording-btn" (click)="startRecording()">Start recording</button>
|
||||
<button id="rec-properties-btn" mat-icon-button style="width: 24px; height: 24px; line-height: 24px;"
|
||||
title="Recording properties" (click)="toggleRecProperties()">
|
||||
<mat-icon style="font-size: 18px; line-height: 18px; width: 18px; height: 18px"
|
||||
aria-label="Recording properties">
|
||||
{{recPropertiesIcon}}</mat-icon>
|
||||
</button>
|
||||
<app-recording-properties *ngIf="showRecProperties" [(recordingProperties)]="recordingProperties">
|
||||
</app-recording-properties>
|
||||
</div>
|
||||
<div>
|
||||
<mat-form-field class="inner-text-input" [style.fontSize.px]=14>
|
||||
<input matInput id="recording-id-field" placeholder="recordingId" [(ngModel)]="recordingId">
|
||||
</mat-form-field>
|
||||
<button mat-button id="stop-recording-btn" (click)="stopRecording()" [disabled]="!recordingId">Stop
|
||||
recording</button>
|
||||
<button mat-button id="get-recording-btn" (click)="getRecording()" [disabled]="!recordingId">Get
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Component, Inject } from '@angular/core';
|
||||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
|
||||
|
||||
import { OpenVidu as OpenViduAPI, Session as SessionAPI, Recording, RecordingProperties, RecordingLayout, ConnectionProperties, OpenViduRole } from 'openvidu-node-client';
|
||||
import { OpenVidu as OpenViduAPI, Session as SessionAPI, RecordingProperties, ConnectionProperties, OpenViduRole } from 'openvidu-node-client';
|
||||
|
||||
@Component({
|
||||
selector: 'app-session-api-dialog',
|
||||
|
|
@ -19,8 +19,6 @@ export class SessionApiDialogComponent {
|
|||
response: string;
|
||||
|
||||
recordingProperties: RecordingProperties;
|
||||
recMode = Recording.OutputMode;
|
||||
recLayouts = RecordingLayout;
|
||||
openviduRoles = OpenViduRole;
|
||||
customLayout = '';
|
||||
recPropertiesIcon = 'add_circle';
|
||||
|
|
|
|||
|
|
@ -1,47 +1,52 @@
|
|||
mat-radio-button {
|
||||
margin-left: 5px;
|
||||
font-size: 14px;
|
||||
margin-left: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
mat-radio-button:first-child {
|
||||
margin-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
font-weight: 400;
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
font-weight: 400;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#turn-div {
|
||||
padding-bottom: 1.25em;
|
||||
padding-bottom: 1.25em;
|
||||
}
|
||||
|
||||
#turn-div mat-radio-button {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
margin-bottom: 3px;
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
#manual-turn-div {
|
||||
background-color: #f7f7f7;
|
||||
margin-top: 10px;
|
||||
padding: 5px;
|
||||
border: 1px solid #00000026;
|
||||
border-radius: 3px;
|
||||
background-color: #f7f7f7;
|
||||
margin-top: 10px;
|
||||
padding: 5px;
|
||||
border: 1px solid #00000026;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#role-div {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 15px;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
#allow-transcoding-div {
|
||||
#allow-transcoding-checkbox-div {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#record-div {
|
||||
padding-bottom: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
mat-form-field {
|
||||
margin-right: 9px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,149 +1,136 @@
|
|||
<div>
|
||||
<div fxLayout="row" fxLayoutGap="20px">
|
||||
<mat-dialog-content>
|
||||
|
||||
<div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="space-between">
|
||||
|
||||
<div>
|
||||
<h2 mat-dialog-title>Session properties</h2>
|
||||
<mat-dialog-content>
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="MediaMode" [(ngModel)]="sessionProperties.mediaMode">
|
||||
<mat-option *ngFor="let enumerator of enumToArray(mediaMode)" [value]="enumerator">
|
||||
{{ enumerator }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="RecordingMode" [(ngModel)]="sessionProperties.recordingMode"
|
||||
id="recording-mode-select">
|
||||
<mat-option *ngFor="let enumerator of enumToArray(recordingMode)" [value]="enumerator">
|
||||
<span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="DefaultOutputMode" [(ngModel)]="sessionProperties.defaultRecordingProperties.outputMode"
|
||||
id="output-mode-select">
|
||||
<mat-option *ngFor="let enumerator of enumToArray(defaultOutputMode)" [value]="enumerator">
|
||||
<span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field *ngIf="this.sessionProperties.defaultRecordingProperties.outputMode === 'COMPOSED'">
|
||||
<mat-select placeholder="DefaultRecordingLayout" [(ngModel)]="sessionProperties.defaultRecordingProperties.recordingLayout"
|
||||
id="recording-layout-select">
|
||||
<mat-option *ngFor="let enumerator of enumToArray(defaultRecordingLayout)" [value]="enumerator">
|
||||
<span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field
|
||||
*ngIf="this.sessionProperties.defaultRecordingProperties.outputMode === 'COMPOSED' && this.sessionProperties.defaultRecordingProperties.recordingLayout === 'CUSTOM'">
|
||||
<input matInput placeholder="DefaultCustomLayout" type="text"
|
||||
[(ngModel)]="sessionProperties.defaultRecordingProperties.customLayout" id="default-custom-layout-input">
|
||||
</mat-form-field>
|
||||
<div id="allow-transcoding-div">
|
||||
<mat-checkbox class="checkbox-form" [(ngModel)]="sessionProperties.allowTranscoding"
|
||||
id="allow-transcoding-checkbox">Allow Transcoding</mat-checkbox>
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="MediaMode" [(ngModel)]="sessionProperties.mediaMode">
|
||||
<mat-option *ngFor="let enumerator of enumToArray(mediaMode)" [value]="enumerator">
|
||||
{{ enumerator }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="RecordingMode" [(ngModel)]="sessionProperties.recordingMode"
|
||||
id="recording-mode-select">
|
||||
<mat-option *ngFor="let enumerator of enumToArray(recordingMode)" [value]="enumerator">
|
||||
<span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<app-recording-properties [(recordingProperties)]="sessionProperties.defaultRecordingProperties">
|
||||
</app-recording-properties>
|
||||
|
||||
<div id="allow-transcoding-checkbox-div">
|
||||
<mat-checkbox class="checkbox-form" [(ngModel)]="sessionProperties.allowTranscoding"
|
||||
id="allow-transcoding-checkbox">Allow Transcoding</mat-checkbox>
|
||||
</div>
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="ForcedVideoCodec" [(ngModel)]="sessionProperties.forcedVideoCodec"
|
||||
id="forced-video-codec-select">
|
||||
<mat-option *ngFor="let enumerator of enumToArray(forceVideoCodec)" [value]="enumerator">
|
||||
<span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="CustomSessionId" type="text" [(ngModel)]="sessionProperties.customSessionId">
|
||||
</mat-form-field>
|
||||
|
||||
<label class="label">Turn configuration</label>
|
||||
<div id="turn-div">
|
||||
<mat-radio-group name="Turn configuration" [(ngModel)]="turnConf">
|
||||
<mat-radio-button value="auto">Auto</mat-radio-button>
|
||||
<mat-radio-button value="freeice">Freeice</mat-radio-button>
|
||||
<mat-radio-button value="manual">Manual</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<div *ngIf="turnConf === 'manual'" id="manual-turn-div">
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput placeholder="url" type="text" [(ngModel)]="manualTurnConf.urls[0]">
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 48%; padding-right: 2px">
|
||||
<input matInput placeholder="user" type="text" [(ngModel)]="manualTurnConf.username">
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 48%; padding-left: 2px">
|
||||
<input matInput placeholder="pass" type="text" [(ngModel)]="manualTurnConf.credential">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="ForcedVideoCodec" [(ngModel)]="sessionProperties.forcedVideoCodec"
|
||||
id="forced-video-codec-select">
|
||||
<mat-option *ngFor="let enumerator of enumToArray(forceVideoCodec)" [value]="enumerator">
|
||||
<span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="CustomSessionId" type="text" [(ngModel)]="sessionProperties.customSessionId">
|
||||
</mat-form-field>
|
||||
<label class="label">Turn configuration</label>
|
||||
<div id="turn-div">
|
||||
<mat-radio-group name="Turn configuration" [(ngModel)]="turnConf">
|
||||
<mat-radio-button value="auto">Auto</mat-radio-button>
|
||||
<mat-radio-button value="freeice">Freeice</mat-radio-button>
|
||||
<mat-radio-button value="manual">Manual</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<div *ngIf="turnConf === 'manual'" id="manual-turn-div">
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput placeholder="url" type="text" [(ngModel)]="manualTurnConf.urls[0]">
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 48%; padding-right: 2px">
|
||||
<input matInput placeholder="user" type="text" [(ngModel)]="manualTurnConf.username">
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 48%; padding-left: 2px">
|
||||
<input matInput placeholder="pass" type="text" [(ngModel)]="manualTurnConf.credential">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</mat-dialog-content>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 mat-dialog-title>User configuration</h2>
|
||||
<mat-dialog-content>
|
||||
<label class="label">Role</label>
|
||||
<div id="role-div">
|
||||
<mat-radio-group name="Role" [(ngModel)]="connectionProperties.role">
|
||||
<mat-radio-button id="radio-btn-sub" value="SUBSCRIBER">SUB</mat-radio-button>
|
||||
<mat-radio-button id="radio-btn-pub" value="PUBLISHER">PUB</mat-radio-button>
|
||||
<mat-radio-button id="radio-btn-mod" value="MODERATOR">MOD</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
|
||||
<label class="label" style="margin-bottom: 8px">Kurento config</label>
|
||||
<div id="kurento-config-div">
|
||||
<mat-form-field style="width: 39%; margin-right: 5px">
|
||||
<input matInput placeholder="Max recv" type="number"
|
||||
[(ngModel)]="connectionProperties.kurentoOptions.videoMaxRecvBandwidth">
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 39%">
|
||||
<input matInput placeholder="Min recv" type="number"
|
||||
[(ngModel)]="connectionProperties.kurentoOptions.videoMinRecvBandwidth">
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 39%; margin-right: 5px">
|
||||
<input matInput placeholder="Max send" type="number"
|
||||
[(ngModel)]="connectionProperties.kurentoOptions.videoMaxSendBandwidth">
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 39%">
|
||||
<input matInput placeholder="Min send" type="number"
|
||||
[(ngModel)]="connectionProperties.kurentoOptions.videoMinSendBandwidth">
|
||||
</mat-form-field>
|
||||
<mat-chip-list *ngIf="filters.length > 0">
|
||||
<mat-chip style="height: 20px" *ngFor="let filterName of filters"
|
||||
(click)="filters.splice(filters.indexOf(filterName, 1))">{{filterName}}</mat-chip>
|
||||
</mat-chip-list>
|
||||
<mat-form-field style="width: 70%">
|
||||
<input matInput placeholder="Allowed filter" id="allowed-filter-input" type="text" [(ngModel)]="filterName">
|
||||
</mat-form-field>
|
||||
<button id="add-allowed-filter-btn" mat-icon-button style="width: 24px; height: 24px; line-height: 24px;"
|
||||
title="Add allowed filter" (click)="filters.push(filterName); filterName = '';">
|
||||
<mat-icon style="font-size: 18px; line-height: 18px; width: 18px; height: 18px"
|
||||
aria-label="Add allowed filter">add_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<label class="label">Role</label>
|
||||
<div id="role-div">
|
||||
<mat-radio-group name="Role" [(ngModel)]="connectionProperties.role">
|
||||
<mat-radio-button id="radio-btn-sub" value="SUBSCRIBER">SUB</mat-radio-button>
|
||||
<mat-radio-button id="radio-btn-pub" value="PUBLISHER">PUB</mat-radio-button>
|
||||
<mat-radio-button id="radio-btn-mod" value="MODERATOR">MOD</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
|
||||
<div id="record-div">
|
||||
<mat-checkbox class="checkbox-form" [(ngModel)]="connectionProperties.record" id="record-checkbox">Record
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
<label class="label" style="margin-bottom: 8px">Kurento config</label>
|
||||
<div id="kurento-config-div">
|
||||
<mat-form-field style="width: 39%; margin-right: 5px">
|
||||
<input matInput placeholder="Max recv" type="number"
|
||||
[(ngModel)]="connectionProperties.kurentoOptions.videoMaxRecvBandwidth">
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 39%">
|
||||
<input matInput placeholder="Min recv" type="number"
|
||||
[(ngModel)]="connectionProperties.kurentoOptions.videoMinRecvBandwidth">
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 39%; margin-right: 5px">
|
||||
<input matInput placeholder="Max send" type="number"
|
||||
[(ngModel)]="connectionProperties.kurentoOptions.videoMaxSendBandwidth">
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 39%">
|
||||
<input matInput placeholder="Min send" type="number"
|
||||
[(ngModel)]="connectionProperties.kurentoOptions.videoMinSendBandwidth">
|
||||
</mat-form-field>
|
||||
<mat-chip-list *ngIf="filters.length > 0">
|
||||
<mat-chip style="height: 20px" *ngFor="let filterName of filters"
|
||||
(click)="filters.splice(filters.indexOf(filterName, 1))">{{filterName}}</mat-chip>
|
||||
</mat-chip-list>
|
||||
<mat-form-field style="width: 70%">
|
||||
<input matInput placeholder="Allowed filter" id="allowed-filter-input" type="text" [(ngModel)]="filterName">
|
||||
</mat-form-field>
|
||||
<button id="add-allowed-filter-btn" mat-icon-button style="width: 24px; height: 24px; line-height: 24px;"
|
||||
title="Add allowed filter" (click)="filters.push(filterName); filterName = '';">
|
||||
<mat-icon style="font-size: 18px; line-height: 18px; width: 18px; height: 18px"
|
||||
aria-label="Add allowed filter">
|
||||
add_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<label class="label">Token</label>
|
||||
<div id="custom-token-div">
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Custom token" type="text" [(ngModel)]="customToken">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div id="record-div">
|
||||
<mat-checkbox class="checkbox-form" [(ngModel)]="connectionProperties.record" id="record-checkbox">Record
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
|
||||
<div id="force-publishing-div">
|
||||
<mat-checkbox class="checkbox-form" [(ngModel)]="forcePublishing" id="force-publishing-checkbox">Force
|
||||
publishing
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
<label class="label">Token</label>
|
||||
<div id="custom-token-div">
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Custom token" type="text" [(ngModel)]="customToken">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div id="force-publishing-div">
|
||||
<mat-checkbox class="checkbox-form" [(ngModel)]="forcePublishing" id="force-publishing-checkbox">Force
|
||||
publishing
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
|
||||
</mat-dialog-content>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-dialog-actions>
|
||||
<button id="cancel-btn" mat-button [mat-dialog-close]="undefined">CANCEL</button>
|
||||
<button id="save-btn" mat-button
|
||||
[mat-dialog-close]="{sessionProperties: sessionProperties, turnConf: turnConf, manualTurnConf: manualTurnConf, customToken: customToken, forcePublishing: forcePublishing, connectionProperties: generateConnectionProperties()}">SAVE</button>
|
||||
</mat-dialog-actions>
|
||||
</div>
|
||||
</div>
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions>
|
||||
<button id="cancel-btn" mat-button [mat-dialog-close]="undefined">CANCEL</button>
|
||||
<button id="save-btn" mat-button
|
||||
[mat-dialog-close]="{sessionProperties: sessionProperties, turnConf: turnConf, manualTurnConf: manualTurnConf, customToken: customToken, forcePublishing: forcePublishing, connectionProperties: generateConnectionProperties()}">SAVE</button>
|
||||
</mat-dialog-actions>
|
||||
|
|
|
|||
|
|
@ -93,9 +93,18 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
|
|||
mediaMode: MediaMode.ROUTED,
|
||||
recordingMode: RecordingMode.MANUAL,
|
||||
defaultRecordingProperties: {
|
||||
name: '',
|
||||
hasAudio: true,
|
||||
hasVideo: true,
|
||||
outputMode: Recording.OutputMode.COMPOSED,
|
||||
recordingLayout: RecordingLayout.BEST_FIT,
|
||||
customLayout: ''
|
||||
resolution: '1280x720',
|
||||
frameRate: 25,
|
||||
shmSize: 536870912,
|
||||
customLayout: '',
|
||||
mediaNode: {
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
customSessionId: '',
|
||||
forcedVideoCodec: null,
|
||||
|
|
@ -600,8 +609,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
|
|||
customToken: this.customToken,
|
||||
forcePublishing: this.forcePublishing,
|
||||
connectionProperties: this.connectionProperties,
|
||||
},
|
||||
width: '450px'
|
||||
}
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
|
|
@ -626,22 +634,8 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
|
|||
openVidu: !!this.OV_NodeClient ? this.OV_NodeClient : new OpenViduAPI(this.openviduUrl, this.openviduSecret),
|
||||
session: this.sessionAPI,
|
||||
sessionId: !!this.session ? this.session.sessionId : this.sessionName,
|
||||
recordingProperties: !!this.recordingProperties ? this.recordingProperties :
|
||||
{
|
||||
name: '',
|
||||
outputMode: this.sessionProperties.defaultRecordingProperties.outputMode,
|
||||
recordingLayout: this.sessionProperties.defaultRecordingProperties.recordingLayout,
|
||||
customLayout: this.sessionProperties.defaultRecordingProperties.customLayout,
|
||||
resolution: '1280x720',
|
||||
frameRate: 25,
|
||||
hasAudio: true,
|
||||
hasVideo: true,
|
||||
mediaNode: {
|
||||
id: ''
|
||||
}
|
||||
}
|
||||
recordingProperties: !!this.recordingProperties ? this.recordingProperties : this.sessionProperties.defaultRecordingProperties
|
||||
},
|
||||
width: '425px',
|
||||
disableClose: true
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue