statsButtons = user.getDriver().findElements(By.className("stats-button"));
+ for(WebElement statButton: statsButtons) {
+ statButton.click();
+ Thread.sleep(1000);
+ String videoCodecUsed = user.getDriver().findElement(By.id("video-codec-used")).getText();
+ assertEquals(videoCodecUsed, "video/" + codecToCheck);
+ user.getDriver().findElement(By.id("close-dialog-btn")).click();
+ }
+
+ restClient.rest(HttpMethod.DELETE, "/openvidu/api/sessions/" + sessionName, HttpStatus.SC_NO_CONTENT);
+ }
+
+ private void forceCodecNotSupportedCodec(VideoCodec codec, boolean allowTranscoding) throws Exception {
+ CustomHttpClient restClient = new CustomHttpClient(OPENVIDU_URL, "OPENVIDUAPP", OPENVIDU_SECRET);
+
+ String sessionName = "CUSTOM_SESSION_CODEC_NOT_SUPPORTED";
+
+ // Configure Session to force Codec
+ user.getDriver().findElement(By.id("add-user-btn")).click();
+ WebElement sessionNameElem = user.getDriver().findElement(By.id("session-name-input-0"));
+ sessionNameElem.clear();
+ sessionNameElem.sendKeys(sessionName);
+ user.getDriver().findElement(By.id("session-settings-btn-0")).click();
+ Thread.sleep(1000);
+
+ user.getDriver().findElement(By.id("forced-video-codec-select")).click();
+ Thread.sleep(1000);
+ user.getDriver().findElement(By.id("option-" + codec.name())).click();
+
+ if(allowTranscoding) {
+ user.getDriver().findElement(By.id("allow-transcoding-checkbox")).click();
+ }
+
+ user.getDriver().findElement(By.id("save-btn")).click();
+ Thread.sleep(1000);
+
+ if (allowTranscoding) {
+ // If transcoding is enabled everything should work fine
+
+ // Join another user
+ user.getDriver().findElement(By.id("add-user-btn")).click();
+ WebElement sessionName2 = user.getDriver().findElement(By.id("session-name-input-1"));
+ sessionName2.clear();
+ sessionName2.sendKeys(sessionName);
+
+ user.getDriver().findElements(By.className("join-btn")).forEach(el -> el.sendKeys(Keys.ENTER));
+
+ user.getEventManager().waitUntilEventReaches("connectionCreated", 4);
+ user.getEventManager().waitUntilEventReaches("accessAllowed", 2);
+ user.getEventManager().waitUntilEventReaches("streamCreated", 4);
+ user.getEventManager().waitUntilEventReaches("streamPlaying", 4);
+
+ final int numberOfVideos = user.getDriver().findElements(By.tagName("video")).size();
+ Assert.assertEquals("Expected 4 videos but found " + numberOfVideos, 4, numberOfVideos);
+ Assert.assertTrue("Videos were expected to have audio and video tracks", user.getEventManager()
+ .assertMediaTracks(user.getDriver().findElements(By.tagName("video")), true, true));
+
+ } else {
+ // If transcoding not allowed it should return an alert with error
+ user.getDriver().findElements(By.className("join-btn")).forEach(el -> el.sendKeys(Keys.ENTER));
+ user.getWaiter().until(ExpectedConditions.alertIsPresent());
+ Alert alert = user.getDriver().switchTo().alert();
+ Assert.assertTrue("Alert does not contain expected text",
+ alert.getText().contains("Error forcing codec: '" + codec.name() + "'"));
+ alert.accept();
+ }
+
+
+ restClient.rest(HttpMethod.DELETE, "/openvidu/api/sessions/" + sessionName, HttpStatus.SC_NO_CONTENT);
+ Thread.sleep(1000);
+ }
}
diff --git a/openvidu-testapp/src/app/app.module.ts b/openvidu-testapp/src/app/app.module.ts
index 61f3323a..e838fb8e 100644
--- a/openvidu-testapp/src/app/app.module.ts
+++ b/openvidu-testapp/src/app/app.module.ts
@@ -25,6 +25,7 @@ import { EventsDialogComponent } from './components/dialogs/events-dialog/events
import { PublisherPropertiesDialogComponent } from './components/dialogs/publisher-properties-dialog/publisher-properties-dialog.component';
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 { OpenviduRestService } from './services/openvidu-rest.service';
import { OpenviduParamsService } from './services/openvidu-params.service';
@@ -48,6 +49,7 @@ import { MuteSubscribersService } from './services/mute-subscribers.service';
PublisherPropertiesDialogComponent,
ScenarioPropertiesDialogComponent,
FilterDialogComponent,
+ ShowCodecDialogComponent,
UsersTableComponent,
TableVideoComponent
],
@@ -74,7 +76,8 @@ import { MuteSubscribersService } from './services/mute-subscribers.service';
LocalRecordingDialogComponent,
PublisherPropertiesDialogComponent,
ScenarioPropertiesDialogComponent,
- FilterDialogComponent
+ FilterDialogComponent,
+ ShowCodecDialogComponent
],
bootstrap: [AppComponent]
})
diff --git a/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.css b/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.css
index f83aa643..d151819b 100644
--- a/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.css
+++ b/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.css
@@ -38,6 +38,10 @@ mat-radio-button:first-child {
padding-bottom: 15px;
}
+#allow-transcoding-div {
+ margin-bottom: 10px;
+}
+
#record-div {
padding-bottom: 20px;
-}
\ No newline at end of file
+}
diff --git a/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.html b/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.html
index 5ed01d00..997dda60 100644
--- a/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.html
+++ b/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.html
@@ -39,6 +39,18 @@
+
+ Allow Transcoding
+
+
+
+
+ {{ enumerator }}
+
+
+
diff --git a/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.ts b/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.ts
index 48d6ab98..965fc831 100644
--- a/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.ts
+++ b/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.ts
@@ -1,7 +1,7 @@
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
-import { SessionProperties, MediaMode, Recording, RecordingMode, RecordingLayout, ConnectionProperties } from 'openvidu-node-client';
+import { SessionProperties, MediaMode, Recording, RecordingMode, RecordingLayout, ConnectionProperties, VideoCodec } from 'openvidu-node-client';
@Component({
selector: 'app-session-properties-dialog',
@@ -16,6 +16,7 @@ export class SessionPropertiesDialogComponent {
customToken: string;
forcePublishing: boolean = false;
connectionProperties: ConnectionProperties;
+ forceVideoCodec = VideoCodec;
filterName = 'GStreamerFilter';
filters: string[] = [];
diff --git a/openvidu-testapp/src/app/components/dialogs/show-codec-dialog/show-codec-dialog.component.ts b/openvidu-testapp/src/app/components/dialogs/show-codec-dialog/show-codec-dialog.component.ts
new file mode 100644
index 00000000..d33cc4cc
--- /dev/null
+++ b/openvidu-testapp/src/app/components/dialogs/show-codec-dialog/show-codec-dialog.component.ts
@@ -0,0 +1,27 @@
+import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+@Component({
+ selector: 'app-codec-used-dialog',
+ template: `
+
+
Used Codec: {{usedVideoCodec}}
+
+
+
+ `,
+ styles: [`
+ #app-codec-dialog-container {
+ text-align: center
+ }
+ `]
+})
+export class ShowCodecDialogComponent {
+
+ usedVideoCodec;
+
+ constructor(public dialogRef: MatDialogRef,
+ @Inject(MAT_DIALOG_DATA) public data) {
+ this.usedVideoCodec = data.usedVideoCodec;
+ }
+}
diff --git a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts
index 41578430..ceb940d0 100644
--- a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts
+++ b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts
@@ -93,7 +93,9 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
defaultOutputMode: Recording.OutputMode.COMPOSED,
defaultRecordingLayout: RecordingLayout.BEST_FIT,
defaultCustomLayout: '',
- customSessionId: ''
+ customSessionId: '',
+ forcedVideoCodec: null,
+ allowTranscoding: null
};
publisherProperties: PublisherProperties = {
@@ -521,7 +523,12 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
this.republishPossible = false;
}).catch((error: OpenViduError) => {
console.error(error);
- alert(error.name + ": " + error.message);
+ if (!error.name) {
+ alert(error);
+ } else {
+ alert(error.name + ": " + error.message);
+ }
+
this.republishPossible = true;
this.session.unpublish(this.publisher);
delete this.publisher;
diff --git a/openvidu-testapp/src/app/components/video/video.component.html b/openvidu-testapp/src/app/components/video/video.component.html
index 5e52c0e4..0a9830f8 100644
--- a/openvidu-testapp/src/app/components/video/video.component.html
+++ b/openvidu-testapp/src/app/components/video/video.component.html
@@ -5,6 +5,9 @@
+
@@ -73,4 +79,4 @@
-
\ No newline at end of file
+
diff --git a/openvidu-testapp/src/app/components/video/video.component.ts b/openvidu-testapp/src/app/components/video/video.component.ts
index f9e99f91..2d1e5f24 100644
--- a/openvidu-testapp/src/app/components/video/video.component.ts
+++ b/openvidu-testapp/src/app/components/video/video.component.ts
@@ -1,5 +1,6 @@
import { Component, Input, OnInit, Output, EventEmitter, OnDestroy } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material';
+import { ShowCodecDialogComponent } from '../dialogs/show-codec-dialog/show-codec-dialog.component';
import {
StreamManager,
@@ -67,664 +68,692 @@ export class VideoComponent implements OnInit, OnDestroy {
recordIcon = 'fiber_manual_record';
pauseRecordIcon = '';
- constructor(private dialog: MatDialog, private muteSubscribersService: MuteSubscribersService
- ) { }
+ // Stats
+ usedVideoCodec: string;
- ngOnInit() {
+ constructor(private dialog: MatDialog, private muteSubscribersService: MuteSubscribersService) { }
- if (this.streamManager.remote) {
- // Init subscriber events
- this.eventCollection = {
- videoElementCreated: true,
- videoElementDestroyed: true,
- streamPlaying: true,
- streamAudioVolumeChange: false,
- streamPropertyChanged: false
- };
- this.updateSubscriberEvents({
- videoElementCreated: false,
- videoElementDestroyed: false,
- streamPlaying: false,
- streamAudioVolumeChange: true,
- streamPropertyChanged: true
- });
+ ngOnInit() {
- } else {
- // Init publisher events
- this.eventCollection = {
- videoElementCreated: true,
- videoElementDestroyed: true,
- streamPlaying: true,
- streamAudioVolumeChange: false,
- accessAllowed: true,
- accessDenied: true,
- accessDialogOpened: true,
- accessDialogClosed: true,
- streamCreated: true,
- streamDestroyed: true,
- streamPropertyChanged: false
- };
- this.updatePublisherEvents(
- this.streamManager,
- {
- videoElementCreated: false,
- videoElementDestroyed: false,
- streamPlaying: false,
- streamAudioVolumeChange: true,
- accessAllowed: false,
- accessDenied: false,
- accessDialogOpened: false,
- accessDialogClosed: false,
- streamCreated: false,
- streamDestroyed: false,
- streamPropertyChanged: true
- });
- this.sendAudio = this.streamManager.stream.hasAudio;
- this.sendVideo = this.streamManager.stream.hasVideo;
- this.audioMuted = !this.properties.publishAudio;
- this.videoMuted = !this.properties.publishVideo;
- this.pubSubAudioIcon = this.audioMuted ? 'mic_off' : 'mic';
- this.pubSubVideoIcon = this.videoMuted ? 'videocam_off' : 'videocam';
- this.optionsVideo = this.streamManager.stream.typeOfVideo;
- }
+ if (this.streamManager.remote) {
+ // Init subscriber events
+ this.eventCollection = {
+ videoElementCreated: true,
+ videoElementDestroyed: true,
+ streamPlaying: true,
+ streamAudioVolumeChange: false,
+ streamPropertyChanged: false
+ };
+ this.updateSubscriberEvents({
+ videoElementCreated: false,
+ videoElementDestroyed: false,
+ streamPlaying: false,
+ streamAudioVolumeChange: true,
+ streamPropertyChanged: true
+ });
- this.muteSubscribersSubscription = this.muteSubscribersService.mutedEvent$.subscribe(muteOrUnmute => {
- if (this.streamManager.remote) {
- this.streamManager.videos.forEach(v => {
- v.video.muted = muteOrUnmute;
- });
- }
- });
- }
+ } else {
+ // Init publisher events
+ this.eventCollection = {
+ videoElementCreated: true,
+ videoElementDestroyed: true,
+ streamPlaying: true,
+ streamAudioVolumeChange: false,
+ accessAllowed: true,
+ accessDenied: true,
+ accessDialogOpened: true,
+ accessDialogClosed: true,
+ streamCreated: true,
+ streamDestroyed: true,
+ streamPropertyChanged: false
+ };
+ this.updatePublisherEvents(
+ this.streamManager,
+ {
+ videoElementCreated: false,
+ videoElementDestroyed: false,
+ streamPlaying: false,
+ streamAudioVolumeChange: true,
+ accessAllowed: false,
+ accessDenied: false,
+ accessDialogOpened: false,
+ accessDialogClosed: false,
+ streamCreated: false,
+ streamDestroyed: false,
+ streamPropertyChanged: true
+ });
+ this.sendAudio = this.streamManager.stream.hasAudio;
+ this.sendVideo = this.streamManager.stream.hasVideo;
+ this.audioMuted = !this.properties.publishAudio;
+ this.videoMuted = !this.properties.publishVideo;
+ this.pubSubAudioIcon = this.audioMuted ? 'mic_off' : 'mic';
+ this.pubSubVideoIcon = this.videoMuted ? 'videocam_off' : 'videocam';
+ this.optionsVideo = this.streamManager.stream.typeOfVideo;
+ }
- ngOnDestroy() {
- if (!!this.recorder) {
- this.recorder.clean();
- }
- if (!!this.muteSubscribersSubscription) { this.muteSubscribersSubscription.unsubscribe(); }
- }
+ this.muteSubscribersSubscription = this.muteSubscribersService.mutedEvent$.subscribe(muteOrUnmute => {
+ if (this.streamManager.remote) {
+ this.streamManager.videos.forEach(v => {
+ v.video.muted = muteOrUnmute;
+ });
+ }
+ });
+ }
- subUnsub() {
- const subscriber: Subscriber = this.streamManager;
- if (this.subbed) {
- this.streamManager.stream.session.unsubscribe(subscriber);
- this.restartRecorder();
+ ngOnDestroy() {
+ if (!!this.recorder) {
+ this.recorder.clean();
+ }
+ if (!!this.muteSubscribersSubscription) { this.muteSubscribersSubscription.unsubscribe(); }
+ }
- this.pubSubVideoIcon = '';
- this.pubSubAudioIcon = '';
- this.recordIcon = '';
- this.pauseRecordIcon = '';
- this.pubSubIcon = 'play_arrow';
- this.subbedVideo = false;
- this.subbedAudio = false;
- } else {
- const oldValues = {
- videoElementCreated: this.eventCollection.videoElementCreated,
- videoElementDestroyed: this.eventCollection.videoElementDestroyed,
- streamPlaying: this.eventCollection.streamPlaying,
- streamAudioVolumeChange: this.eventCollection.streamAudioVolumeChange,
- streamPropertyChanged: this.eventCollection.streamPropertyChanged
- };
- this.streamManager = this.streamManager.stream.session.subscribe(subscriber.stream, undefined);
- this.reSubbed.emit(this.streamManager);
+ subUnsub() {
+ const subscriber: Subscriber = this.streamManager;
+ if (this.subbed) {
+ this.streamManager.stream.session.unsubscribe(subscriber);
+ this.restartRecorder();
- this.pubSubVideoIcon = 'videocam';
- this.pubSubAudioIcon = 'mic';
- this.recordIcon = 'fiber_manual_record';
- this.pauseRecordIcon = '';
- this.pubSubIcon = 'stop';
- this.subbedVideo = true;
- this.subbedAudio = true;
+ this.pubSubVideoIcon = '';
+ this.pubSubAudioIcon = '';
+ this.recordIcon = '';
+ this.pauseRecordIcon = '';
+ this.pubSubIcon = 'play_arrow';
+ this.subbedVideo = false;
+ this.subbedAudio = false;
+ } else {
+ const oldValues = {
+ videoElementCreated: this.eventCollection.videoElementCreated,
+ videoElementDestroyed: this.eventCollection.videoElementDestroyed,
+ streamPlaying: this.eventCollection.streamPlaying,
+ streamAudioVolumeChange: this.eventCollection.streamAudioVolumeChange,
+ streamPropertyChanged: this.eventCollection.streamPropertyChanged
+ };
+ this.streamManager = this.streamManager.stream.session.subscribe(subscriber.stream, undefined);
+ this.reSubbed.emit(this.streamManager);
- this.updateSubscriberEvents(oldValues);
- }
- this.subbed = !this.subbed;
- }
+ this.pubSubVideoIcon = 'videocam';
+ this.pubSubAudioIcon = 'mic';
+ this.recordIcon = 'fiber_manual_record';
+ this.pauseRecordIcon = '';
+ this.pubSubIcon = 'stop';
+ this.subbedVideo = true;
+ this.subbedAudio = true;
- subUnsubVideo(connectionId: string) {
- const subscriber: Subscriber = this.streamManager;
- this.subbedVideo = !this.subbedVideo;
- subscriber.subscribeToVideo(this.subbedVideo);
- this.pubSubVideoIcon = this.subbedVideo ? 'videocam' : 'videocam_off';
- }
+ this.updateSubscriberEvents(oldValues);
+ }
+ this.subbed = !this.subbed;
+ }
- subUnsubAudio(connectionId: string) {
- const subscriber: Subscriber = this.streamManager;
- this.subbedAudio = !this.subbedAudio;
- subscriber.subscribeToAudio(this.subbedAudio);
- this.pubSubAudioIcon = this.subbedAudio ? 'mic' : 'mic_off';
- }
+ subUnsubVideo(connectionId: string) {
+ const subscriber: Subscriber = this.streamManager;
+ this.subbedVideo = !this.subbedVideo;
+ subscriber.subscribeToVideo(this.subbedVideo);
+ this.pubSubVideoIcon = this.subbedVideo ? 'videocam' : 'videocam_off';
+ }
- pubUnpub() {
- const publisher: Publisher = this.streamManager;
- if (this.unpublished) {
- this.streamManager.stream.session.publish(publisher)
- .then(() => {
- console.log(publisher);
- })
- .catch(e => {
- console.error(e);
- });
- } else {
- this.streamManager.stream.session.unpublish(publisher);
- }
- this.unpublished = !this.unpublished;
- this.unpublished ? this.pubSubIcon = 'play_arrow' : this.pubSubIcon = 'stop';
- }
+ subUnsubAudio(connectionId: string) {
+ const subscriber: Subscriber = this.streamManager;
+ this.subbedAudio = !this.subbedAudio;
+ subscriber.subscribeToAudio(this.subbedAudio);
+ this.pubSubAudioIcon = this.subbedAudio ? 'mic' : 'mic_off';
+ }
- pubUnpubVideo() {
- const publisher: Publisher = this.streamManager;
- this.videoMuted = !this.videoMuted;
- publisher.publishVideo(!this.videoMuted);
- this.pubSubVideoIcon = this.videoMuted ? 'videocam_off' : 'videocam';
- }
+ pubUnpub() {
+ const publisher: Publisher = this.streamManager;
+ if (this.unpublished) {
+ this.streamManager.stream.session.publish(publisher)
+ .then(() => {
+ console.log(publisher);
+ })
+ .catch(e => {
+ console.error(e);
+ });
+ } else {
+ this.streamManager.stream.session.unpublish(publisher);
+ }
+ this.unpublished = !this.unpublished;
+ this.unpublished ? this.pubSubIcon = 'play_arrow' : this.pubSubIcon = 'stop';
+ }
- pubUnpubAudio() {
- const publisher: Publisher = this.streamManager;
- this.audioMuted = !this.audioMuted;
- publisher.publishAudio(!this.audioMuted);
- this.pubSubAudioIcon = this.audioMuted ? 'mic_off' : 'mic';
- }
+ pubUnpubVideo() {
+ const publisher: Publisher = this.streamManager;
+ this.videoMuted = !this.videoMuted;
+ publisher.publishVideo(!this.videoMuted);
+ this.pubSubVideoIcon = this.videoMuted ? 'videocam_off' : 'videocam';
+ }
- changePub() {
- let screenChange;
- if (!this.publisherChanged) {
- if (this.sendAudio && !this.sendVideo) {
- this.sendAudioChange = false;
- this.sendVideoChange = true;
- screenChange = false;
- } else if (!this.sendAudio && this.sendVideo) {
- this.sendAudioChange = true;
- this.sendVideoChange = false;
- } else if (this.sendAudio && this.sendVideo && this.optionsVideo === 'CAMERA') {
- this.sendAudioChange = false;
- this.sendVideoChange = true;
- screenChange = true;
- } else if (this.sendAudio && this.sendVideo && this.optionsVideo === 'SCREEN') {
- this.sendAudioChange = false;
- this.sendVideoChange = true;
- screenChange = false;
- }
- } else {
- this.sendAudioChange = this.sendAudio;
- this.sendVideoChange = this.sendVideo;
- screenChange = this.optionsVideo === 'SCREEN' ? true : false;
- }
+ pubUnpubAudio() {
+ const publisher: Publisher = this.streamManager;
+ this.audioMuted = !this.audioMuted;
+ publisher.publishAudio(!this.audioMuted);
+ this.pubSubAudioIcon = this.audioMuted ? 'mic_off' : 'mic';
+ }
- this.unpublished = false;
+ changePub() {
+ let screenChange;
+ if (!this.publisherChanged) {
+ if (this.sendAudio && !this.sendVideo) {
+ this.sendAudioChange = false;
+ this.sendVideoChange = true;
+ screenChange = false;
+ } else if (!this.sendAudio && this.sendVideo) {
+ this.sendAudioChange = true;
+ this.sendVideoChange = false;
+ } else if (this.sendAudio && this.sendVideo && this.optionsVideo === 'CAMERA') {
+ this.sendAudioChange = false;
+ this.sendVideoChange = true;
+ screenChange = true;
+ } else if (this.sendAudio && this.sendVideo && this.optionsVideo === 'SCREEN') {
+ this.sendAudioChange = false;
+ this.sendVideoChange = true;
+ screenChange = false;
+ }
+ } else {
+ this.sendAudioChange = this.sendAudio;
+ this.sendVideoChange = this.sendVideo;
+ screenChange = this.optionsVideo === 'SCREEN' ? true : false;
+ }
- const otherPublisher = this.OV.initPublisher(
- undefined,
- {
- audioSource: this.sendAudioChange ? undefined : false,
- videoSource: this.sendVideoChange ? (screenChange ? 'screen' : undefined) : false,
- publishAudio: !this.audioMuted,
- publishVideo: !this.videoMuted,
- resolution: '640x480',
- frameRate: 30,
- insertMode: VideoInsertMode.APPEND
- },
- (err) => {
- if (err) {
- console.warn(err);
- if (err.name === 'SCREEN_EXTENSION_NOT_INSTALLED') {
- this.dialog.open(ExtensionDialogComponent, {
- data: { url: err.message },
- disableClose: true,
- width: '250px'
- });
- }
- }
- });
- this.updatePublisherEvents(otherPublisher, {
- videoElementCreated: !this.eventCollection.videoElementCreated,
- videoElementDestroyed: !this.eventCollection.videoElementDestroyed,
- streamPlaying: !this.eventCollection.streamPlaying,
- streamAudioVolumeChange: !this.eventCollection.streamAudioVolumeChange,
- accessAllowed: !this.eventCollection.accessAllowed,
- accessDenied: !this.eventCollection.accessDenied,
- accessDialogOpened: !this.eventCollection.accessDialogOpened,
- accessDialogClosed: !this.eventCollection.accessDialogClosed,
- streamCreated: !this.eventCollection.streamCreated,
- streamDestroyed: !this.eventCollection.streamDestroyed,
- streamPropertyChanged: !this.eventCollection.streamPropertyChanged,
- });
+ this.unpublished = false;
- const oldPublisher = this.streamManager;
- if (oldPublisher.isSubscribedToRemote) {
- otherPublisher.subscribeToRemote(true);
- }
+ const otherPublisher = this.OV.initPublisher(
+ undefined,
+ {
+ audioSource: this.sendAudioChange ? undefined : false,
+ videoSource: this.sendVideoChange ? (screenChange ? 'screen' : undefined) : false,
+ publishAudio: !this.audioMuted,
+ publishVideo: !this.videoMuted,
+ resolution: '640x480',
+ frameRate: 30,
+ insertMode: VideoInsertMode.APPEND
+ },
+ (err) => {
+ if (err) {
+ console.warn(err);
+ if (err.name === 'SCREEN_EXTENSION_NOT_INSTALLED') {
+ this.dialog.open(ExtensionDialogComponent, {
+ data: { url: err.message },
+ disableClose: true,
+ width: '250px'
+ });
+ }
+ }
+ });
+ this.updatePublisherEvents(otherPublisher, {
+ videoElementCreated: !this.eventCollection.videoElementCreated,
+ videoElementDestroyed: !this.eventCollection.videoElementDestroyed,
+ streamPlaying: !this.eventCollection.streamPlaying,
+ streamAudioVolumeChange: !this.eventCollection.streamAudioVolumeChange,
+ accessAllowed: !this.eventCollection.accessAllowed,
+ accessDenied: !this.eventCollection.accessDenied,
+ accessDialogOpened: !this.eventCollection.accessDialogOpened,
+ accessDialogClosed: !this.eventCollection.accessDialogClosed,
+ streamCreated: !this.eventCollection.streamCreated,
+ streamDestroyed: !this.eventCollection.streamDestroyed,
+ streamPropertyChanged: !this.eventCollection.streamPropertyChanged,
+ });
- otherPublisher.once('accessAllowed', () => {
- if (!this.unpublished) {
- this.streamManager.stream.session.unpublish(oldPublisher);
- }
- this.streamManager.stream.session.publish(otherPublisher).then(() => {
- this.streamManager = otherPublisher;
- });
- });
+ const oldPublisher = this.streamManager;
+ if (oldPublisher.isSubscribedToRemote) {
+ otherPublisher.subscribeToRemote(true);
+ }
- this.publisherChanged = !this.publisherChanged;
- }
+ otherPublisher.once('accessAllowed', () => {
+ if (!this.unpublished) {
+ this.streamManager.stream.session.unpublish(oldPublisher);
+ }
+ this.streamManager.stream.session.publish(otherPublisher).then(() => {
+ this.streamManager = otherPublisher;
+ });
+ });
- updateSubscriberEvents(oldValues) {
- const sub: Subscriber = this.streamManager;
+ this.publisherChanged = !this.publisherChanged;
+ }
- if (this.eventCollection.videoElementCreated) {
- if (!oldValues.videoElementCreated) {
- sub.on('videoElementCreated', (event: VideoElementEvent) => {
- this.updateEventListInParent.emit({
- eventName: 'videoElementCreated',
- eventContent: event.element.id,
- event
- });
- });
- }
- } else {
- sub.off('videoElementCreated');
- }
+ updateSubscriberEvents(oldValues) {
+ const sub: Subscriber = this.streamManager;
- if (this.eventCollection.videoElementDestroyed) {
- if (!oldValues.videoElementDestroyed) {
- sub.on('videoElementDestroyed', (event: VideoElementEvent) => {
- this.showButtons = false;
- this.updateEventListInParent.emit({
- eventName: 'videoElementDestroyed',
- eventContent: event.element.id,
- event
- });
- });
- }
- } else {
- sub.off('videoElementDestroyed');
- }
+ if (this.eventCollection.videoElementCreated) {
+ if (!oldValues.videoElementCreated) {
+ sub.on('videoElementCreated', (event: VideoElementEvent) => {
+ this.updateEventListInParent.emit({
+ eventName: 'videoElementCreated',
+ eventContent: event.element.id,
+ event
+ });
+ });
+ }
+ } else {
+ sub.off('videoElementCreated');
+ }
- if (this.eventCollection.streamPlaying) {
- if (!oldValues.streamPlaying) {
- sub.on('streamPlaying', (event: StreamManagerEvent) => {
- if (!sub.stream.hasVideo) {
- this.videoClasses = 'grey-background';
- this.videoPoster = 'assets/images/volume.png';
- } else {
- this.videoClasses = '';
- this.videoPoster = '';
- }
- this.showButtons = true;
- this.updateEventListInParent.emit({
- eventName: 'streamPlaying',
- eventContent: this.streamManager.stream.streamId,
- event
- });
- });
- }
- } else {
- sub.off('streamPlaying');
- }
+ if (this.eventCollection.videoElementDestroyed) {
+ if (!oldValues.videoElementDestroyed) {
+ sub.on('videoElementDestroyed', (event: VideoElementEvent) => {
+ this.showButtons = false;
+ this.updateEventListInParent.emit({
+ eventName: 'videoElementDestroyed',
+ eventContent: event.element.id,
+ event
+ });
+ });
+ }
+ } else {
+ sub.off('videoElementDestroyed');
+ }
- if (this.eventCollection.streamAudioVolumeChange) {
- if (!oldValues.streamAudioVolumeChange) {
- sub.on('streamAudioVolumeChange', (event: StreamManagerEvent) => {
- this.updateEventListInParent.emit({
- eventName: 'streamAudioVolumeChange',
- eventContent: event.value['newValue'],
- event
- });
- });
- }
- } else {
- sub.off('streamAudioVolumeChange');
- }
+ if (this.eventCollection.streamPlaying) {
+ if (!oldValues.streamPlaying) {
+ sub.on('streamPlaying', (event: StreamManagerEvent) => {
+ if (!sub.stream.hasVideo) {
+ this.videoClasses = 'grey-background';
+ this.videoPoster = 'assets/images/volume.png';
+ } else {
+ this.videoClasses = '';
+ this.videoPoster = '';
+ }
+ this.showButtons = true;
+ this.updateEventListInParent.emit({
+ eventName: 'streamPlaying',
+ eventContent: this.streamManager.stream.streamId,
+ event
+ });
+ });
+ }
+ } else {
+ sub.off('streamPlaying');
+ }
- if (this.eventCollection.streamPropertyChanged) {
- if (!oldValues.streamPropertyChanged) {
- sub.on('streamPropertyChanged', (event: StreamPropertyChangedEvent) => {
- const newValue = event.changedProperty === 'videoDimensions' ?
- JSON.stringify(event.newValue) : event.newValue.toString();
- this.updateEventListInParent.emit({
- eventName: 'streamPropertyChanged',
- eventContent: event.changedProperty + ' [' + newValue + ']',
- event
- });
- });
- }
- } else {
- sub.off('streamPropertyChanged');
- }
- }
+ if (this.eventCollection.streamAudioVolumeChange) {
+ if (!oldValues.streamAudioVolumeChange) {
+ sub.on('streamAudioVolumeChange', (event: StreamManagerEvent) => {
+ this.updateEventListInParent.emit({
+ eventName: 'streamAudioVolumeChange',
+ eventContent: event.value['newValue'],
+ event
+ });
+ });
+ }
+ } else {
+ sub.off('streamAudioVolumeChange');
+ }
- updatePublisherEvents(pub: Publisher, oldValues: any) {
- if (this.eventCollection.videoElementCreated) {
- if (!oldValues.videoElementCreated) {
- pub.on('videoElementCreated', (event: VideoElementEvent) => {
- this.updateEventListInParent.emit({
- eventName: 'videoElementCreated',
- eventContent: event.element.id,
- event
- });
- });
- }
- } else {
- pub.off('videoElementCreated');
- }
+ if (this.eventCollection.streamPropertyChanged) {
+ if (!oldValues.streamPropertyChanged) {
+ sub.on('streamPropertyChanged', (event: StreamPropertyChangedEvent) => {
+ const newValue = event.changedProperty === 'videoDimensions' ?
+ JSON.stringify(event.newValue) : event.newValue.toString();
+ this.updateEventListInParent.emit({
+ eventName: 'streamPropertyChanged',
+ eventContent: event.changedProperty + ' [' + newValue + ']',
+ event
+ });
+ });
+ }
+ } else {
+ sub.off('streamPropertyChanged');
+ }
+ }
- if (this.eventCollection.accessAllowed) {
- if (!oldValues.accessAllowed) {
- pub.on('accessAllowed', () => {
- this.updateEventListInParent.emit({
- eventName: 'accessAllowed',
- eventContent: '',
- event: {
- type: 'accessAllowed',
- target: pub,
- cancelable: false,
- hasBeenPrevented: false,
- isDefaultPrevented: () => false,
- preventDefault: () => { },
- callDefaultBehavior: () => { }
- }
- });
- });
- }
- } else {
- pub.off('accessAllowed');
- }
+ updatePublisherEvents(pub: Publisher, oldValues: any) {
+ if (this.eventCollection.videoElementCreated) {
+ if (!oldValues.videoElementCreated) {
+ pub.on('videoElementCreated', (event: VideoElementEvent) => {
+ this.updateEventListInParent.emit({
+ eventName: 'videoElementCreated',
+ eventContent: event.element.id,
+ event
+ });
+ });
+ }
+ } else {
+ pub.off('videoElementCreated');
+ }
- if (this.eventCollection.accessDenied) {
- if (!oldValues.accessDenied) {
- pub.on('accessDenied', (error) => {
- this.updateEventListInParent.emit({
- eventName: 'accessDenied',
- eventContent: JSON.stringify(error),
- event: {
- type: 'accessDenied',
- target: pub,
- cancelable: false,
- hasBeenPrevented: false,
- isDefaultPrevented: () => false,
- preventDefault: () => { },
- callDefaultBehavior: () => { }
- }
- });
- });
- }
- } else {
- pub.off('accessDenied');
- }
+ if (this.eventCollection.accessAllowed) {
+ if (!oldValues.accessAllowed) {
+ pub.on('accessAllowed', () => {
+ this.updateEventListInParent.emit({
+ eventName: 'accessAllowed',
+ eventContent: '',
+ event: {
+ type: 'accessAllowed',
+ target: pub,
+ cancelable: false,
+ hasBeenPrevented: false,
+ isDefaultPrevented: () => false,
+ preventDefault: () => { },
+ callDefaultBehavior: () => { }
+ }
+ });
+ });
+ }
+ } else {
+ pub.off('accessAllowed');
+ }
- if (this.eventCollection.accessDialogOpened) {
- if (!oldValues.accessDialogOpened) {
- pub.on('accessDialogOpened', (e) => {
- this.updateEventListInParent.emit({
- eventName: 'accessDialogOpened',
- eventContent: '',
- event: {
- type: 'accessDialogOpened',
- target: pub,
- cancelable: false,
- hasBeenPrevented: false,
- isDefaultPrevented: () => false,
- preventDefault: () => { },
- callDefaultBehavior: () => { }
- }
- });
- });
- }
- } else {
- pub.off('accessDialogOpened');
- }
+ if (this.eventCollection.accessDenied) {
+ if (!oldValues.accessDenied) {
+ pub.on('accessDenied', (error) => {
+ this.updateEventListInParent.emit({
+ eventName: 'accessDenied',
+ eventContent: JSON.stringify(error),
+ event: {
+ type: 'accessDenied',
+ target: pub,
+ cancelable: false,
+ hasBeenPrevented: false,
+ isDefaultPrevented: () => false,
+ preventDefault: () => { },
+ callDefaultBehavior: () => { }
+ }
+ });
+ });
+ }
+ } else {
+ pub.off('accessDenied');
+ }
- if (this.eventCollection.accessDialogClosed) {
- if (!oldValues.accessDialogClosed) {
- pub.on('accessDialogClosed', (e) => {
- this.updateEventListInParent.emit({
- eventName: 'accessDialogClosed',
- eventContent: '',
- event: {
- type: 'accessDialogClosed',
- target: pub,
- cancelable: false,
- hasBeenPrevented: false,
- isDefaultPrevented: () => false,
- preventDefault: () => { },
- callDefaultBehavior: () => { }
- }
- });
- });
- }
- } else {
- pub.off('accessDialogClosed');
- }
+ if (this.eventCollection.accessDialogOpened) {
+ if (!oldValues.accessDialogOpened) {
+ pub.on('accessDialogOpened', (e) => {
+ this.updateEventListInParent.emit({
+ eventName: 'accessDialogOpened',
+ eventContent: '',
+ event: {
+ type: 'accessDialogOpened',
+ target: pub,
+ cancelable: false,
+ hasBeenPrevented: false,
+ isDefaultPrevented: () => false,
+ preventDefault: () => { },
+ callDefaultBehavior: () => { }
+ }
+ });
+ });
+ }
+ } else {
+ pub.off('accessDialogOpened');
+ }
- if (this.eventCollection.streamCreated) {
- if (!oldValues.streamCreated) {
- pub.on('streamCreated', (event: StreamEvent) => {
- this.updateEventListInParent.emit({
- eventName: 'streamCreated',
- eventContent: event.stream.streamId,
- event
- });
- });
- }
- } else {
- pub.off('streamCreated');
- }
+ if (this.eventCollection.accessDialogClosed) {
+ if (!oldValues.accessDialogClosed) {
+ pub.on('accessDialogClosed', (e) => {
+ this.updateEventListInParent.emit({
+ eventName: 'accessDialogClosed',
+ eventContent: '',
+ event: {
+ type: 'accessDialogClosed',
+ target: pub,
+ cancelable: false,
+ hasBeenPrevented: false,
+ isDefaultPrevented: () => false,
+ preventDefault: () => { },
+ callDefaultBehavior: () => { }
+ }
+ });
+ });
+ }
+ } else {
+ pub.off('accessDialogClosed');
+ }
- if (this.eventCollection.streamDestroyed) {
- if (!oldValues.streamDestroyed) {
- pub.on('streamDestroyed', (event: StreamEvent) => {
- this.updateEventListInParent.emit({
- eventName: 'streamDestroyed',
- eventContent: event.stream.streamId,
- event
- });
- if (event.reason.indexOf('forceUnpublish') !== -1) {
- this.unpublished = !this.unpublished;
- this.unpublished ? this.pubSubIcon = 'play_arrow' : this.pubSubIcon = 'stop';
- }
- });
- }
- } else {
- pub.off('streamDestroyed');
- }
+ if (this.eventCollection.streamCreated) {
+ if (!oldValues.streamCreated) {
+ pub.on('streamCreated', (event: StreamEvent) => {
+ this.updateEventListInParent.emit({
+ eventName: 'streamCreated',
+ eventContent: event.stream.streamId,
+ event
+ });
+ });
+ }
+ } else {
+ pub.off('streamCreated');
+ }
- if (this.eventCollection.streamPropertyChanged) {
- if (!oldValues.streamPropertyChanged) {
- pub.on('streamPropertyChanged', (event: StreamPropertyChangedEvent) => {
- const newValue = event.changedProperty === 'videoDimensions' ?
- JSON.stringify(event.newValue) : event.newValue.toString();
- this.updateEventListInParent.emit({
- eventName: 'streamPropertyChanged',
- eventContent: event.changedProperty + ' [' + newValue + ']',
- event
- });
- });
- }
- } else {
- pub.off('streamPropertyChanged');
- }
+ if (this.eventCollection.streamDestroyed) {
+ if (!oldValues.streamDestroyed) {
+ pub.on('streamDestroyed', (event: StreamEvent) => {
+ this.updateEventListInParent.emit({
+ eventName: 'streamDestroyed',
+ eventContent: event.stream.streamId,
+ event
+ });
+ if (event.reason.indexOf('forceUnpublish') !== -1) {
+ this.unpublished = !this.unpublished;
+ this.unpublished ? this.pubSubIcon = 'play_arrow' : this.pubSubIcon = 'stop';
+ }
+ });
+ }
+ } else {
+ pub.off('streamDestroyed');
+ }
- if (this.eventCollection.videoElementDestroyed) {
- if (!oldValues.videoElementDestroyed) {
- pub.on('videoElementDestroyed', (event: VideoElementEvent) => {
- this.updateEventListInParent.emit({
- eventName: 'videoElementDestroyed',
- eventContent: '(Publisher)',
- event
- });
- });
- }
- } else {
- pub.off('videoElementDestroyed');
- }
+ if (this.eventCollection.streamPropertyChanged) {
+ if (!oldValues.streamPropertyChanged) {
+ pub.on('streamPropertyChanged', (event: StreamPropertyChangedEvent) => {
+ const newValue = event.changedProperty === 'videoDimensions' ?
+ JSON.stringify(event.newValue) : event.newValue.toString();
+ this.updateEventListInParent.emit({
+ eventName: 'streamPropertyChanged',
+ eventContent: event.changedProperty + ' [' + newValue + ']',
+ event
+ });
+ });
+ }
+ } else {
+ pub.off('streamPropertyChanged');
+ }
- if (this.eventCollection.streamPlaying) {
- if (!oldValues.streamPlaying) {
- pub.on('streamPlaying', (event: StreamManagerEvent) => {
- if (!pub.stream.hasVideo) {
- this.videoClasses = 'grey-background';
- this.videoPoster = 'assets/images/volume.png';
- } else {
- this.videoClasses = '';
- this.videoPoster = '';
- }
- this.showButtons = true;
- this.updateEventListInParent.emit({
- eventName: 'streamPlaying',
- eventContent: pub.stream.streamId,
- event
- });
- });
- }
- } else {
- pub.off('streamPlaying');
- }
+ if (this.eventCollection.videoElementDestroyed) {
+ if (!oldValues.videoElementDestroyed) {
+ pub.on('videoElementDestroyed', (event: VideoElementEvent) => {
+ this.updateEventListInParent.emit({
+ eventName: 'videoElementDestroyed',
+ eventContent: '(Publisher)',
+ event
+ });
+ });
+ }
+ } else {
+ pub.off('videoElementDestroyed');
+ }
- if (this.eventCollection.streamAudioVolumeChange) {
- if (!oldValues.streamAudioVolumeChange) {
- pub.on('streamAudioVolumeChange', (event: StreamManagerEvent) => {
- this.updateEventListInParent.emit({
- eventName: 'streamAudioVolumeChange',
- eventContent: event.value['newValue'],
- event
- });
- });
- }
- } else {
- pub.off('streamAudioVolumeChange');
- }
- }
+ if (this.eventCollection.streamPlaying) {
+ if (!oldValues.streamPlaying) {
+ pub.on('streamPlaying', (event: StreamManagerEvent) => {
+ if (!pub.stream.hasVideo) {
+ this.videoClasses = 'grey-background';
+ this.videoPoster = 'assets/images/volume.png';
+ } else {
+ this.videoClasses = '';
+ this.videoPoster = '';
+ }
+ this.showButtons = true;
+ this.updateEventListInParent.emit({
+ eventName: 'streamPlaying',
+ eventContent: pub.stream.streamId,
+ event
+ });
+ });
+ }
+ } else {
+ pub.off('streamPlaying');
+ }
- openSubscriberEventsDialog() {
- const oldValues = {
- videoElementCreated: this.eventCollection.videoElementCreated,
- videoElementDestroyed: this.eventCollection.videoElementDestroyed,
- streamPlaying: this.eventCollection.streamPlaying,
- streamAudioVolumeChange: this.eventCollection.streamAudioVolumeChange,
- streamPropertyChanged: this.eventCollection.streamPropertyChanged
- };
- const dialogRef = this.dialog.open(EventsDialogComponent, {
- data: {
- eventCollection: this.eventCollection,
- target: 'Subscriber'
- },
- width: '295px',
- autoFocus: false,
- disableClose: true
- });
- dialogRef.afterClosed().subscribe((result) => {
- this.updateSubscriberEvents(oldValues);
- });
- }
+ if (this.eventCollection.streamAudioVolumeChange) {
+ if (!oldValues.streamAudioVolumeChange) {
+ pub.on('streamAudioVolumeChange', (event: StreamManagerEvent) => {
+ this.updateEventListInParent.emit({
+ eventName: 'streamAudioVolumeChange',
+ eventContent: event.value['newValue'],
+ event
+ });
+ });
+ }
+ } else {
+ pub.off('streamAudioVolumeChange');
+ }
+ }
- openPublisherEventsDialog() {
- const oldValues = {
- videoElementCreated: this.eventCollection.videoElementCreated,
- videoElementDestroyed: this.eventCollection.videoElementDestroyed,
- streamPlaying: this.eventCollection.streamPlaying,
- streamAudioVolumeChange: this.eventCollection.streamAudioVolumeChange,
- accessAllowed: this.eventCollection.accessAllowed,
- accessDenied: this.eventCollection.accessDenied,
- accessDialogOpened: this.eventCollection.accessDialogOpened,
- accessDialogClosed: this.eventCollection.accessDialogClosed,
- streamCreated: this.eventCollection.streamCreated,
- streamDestroyed: this.eventCollection.streamDestroyed,
- streamPropertyChanged: this.eventCollection.streamPropertyChanged
- };
- const dialogRef = this.dialog.open(EventsDialogComponent, {
- data: {
- eventCollection: this.eventCollection,
- target: 'Publisher'
- },
- width: '295px',
- autoFocus: false,
- disableClose: true
- });
- dialogRef.afterClosed().subscribe((result) => {
- this.updatePublisherEvents(this.streamManager, oldValues);
- });
- }
+ openSubscriberEventsDialog() {
+ const oldValues = {
+ videoElementCreated: this.eventCollection.videoElementCreated,
+ videoElementDestroyed: this.eventCollection.videoElementDestroyed,
+ streamPlaying: this.eventCollection.streamPlaying,
+ streamAudioVolumeChange: this.eventCollection.streamAudioVolumeChange,
+ streamPropertyChanged: this.eventCollection.streamPropertyChanged
+ };
+ const dialogRef = this.dialog.open(EventsDialogComponent, {
+ data: {
+ eventCollection: this.eventCollection,
+ target: 'Subscriber'
+ },
+ width: '295px',
+ autoFocus: false,
+ disableClose: true
+ });
+ dialogRef.afterClosed().subscribe((result) => {
+ this.updateSubscriberEvents(oldValues);
+ });
+ }
- record(): void {
- if (!this.recording) {
- this.recorder = this.OV.initLocalRecorder(this.streamManager.stream);
- this.recorder.record();
- this.recording = true;
- this.recordIcon = 'stop';
- this.pauseRecordIcon = 'pause';
- } else {
- this.recorder.stop()
- .then(() => {
- let dialogRef: MatDialogRef;
- dialogRef = this.dialog.open(LocalRecordingDialogComponent, {
- disableClose: true,
- data: {
- recorder: this.recorder
- }
- });
- dialogRef.componentInstance.myReference = dialogRef;
+ openPublisherEventsDialog() {
+ const oldValues = {
+ videoElementCreated: this.eventCollection.videoElementCreated,
+ videoElementDestroyed: this.eventCollection.videoElementDestroyed,
+ streamPlaying: this.eventCollection.streamPlaying,
+ streamAudioVolumeChange: this.eventCollection.streamAudioVolumeChange,
+ accessAllowed: this.eventCollection.accessAllowed,
+ accessDenied: this.eventCollection.accessDenied,
+ accessDialogOpened: this.eventCollection.accessDialogOpened,
+ accessDialogClosed: this.eventCollection.accessDialogClosed,
+ streamCreated: this.eventCollection.streamCreated,
+ streamDestroyed: this.eventCollection.streamDestroyed,
+ streamPropertyChanged: this.eventCollection.streamPropertyChanged
+ };
+ const dialogRef = this.dialog.open(EventsDialogComponent, {
+ data: {
+ eventCollection: this.eventCollection,
+ target: 'Publisher'
+ },
+ width: '295px',
+ autoFocus: false,
+ disableClose: true
+ });
+ dialogRef.afterClosed().subscribe((result) => {
+ this.updatePublisherEvents(this.streamManager, oldValues);
+ });
+ }
- dialogRef.afterOpen().subscribe(() => {
- this.muteSubscribersService.updateMuted(true);
- this.recorder.preview('recorder-preview').controls = true;
- });
- dialogRef.afterClosed().subscribe(() => {
- this.muteSubscribersService.updateMuted(false);
- this.restartRecorder();
- });
- })
- .catch((error) => {
- console.error('Error stopping LocalRecorder: ' + error);
- });
- }
- }
+ record(): void {
+ if (!this.recording) {
+ this.recorder = this.OV.initLocalRecorder(this.streamManager.stream);
+ this.recorder.record();
+ this.recording = true;
+ this.recordIcon = 'stop';
+ this.pauseRecordIcon = 'pause';
+ } else {
+ this.recorder.stop()
+ .then(() => {
+ let dialogRef: MatDialogRef;
+ dialogRef = this.dialog.open(LocalRecordingDialogComponent, {
+ disableClose: true,
+ data: {
+ recorder: this.recorder
+ }
+ });
+ dialogRef.componentInstance.myReference = dialogRef;
- pauseRecord(): void {
- if (!this.recordingPaused) {
- this.recorder.pause();
- this.pauseRecordIcon = 'play_arrow';
- } else {
- this.recorder.resume();
- this.pauseRecordIcon = 'pause';
- }
- this.recordingPaused = !this.recordingPaused;
- }
+ dialogRef.afterOpen().subscribe(() => {
+ this.muteSubscribersService.updateMuted(true);
+ this.recorder.preview('recorder-preview').controls = true;
+ });
+ dialogRef.afterClosed().subscribe(() => {
+ this.muteSubscribersService.updateMuted(false);
+ this.restartRecorder();
+ });
+ })
+ .catch((error) => {
+ console.error('Error stopping LocalRecorder: ' + error);
+ });
+ }
+ }
- private restartRecorder() {
- this.recording = false;
- this.recordingPaused = false;
- this.recordIcon = 'fiber_manual_record';
- this.pauseRecordIcon = '';
- if (!!this.recorder) {
- this.recorder.clean();
- }
- }
+ pauseRecord(): void {
+ if (!this.recordingPaused) {
+ this.recorder.pause();
+ this.pauseRecordIcon = 'play_arrow';
+ } else {
+ this.recorder.resume();
+ this.pauseRecordIcon = 'pause';
+ }
+ this.recordingPaused = !this.recordingPaused;
+ }
- forceUnpublish() {
- this.OV.session.forceUnpublish(this.streamManager.stream);
- }
+ private restartRecorder() {
+ this.recording = false;
+ this.recordingPaused = false;
+ this.recordIcon = 'fiber_manual_record';
+ this.pauseRecordIcon = '';
+ if (!!this.recorder) {
+ this.recorder.clean();
+ }
+ }
- forceDisconnect() {
- this.OV.session.forceDisconnect(this.streamManager.stream.connection);
- }
+ forceUnpublish() {
+ this.OV.session.forceUnpublish(this.streamManager.stream);
+ }
- filterConfig() {
- this.dialog.open(FilterDialogComponent, {
- data: {
- session: this.streamManager.stream.session,
- stream: this.streamManager.stream,
- filterEventHandler: this.emitFilterEventToParent.bind(this)
- },
- disableClose: true,
- width: '450px'
- });
- }
+ forceDisconnect() {
+ this.OV.session.forceDisconnect(this.streamManager.stream.connection);
+ }
- emitFilterEventToParent(event: FilterEvent) {
- this.updateEventListInParent.emit({
- eventName: 'filterEvent',
- eventContent: JSON.stringify(event.data),
- event
- });
- }
+ filterConfig() {
+ this.dialog.open(FilterDialogComponent, {
+ data: {
+ session: this.streamManager.stream.session,
+ stream: this.streamManager.stream,
+ filterEventHandler: this.emitFilterEventToParent.bind(this)
+ },
+ disableClose: true,
+ width: '450px'
+ });
+ }
+ emitFilterEventToParent(event: FilterEvent) {
+ this.updateEventListInParent.emit({
+ eventName: 'filterEvent',
+ eventContent: JSON.stringify(event.data),
+ event
+ });
+ }
+
+ async showCodecUsed() {
+ let stats = await this.streamManager.stream.getWebRtcPeer().pc.getStats(null);
+ let codecIdIndex = null;
+ // Search codec Index
+ stats.forEach(report => {
+ console.log(report);
+ if (!this.streamManager.remote && report.id.includes("RTCOutboundRTPVideoStream")) {
+ codecIdIndex = report.codecId;
+
+ } else if (this.streamManager.remote && report.id.includes("RTCInboundRTPVideoStream")) {
+ codecIdIndex = report.codecId;
+ }
+ })
+ // Search codec Info
+ stats.forEach(report => {
+ if (report.id === codecIdIndex) {
+ this.usedVideoCodec = report.mimeType;
+ }
+ })
+ this.dialog.open(ShowCodecDialogComponent, {
+ data: {
+ usedVideoCodec: this.usedVideoCodec
+ },
+ width: '450px'
+ });
+ }
}