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

openvidu-components: Renamed streaming by broadcasting

pull/780/head
Carlos Santos 2023-02-17 17:03:15 +01:00
parent d4be677613
commit 10bcc87ac5
35 changed files with 606 additions and 615 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
openvidu-components-angular/e2e/angular.test.ts
View File

@ -884,7 +884,7 @@ describe('Testing ATTRIBUTE DIRECTIVES', () => {
await utils.clickOn('#ovToolbar-checkbox');
await utils.clickOn('#streamingButton-checkbox');
await utils.clickOn('#broadcastingButton-checkbox');
await utils.clickOn('#apply-btn');
@ -897,7 +897,7 @@ describe('Testing ATTRIBUTE DIRECTIVES', () => {
await utils.waitForElement('.mat-menu-content');
// Checking if fullscreen button is not present
expect(await utils.isPresent('#streaming-btn')).to.be.false;
expect(await utils.isPresent('#broadcasting-btn')).to.be.false;
});
it('should HIDE the LEAVE button', async () => {
@ -1033,7 +1033,7 @@ describe('Testing ATTRIBUTE DIRECTIVES', () => {
await utils.clickOn('#ovActivitiesPanel-checkbox');
await utils.clickOn('#streamingActivity-checkbox');
await utils.clickOn('#broadcastingActivity-checkbox');
await utils.clickOn('#apply-btn');
@ -1047,7 +1047,7 @@ describe('Testing ATTRIBUTE DIRECTIVES', () => {
await utils.waitForElement('ov-recording-activity');
expect(await utils.isPresent('ov-streaming-activity')).to.be.false;
expect(await utils.isPresent('ov-broadcasting-activity')).to.be.false;
});
it('should SHOW STREAMING ERROR', async () => {
@ -1055,7 +1055,7 @@ describe('Testing ATTRIBUTE DIRECTIVES', () => {
await utils.clickOn('#ovActivitiesPanel-checkbox');
await utils.clickOn('#streamingError-checkbox');
await utils.clickOn('#broadcastingError-checkbox');
await utils.clickOn('#apply-btn');
@ -1067,13 +1067,13 @@ describe('Testing ATTRIBUTE DIRECTIVES', () => {
await utils.waitForElement('#custom-activities-panel');
const status = await utils.waitForElement('#streaming-status');
const status = await utils.waitForElement('#broadcasting-status');
expect(await status.getAttribute('innerText')).equals('FAILED');
await utils.clickOn('#streaming-activity');
await utils.clickOn('#broadcasting-activity');
await browser.sleep(500);
const error = await utils.waitForElement('#streaming-error');
const error = await utils.waitForElement('#broadcasting-error');
expect(await error.getAttribute('innerText')).equals('TEST_ERROR');
});
});

28
openvidu-components-angular/e2e/webcomponent-app/app.js
View File

@ -58,10 +58,10 @@ $(document).ready(() => {
url.searchParams.get('toolbarRecordingButton') === null ? true : url.searchParams.get('toolbarRecordingButton') === 'true';
FULLSCREEN_BUTTON = url.searchParams.get('fullscreenBtn') === null ? true : url.searchParams.get('fullscreenBtn') === 'true';
STREAMING_BUTTON =
url.searchParams.get('toolbarStreamingButton') === null ? true : url.searchParams.get('toolbarStreamingButton') === 'true';
url.searchParams.get('toolbarBroadcastingButton') === null ? true : url.searchParams.get('toolbarBroadcastingButton') === 'true';
if (url.searchParams.get('streamingError') !== null) {
STREAMING_ERROR = url.searchParams.get('streamingError');
if (url.searchParams.get('broadcastingError') !== null) {
STREAMING_ERROR = url.searchParams.get('broadcastingError');
}
TOOLBAR_SETTINGS_BUTTON =
@ -75,9 +75,9 @@ $(document).ready(() => {
PARTICIPANTS_PANEL_BUTTON =
url.searchParams.get('participantsPanelBtn') === null ? true : url.searchParams.get('participantsPanelBtn') === 'true';
ACTIVITIES_STREAMING_ACTIVITY =
url.searchParams.get('activitiesPanelStreamingActivity') === null
url.searchParams.get('activitiesPanelBroadcastingActivity') === null
? true
: url.searchParams.get('activitiesPanelStreamingActivity') === 'true';
: url.searchParams.get('activitiesPanelBroadcastingActivity') === 'true';
ACTIVITIES_RECORDING_ACTIVITY =
url.searchParams.get('activitiesPanelRecordingActivity') === null
? true
@ -127,8 +127,8 @@ $(document).ready(() => {
// await stopRecording(RECORDING_ID);
// });
webComponent.addEventListener('onToolbarStopStreamingClicked', async (event) => {
appendElement('onToolbarStopStreamingClicked');
webComponent.addEventListener('onToolbarStopBroadcastingClicked', async (event) => {
appendElement('onToolbarStopBroadcastingClicked');
});
webComponent.addEventListener('onActivitiesPanelStartRecordingClicked', async (event) => {
@ -146,12 +146,12 @@ $(document).ready(() => {
appendElement('onActivitiesPanelDeleteRecordingClicked');
);
webComponent.addEventListener('onActivitiesPanelStartStreamingClicked', async (event) => {
appendElement('onActivitiesPanelStartStreamingClicked');
webComponent.addEventListener('onActivitiesPanelStartBroadcastingClicked', async (event) => {
appendElement('onActivitiesPanelStartBroadcastingClicked');
});
webComponent.addEventListener('onActivitiesPanelStopStreamingClicked', async (event) => {
appendElement('onActivitiesPanelStopStreamingClicked');
webComponent.addEventListener('onActivitiesPanelStopBroadcastingClicked', async (event) => {
appendElement('onActivitiesPanelStopBroadcastingClicked');
});
webComponent.addEventListener('onSessionCreated', (event) => {
@ -217,7 +217,7 @@ async function joinSession(sessionName, participantName) {
webComponent.toolbarCaptionsButton = CAPTIONS_BUTTON;
webComponent.toolbarLeaveButton = LEAVE_BUTTON;
webComponent.toolbarRecordingButton = RECORDING_BUTTON;
webComponent.toolbarStreamingButton = STREAMING_BUTTON;
webComponent.toolbarBroadcastingButton = STREAMING_BUTTON;
webComponent.toolbarActivitiesPanelButton = ACTIVITIES_PANEL_BUTTON;
webComponent.toolbarChatPanelButton = CHAT_PANEL_BUTTON;
webComponent.toolbarParticipantsPanelButton = PARTICIPANTS_PANEL_BUTTON;
@ -230,10 +230,10 @@ async function joinSession(sessionName, participantName) {
webComponent.recordingActivityRecordingsList = [{ status: 'ready' }];
webComponent.activitiesPanelRecordingActivity = ACTIVITIES_RECORDING_ACTIVITY;
webComponent.activitiesPanelStreamingActivity = ACTIVITIES_STREAMING_ACTIVITY;
webComponent.activitiesPanelBroadcastingActivity = ACTIVITIES_STREAMING_ACTIVITY;
webComponent.recordingActivityRecordingError = RECORDING_ERROR;
webComponent.streamingActivityStreamingError = {message: STREAMING_ERROR, rtmpAvailable: true};
webComponent.broadcastingActivityBroadcastingError = {message: STREAMING_ERROR, broadcastAvailable: true};
webComponent.participantName = participantName;
webComponent.tokens = tokens;

84
openvidu-components-angular/e2e/webcomponent.test.ts
View File

@ -308,7 +308,7 @@ describe('Testing API Directives', () => {
});
it('should HIDE the TOOLBAR STREAMING button', async () => {
await browser.get(`${url}&prejoin=false&toolbarStreamingButton=false`);
await browser.get(`${url}&prejoin=false&toolbarBroadcastingButton=false`);
await utils.checkSessionIsPresent();
@ -324,8 +324,8 @@ describe('Testing API Directives', () => {
await utils.waitForElement('.mat-menu-content');
expect(await utils.isPresent('.mat-menu-content')).to.be.true;
// Checking if streaming button is not present
expect(await utils.isPresent('#streaming-btn')).to.be.false;
// Checking if broadcasting button is not present
expect(await utils.isPresent('#broadcasting-btn')).to.be.false;
});
it('should HIDE the TOOLBAR SETTINGS button', async () => {
@ -572,7 +572,7 @@ describe('Testing API Directives', () => {
it('should SHOW a STREAMING ERROR in activities panel', async () => {
let element;
const fixedUrl = `${url}&prejoin=false&streamingError=TEST_ERROR`;
const fixedUrl = `${url}&prejoin=false&broadcastingError=TEST_ERROR`;
await browser.get(fixedUrl);
await utils.checkSessionIsPresent();
@ -587,26 +587,26 @@ describe('Testing API Directives', () => {
await utils.waitForElement('#default-activities-panel');
expect(await utils.isPresent('#default-activities-panel')).to.be.true;
// Checking if streaming activity exists
// Checking if broadcasting activity exists
await utils.waitForElement('#activities-container');
await utils.waitForElement('.activities-body-container');
await utils.waitForElement('ov-streaming-activity');
expect(await utils.isPresent('ov-streaming-activity')).to.be.true;
await utils.waitForElement('ov-broadcasting-activity');
expect(await utils.isPresent('ov-broadcasting-activity')).to.be.true;
const status = await utils.waitForElement('#streaming-status');
const status = await utils.waitForElement('#broadcasting-status');
expect(await status.getAttribute('innerText')).equals('FAILED');
// Open streaming
// Open broadcasting
await browser.sleep(1000);
await utils.clickOn('ov-streaming-activity');
await utils.clickOn('ov-broadcasting-activity');
element = await utils.waitForElement('#streaming-error');
element = await utils.waitForElement('#broadcasting-error');
expect(await element.getAttribute('innerText')).equal('TEST_ERROR');
});
it('should HIDE the STREAMING ACTIVITY in activities panel', async () => {
await browser.get(`${url}&prejoin=false&activitiesPanelStreamingActivity=false`);
await browser.get(`${url}&prejoin=false&activitiesPanelBroadcastingActivity=false`);
await utils.checkSessionIsPresent();
@ -624,7 +624,7 @@ describe('Testing API Directives', () => {
// Checking if recording activity exists
await utils.waitForElement('.activities-body-container');
expect(await utils.isPresent('ov-streaming-activity')).to.be.false;
expect(await utils.isPresent('ov-broadcasting-activity')).to.be.false;
});
});
@ -831,7 +831,7 @@ describe('Testing videoconference EVENTS', () => {
});
// TODO: it needs an OpenVidu PRO
// it('should receive the onToolbarStopStreamingClicked event', async () => {
// it('should receive the onToolbarStopBroadcastingClicked event', async () => {
// await browser.get(`${url}&prejoin=false`);
// await utils.checkSessionIsPresent();
@ -846,18 +846,18 @@ describe('Testing videoconference EVENTS', () => {
// await utils.waitForElement('.mat-menu-content');
// await utils.waitForElement('#streaming-btn');
// await utils.clickOn('#streaming-btn');
// await utils.waitForElement('#broadcasting-btn');
// await utils.clickOn('#broadcasting-btn');
// await browser.sleep(500);
// await utils.waitForElement('.sidenav-menu');
// await utils.waitForElement('#activities-container');
// await utils.waitForElement('#streaming-url-input');
// const input = await utils.waitForElement('#rtmp-url-input');
// await input.sendKeys('RTMPurl');
// await utils.clickOn('#streaming-btn');
// await utils.waitForElement('#broadcasting-url-input');
// const input = await utils.waitForElement('#broadcast-url-input');
// await input.sendKeys('BroadcastUrl');
// await utils.clickOn('#broadcasting-btn');
// // Open more options menu
// await utils.waitForElement('#more-options-btn');
@ -868,12 +868,12 @@ describe('Testing videoconference EVENTS', () => {
// await utils.waitForElement('.mat-menu-content');
// await utils.waitForElement('#streaming-btn');
// await utils.clickOn('#streaming-btn');
// await utils.waitForElement('#broadcasting-btn');
// await utils.clickOn('#broadcasting-btn');
// // Checking if onToolbarStopStreamingClicked has been received
// await utils.waitForElement('#onToolbarStopStreamingClicked');
// expect(await utils.isPresent('#onToolbarStopStreamingClicked')).to.be.true;
// // Checking if onToolbarStopBroadcastingClicked has been received
// await utils.waitForElement('#onToolbarStopBroadcastingClicked');
// expect(await utils.isPresent('#onToolbarStopBroadcastingClicked')).to.be.true;
// });
it('should receive the onActivitiesPanelStartRecordingClicked event', async () => {
@ -941,7 +941,7 @@ describe('Testing videoconference EVENTS', () => {
expect(await utils.isPresent('#onActivitiesPanelDeleteRecordingClicked')).to.be.true;
});
it('should receive the onActivitiesPanelStartStreaming event', async () => {
it('should receive the onActivitiesPanelStartBroadcasting event', async () => {
await browser.get(`${url}&prejoin=false`);
await utils.checkSessionIsPresent();
@ -956,35 +956,35 @@ describe('Testing videoconference EVENTS', () => {
await utils.waitForElement('#activities-container');
expect(await utils.isPresent('#activities-container')).to.be.true;
await utils.waitForElement('#streaming-activity');
await utils.clickOn('#streaming-activity');
await utils.waitForElement('#broadcasting-activity');
await utils.clickOn('#broadcasting-activity');
await browser.sleep(1000);
const button = await utils.waitForElement('#streaming-btn');
const button = await utils.waitForElement('#broadcasting-btn');
expect(await button.isEnabled()).to.be.false;
const input = await utils.waitForElement('#rtmp-url-input');
await input.sendKeys('RTMPurl');
const input = await utils.waitForElement('#broadcast-url-input');
await input.sendKeys('BroadcastUrl');
await utils.clickOn('#streaming-btn');
await utils.clickOn('#broadcasting-btn');
// Checking if onActivitiesPanelStartStreamingClicked has been received
await utils.waitForElement('#onActivitiesPanelStartStreamingClicked');
expect(await utils.isPresent('#onActivitiesPanelStartStreamingClicked')).to.be.true;
// Checking if onActivitiesPanelStartBroadcastingClicked has been received
await utils.waitForElement('#onActivitiesPanelStartBroadcastingClicked');
expect(await utils.isPresent('#onActivitiesPanelStartBroadcastingClicked')).to.be.true;
// TODO: it needs an OpenVidu PRO (onActivitiesPanelStopStreamingClicked event)
// TODO: it needs an OpenVidu PRO (onActivitiesPanelStopBroadcastingClicked event)
// expect(await utils.isPresent('#streaming-tag')).to.be.true;
// expect(await utils.isPresent('#broadcasting-tag')).to.be.true;
// await utils.clickOn('#stop-streaming-btn');
// await utils.clickOn('#stop-broadcasting-btn');
// // Checking if onActivitiesPanelStopStreamingClicked has been received
// await utils.waitForElement('#onActivitiesPanelStopStreamingClicked');
// expect(await utils.isPresent('#onActivitiesPanelStopStreamingClicked')).to.be.true;
// expect(await utils.isPresent('#streaming-tag')).to.be.false;
// // Checking if onActivitiesPanelStopBroadcastingClicked has been received
// await utils.waitForElement('#onActivitiesPanelStopBroadcastingClicked');
// expect(await utils.isPresent('#onActivitiesPanelStopBroadcastingClicked')).to.be.true;
// expect(await utils.isPresent('#broadcasting-tag')).to.be.false;
});
it('should receive the onSessionCreated event', async () => {

14
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html
View File

@ -16,13 +16,13 @@
(onStopRecordingClicked)="_onStopRecordingClicked()"
(onDeleteRecordingClicked)="_onDeleteRecordingClicked($event)"
></ov-recording-activity>
<ov-streaming-activity
*ngIf="showStreamingActivity"
id="streaming-activity"
[expanded]="expandedPanel === 'streaming'"
(onStartStreamingClicked)="_onStartStreamingClicked($event)"
(onStopStreamingClicked)="_onStopStreamingClicked()"
></ov-streaming-activity>
<ov-broadcasting-activity
*ngIf="showBroadcastingActivity"
id="broadcasting-activity"
[expanded]="expandedPanel === 'broadcasting'"
(onStartBroadcastingClicked)="_onStartBroadcastingClicked($event)"
(onStopBroadcastingClicked)="_onStopBroadcastingClicked()"
></ov-broadcasting-activity>
</mat-accordion>
</div>
</div>

30
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts
View File

@ -30,16 +30,16 @@ export class ActivitiesPanelComponent implements OnInit {
@Output() onDeleteRecordingClicked: EventEmitter<string> = new EventEmitter<string>();
/**
* Provides event notifications that fire when start streaming button has been clicked.
* The streaming should be started using the REST API.
* Provides event notifications that fire when start broadcasting button has been clicked.
* The broadcasting should be started using the REST API.
*/
@Output() onStartStreamingClicked: EventEmitter<string> = new EventEmitter<string>();
@Output() onStartBroadcastingClicked: EventEmitter<string> = new EventEmitter<string>();
/**
* Provides event notifications that fire when stop streaming button has been clicked.
* The streaming should be stopped using the REST API.
* Provides event notifications that fire when stop broadcasting button has been clicked.
* The broadcasting should be stopped using the REST API.
*/
@Output() onStopStreamingClicked: EventEmitter<void> = new EventEmitter<void>();
@Output() onStopBroadcastingClicked: EventEmitter<void> = new EventEmitter<void>();
/**
* @internal
@ -49,10 +49,10 @@ export class ActivitiesPanelComponent implements OnInit {
* @internal
*/
showRecordingActivity: boolean = true;
showStreamingActivity: boolean = true;
showBroadcastingActivity: boolean = true;
private panelSubscription: Subscription;
private recordingActivitySub: Subscription;
private streamingActivitySub: Subscription;
private broadcastingActivitySub: Subscription;
/**
* @internal
@ -73,7 +73,7 @@ export class ActivitiesPanelComponent implements OnInit {
ngOnDestroy() {
if (this.panelSubscription) this.panelSubscription.unsubscribe();
if (this.recordingActivitySub) this.recordingActivitySub.unsubscribe();
if (this.streamingActivitySub) this.streamingActivitySub.unsubscribe();
if (this.broadcastingActivitySub) this.broadcastingActivitySub.unsubscribe();
}
/**
@ -104,12 +104,12 @@ export class ActivitiesPanelComponent implements OnInit {
this.onDeleteRecordingClicked.emit(recordingId);
}
_onStartStreamingClicked(rtmpUrl: string) {
this.onStartStreamingClicked.emit(rtmpUrl);
_onStartBroadcastingClicked(broadcastUrl: string) {
this.onStartBroadcastingClicked.emit(broadcastUrl);
}
_onStopStreamingClicked() {
this.onStopStreamingClicked.emit();
_onStopBroadcastingClicked() {
this.onStopBroadcastingClicked.emit();
}
private subscribeToPanelToggling() {
@ -126,8 +126,8 @@ export class ActivitiesPanelComponent implements OnInit {
this.cd.markForCheck();
});
this.streamingActivitySub = this.libService.streamingActivity.subscribe((value: boolean) => {
this.showStreamingActivity = value;
this.broadcastingActivitySub = this.libService.broadcastingActivity.subscribe((value: boolean) => {
this.showBroadcastingActivity = value;
this.cd.markForCheck();
});
}

20
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/streaming-activity/streaming-activity.component.css → openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.css
View File

@ -1,4 +1,4 @@
#streaming-status {
#broadcasting-status {
color: var(--ov-text-color);
display: inline;
padding: 3px;
@ -16,18 +16,18 @@
font-size: 14px;
}
#streaming-icon {
#broadcasting-icon {
color: #5903ca;
}
.streaming-duration {
.broadcasting-duration {
background-color: var(--ov-light-color);
padding: 4px 8px;
border-radius: var(--ov-panel-radius);
font-weight: 500;
}
.streaming-duration mat-icon {
.broadcasting-duration mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
@ -71,11 +71,11 @@
text-align: center;
}
.streaming-error {
.broadcasting-error {
color: var(--ov-warn-color);
font-weight: 600;
}
.streaming-name {
.broadcasting-name {
font-size: 16px;
font-weight: bold;
}
@ -85,23 +85,23 @@
font-weight: bold;
}
.streaming-action-buttons {
.broadcasting-action-buttons {
margin-top: 20px;
margin-bottom: 20px;
}
/* #start-streaming-btn {
/* #start-broadcasting-btn {
width: 100%;
background-color: var(--ov-tertiary-color);
color: var(--ov-text-color);
} */
#stop-streaming-btn {
#stop-broadcasting-btn {
/* background-color: var(--ov-warn-color); */
color: var(--ov-warn-color);
}
#reset-streaming-status-btn {
#reset-broadcasting-status-btn {
width: 100%;
background-color: var(--ov-light-color);
}

62
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/streaming-activity/streaming-activity.component.html → openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html
View File

File diff suppressed because one or more lines are too long

23
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.spec.ts Normal file
View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { BroadcastingActivityComponent } from './broadcasting-activity.component';
describe('BroadcastingActivityComponent', () => {
let component: BroadcastingActivityComponent;
let fixture: ComponentFixture<BroadcastingActivityComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ BroadcastingActivityComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(BroadcastingActivityComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

168
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.ts Normal file
View File

@ -0,0 +1,168 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Subscription } from 'rxjs';
import { BroadcastingError, BroadcastingStatus } from '../../../../models/broadcasting.model';
import { BroadcastingService } from '../../../../services/broadcasting/broadcasting.service';
import { OpenViduAngularConfigService } from '../../../../services/config/openvidu-angular.config.service';
import { ParticipantService } from '../../../../services/participant/participant.service';
@Component({
selector: 'ov-broadcasting-activity',
templateUrl: './broadcasting-activity.component.html',
styleUrls: ['./broadcasting-activity.component.css', '../activities-panel.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class BroadcastingActivityComponent implements OnInit {
/**
* Provides event notifications that fire when start broadcasting button has been clicked.
* The broadcasting should be started using the REST API.
*/
@Output() onStartBroadcastingClicked: EventEmitter<string> = new EventEmitter<string>();
/**
* Provides event notifications that fire when stop broadcasting button has been clicked.
* The broadcasting should be stopped using the REST API.
*/
@Output() onStopBroadcastingClicked: EventEmitter<void> = new EventEmitter<void>();
/**
* @internal
*/
urlRequiredError: boolean = false;
/**
* @internal
*/
oldBroadcastingStatus: BroadcastingStatus;
/**
* @internal
*/
broadcastUrl: string = '';
/**
* @internal
*/
@Input() expanded: boolean;
/**
* @internal
*/
broadcastingError: BroadcastingError | undefined;
/**
* @internal
*/
broadcastingStatus: BroadcastingStatus = BroadcastingStatus.STOPPED;
/**
* @internal
*/
broadcastingStatusEnum = BroadcastingStatus;
/**
* @internal
*/
opened: boolean = false;
/**
* @internal
*/
isSessionCreator: boolean = false;
/**
* @internal
*/
isBroadcastModuleAvailable: boolean = true;
private broadcastingSub: Subscription;
private broadcastingErrorSub: Subscription;
/**
* @internal
*/
constructor(
private broadcastingService: BroadcastingService,
private participantService: ParticipantService,
private libService: OpenViduAngularConfigService,
private cd: ChangeDetectorRef
) {}
/**
* @internal
*/
ngOnInit(): void {
this.isSessionCreator = this.participantService.amIModerator();
this.subscribeToBroadcastingStatus();
this.subscribeToBroadcastingError();
}
/**
* @internal
*/
ngOnDestroy() {
if (this.broadcastingSub) this.broadcastingSub.unsubscribe();
if (this.broadcastingErrorSub) this.broadcastingErrorSub.unsubscribe();
}
/**
* @internal
*/
panelOpened() {
this.opened = true;
}
/**
* @internal
*/
panelClosed() {
this.opened = false;
}
/**
* @ignore
*/
eventKeyPress(event) {
// Pressed 'Enter' key
if (event && event.keyCode === 13) {
event.preventDefault();
this.startBroadcasting();
}
}
/**
* @internal
*/
startBroadcasting() {
if (!!this.broadcastUrl) {
this.isBroadcastModuleAvailable = true;
this.broadcastingError = undefined;
this.broadcastingService.updateStatus(BroadcastingStatus.STARTING);
this.onStartBroadcastingClicked.emit(this.broadcastUrl);
}
this.urlRequiredError = !this.broadcastUrl;
}
/**
* @internal
*/
stopBroadcasting() {
this.onStopBroadcastingClicked.emit();
this.broadcastingService.updateStatus(BroadcastingStatus.STOPPING);
}
private subscribeToBroadcastingStatus() {
this.broadcastingSub = this.broadcastingService.broadcastingStatusObs.subscribe(
(ev: { status: BroadcastingStatus; time?: Date } | undefined) => {
if (!!ev) {
this.broadcastingStatus = ev.status;
this.cd.markForCheck();
}
}
);
}
private subscribeToBroadcastingError() {
this.broadcastingErrorSub = this.libService.broadcastingErrorObs.subscribe((error: BroadcastingError | undefined) => {
if (!!error) {
this.broadcastingError = error;
this.isBroadcastModuleAvailable = error.broadcastAvailable;
this.broadcastingService.updateStatus(BroadcastingStatus.FAILED);
this.cd.markForCheck();
}
});
}
}

23
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/streaming-activity/streaming-activity.component.spec.ts
View File

@ -1,23 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { StreamingActivityComponent } from './streaming-activity.component';
describe('StreamingActivityComponent', () => {
let component: StreamingActivityComponent;
let fixture: ComponentFixture<StreamingActivityComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ StreamingActivityComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(StreamingActivityComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

170
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/streaming-activity/streaming-activity.component.ts
View File

@ -1,170 +0,0 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Subscription } from 'rxjs';
import { StreamingError, StreamingStatus } from '../../../../models/streaming.model';
import { OpenViduAngularConfigService } from '../../../../services/config/openvidu-angular.config.service';
import { OpenViduService } from '../../../../services/openvidu/openvidu.service';
import { ParticipantService } from '../../../../services/participant/participant.service';
import { StreamingService } from '../../../../services/streaming/streaming.service';
@Component({
selector: 'ov-streaming-activity',
templateUrl: './streaming-activity.component.html',
styleUrls: ['./streaming-activity.component.css', '../activities-panel.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class StreamingActivityComponent implements OnInit {
/**
* Provides event notifications that fire when start streaming button has been clicked.
* The streaming should be started using the REST API.
*/
@Output() onStartStreamingClicked: EventEmitter<string> = new EventEmitter<string>();
/**
* Provides event notifications that fire when stop streaming button has been clicked.
* The streaming should be stopped using the REST API.
*/
@Output() onStopStreamingClicked: EventEmitter<void> = new EventEmitter<void>();
/**
* @internal
*/
urlRequiredError: boolean = false;
/**
* @internal
*/
oldStreamingStatus: StreamingStatus;
/**
* @internal
*/
rtmpUrl: string = '';
/**
* @internal
*/
@Input() expanded: boolean;
/**
* @internal
*/
streamingError: StreamingError | undefined;
/**
* @internal
*/
streamingStatus: StreamingStatus = StreamingStatus.STOPPED;
/**
* @internal
*/
streamingStatusEnum = StreamingStatus;
/**
* @internal
*/
opened: boolean = false;
/**
* @internal
*/
isSessionCreator: boolean = false;
/**
* @internal
*/
isRtmpModuleAvailable: boolean = true;
private streamingSub: Subscription;
private streamingErrorSub: Subscription;
/**
* @internal
*/
constructor(
private streamingService: StreamingService,
private participantService: ParticipantService,
private openviduService: OpenViduService,
private libService: OpenViduAngularConfigService,
private cd: ChangeDetectorRef
) {}
/**
* @internal
*/
ngOnInit(): void {
this.isSessionCreator = this.participantService.amIModerator();
this.subscribeToStreamingStatus();
this.subscribeToStreamingError();
}
/**
* @internal
*/
ngOnDestroy() {
if (this.streamingSub) this.streamingSub.unsubscribe();
if (this.streamingErrorSub) this.streamingErrorSub.unsubscribe();
}
/**
* @internal
*/
panelOpened() {
this.opened = true;
}
/**
* @internal
*/
panelClosed() {
this.opened = false;
}
/**
* @ignore
*/
eventKeyPress(event) {
// Pressed 'Enter' key
if (event && event.keyCode === 13) {
event.preventDefault();
this.startStreaming();
}
}
/**
* @internal
*/
startStreaming() {
if (!!this.rtmpUrl) {
this.isRtmpModuleAvailable = true;
this.streamingError = undefined;
this.streamingService.updateStatus(StreamingStatus.STARTING);
this.onStartStreamingClicked.emit(this.rtmpUrl);
}
this.urlRequiredError = !this.rtmpUrl;
}
/**
* @internal
*/
stopStreaming() {
this.onStopStreamingClicked.emit();
this.streamingService.updateStatus(StreamingStatus.STOPPING);
}
private subscribeToStreamingStatus() {
this.streamingSub = this.streamingService.streamingStatusObs.subscribe(
(ev: { status: StreamingStatus; time?: Date } | undefined) => {
if (!!ev) {
this.streamingStatus = ev.status;
this.cd.markForCheck();
}
}
);
}
private subscribeToStreamingError() {
this.streamingErrorSub = this.libService.streamingErrorObs.subscribe((error: StreamingError | undefined) => {
if (!!error) {
this.streamingError = error;
this.isRtmpModuleAvailable = error.rtmpAvailable;
this.streamingService.updateStatus(StreamingStatus.FAILED);
this.cd.markForCheck();
}
});
}
}

25
openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts
View File

@ -31,11 +31,12 @@ import { VideoType } from '../../models/video-type.model';
import { animate, style, transition, trigger } from '@angular/animations';
import { MatDrawerContainer, MatSidenav } from '@angular/material/sidenav';
import { skip, Subscription } from 'rxjs';
import { BroadcastingStatus } from '../../models/broadcasting.model';
import { SidenavMode } from '../../models/layout.model';
import { PanelEvent, PanelType } from '../../models/panel.model';
import { Signal } from '../../models/signal.model';
import { StreamingStatus } from '../../models/streaming.model';
import { ActionService } from '../../services/action/action.service';
import { BroadcastingService } from '../../services/broadcasting/broadcasting.service';
import { CaptionService } from '../../services/caption/caption.service';
import { ChatService } from '../../services/chat/chat.service';
import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
@ -46,7 +47,6 @@ import { PanelService } from '../../services/panel/panel.service';
import { ParticipantService } from '../../services/participant/participant.service';
import { PlatformService } from '../../services/platform/platform.service';
import { RecordingService } from '../../services/recording/recording.service';
import { StreamingService } from '../../services/streaming/streaming.service';
import { TranslateService } from '../../services/translate/translate.service';
import { VirtualBackgroundService } from '../../services/virtual-background/virtual-background.service';
@ -101,7 +101,7 @@ export class SessionComponent implements OnInit, OnDestroy {
protected layoutService: LayoutService,
protected panelService: PanelService,
private recordingService: RecordingService,
private streamingService: StreamingService,
private broadcastingService: BroadcastingService,
private translateService: TranslateService,
private captionService: CaptionService,
private platformService: PlatformService,
@ -170,7 +170,6 @@ export class SessionComponent implements OnInit, OnDestroy {
async ngOnInit() {
if (!this.usedInPrejoinPage) {
if (!this.openviduService.getScreenToken()) {
// Hide screenshare button if screen token does not exist
this.libService.screenshareButton.next(false);
@ -199,8 +198,8 @@ export class SessionComponent implements OnInit, OnDestroy {
this.subscribeToRecordingEvents();
}
if (this.libService.isStreamingEnabled()) {
this.subscribeToStreamingEvents();
if (this.libService.isBroadcastingEnabled()) {
this.subscribeToBroadcastingEvents();
}
}
this.preparing = false;
@ -438,18 +437,14 @@ export class SessionComponent implements OnInit, OnDestroy {
}
private subscribeToRecordingEvents() {
this.session.on('recordingStarted', (event: RecordingEvent) => {
this.recordingService.startRecording(event);
});
this.session.on('recordingStarted', (event: RecordingEvent) => this.recordingService.startRecording(event));
this.session.on('recordingStopped', (event: RecordingEvent) => {
this.recordingService.stopRecording(event);
});
this.session.on('recordingStopped', (event: RecordingEvent) => this.recordingService.stopRecording(event));
}
private subscribeToStreamingEvents() {
this.session.on('broadcastStarted', () => this.streamingService.updateStatus(StreamingStatus.STARTED));
this.session.on('broadcastStopped', () => this.streamingService.updateStatus(StreamingStatus.STOPPED));
private subscribeToBroadcastingEvents() {
this.session.on('broadcastStarted', () => this.broadcastingService.updateStatus(BroadcastingStatus.STARTED));
this.session.on('broadcastStopped', () => this.broadcastingService.updateStatus(BroadcastingStatus.STOPPED));
}
private startUpdateLayoutInterval() {

8
openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
View File

@ -71,7 +71,7 @@
}
.recording-tag,
.streaming-tag {
.broadcasting-tag {
padding: 0 10px;
border-radius: var(--ov-panel-radius);
width: fit-content;
@ -84,19 +84,19 @@
.recording-tag {
background-color: var(--ov-warn-color);
}
.streaming-tag {
.broadcasting-tag {
background-color: #5903ca;
}
.recording-tag mat-icon,
.streaming-tag mat-icon {
.broadcasting-tag mat-icon {
font-size: 16px;
display: inline;
vertical-align: sub;
margin-right: 5px;
}
#streaming-btn > mat-icon {
#broadcasting-btn > mat-icon {
color: #5903ca;
}

22
openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html
View File

@ -9,10 +9,10 @@
<span class="blink">REC</span>
<span> | {{ recordingTime | date : 'H:mm:ss' }}</span>
</div>
<div *ngIf="streamingStatus === _streamingStatus.STARTED" id="streaming-tag" class="streaming-tag">
<div *ngIf="broadcastingStatus === _broadcastingStatus.STARTED" id="broadcasting-tag" class="broadcasting-tag">
<mat-icon class="blink">sensors</mat-icon>
<span class="blink">LIVE</span>
<span> | {{ streamingTime | date : 'H:mm:ss' }}</span>
<span> | {{ broadcastingTime | date : 'H:mm:ss' }}</span>
</div>
</div>
</div>
@ -122,25 +122,25 @@
</span>
</button>
<!-- Streaming button -->
<!-- Broadcasting button -->
<button
*ngIf="!isMinimal && showStreamingButton"
*ngIf="!isMinimal && showBroadcastingButton"
mat-menu-item
id="streaming-btn"
[disabled]="streamingStatus === _streamingStatus.STARTING || recordingStatus === _streamingStatus.STOPPING"
(click)="toggleStreaming()"
id="broadcasting-btn"
[disabled]="broadcastingStatus === _broadcastingStatus.STARTING || recordingStatus === _broadcastingStatus.STOPPING"
(click)="toggleBroadcasting()"
>
<mat-icon>sensors</mat-icon>
<span
*ngIf="
streamingStatus === _streamingStatus.STOPPED ||
streamingStatus === _streamingStatus.STOPPING ||
streamingStatus === _streamingStatus.FAILED
broadcastingStatus === _broadcastingStatus.STOPPED ||
broadcastingStatus === _broadcastingStatus.STOPPING ||
broadcastingStatus === _broadcastingStatus.FAILED
"
>
{{ 'PANEL.STREAMING.START' | translate }}
</span>
<span *ngIf="streamingStatus === _streamingStatus.STARTED || streamingStatus === _streamingStatus.STARTING">
<span *ngIf="broadcastingStatus === _broadcastingStatus.STARTED || broadcastingStatus === _broadcastingStatus.STARTING">
{{ 'PANEL.STREAMING.STOP' | translate }}
</span>
</button>

58
openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
View File

@ -24,13 +24,14 @@ import {
ToolbarAdditionalButtonsDirective,
ToolbarAdditionalPanelButtonsDirective
} from '../../directives/template/openvidu-angular.directive';
import { BroadcastingStatus } from '../../models/broadcasting.model';
import { ChatMessage } from '../../models/chat.model';
import { ILogger } from '../../models/logger.model';
import { PanelEvent, PanelType } from '../../models/panel.model';
import { OpenViduRole, ParticipantAbstractModel } from '../../models/participant.model';
import { RecordingInfo, RecordingStatus } from '../../models/recording.model';
import { StreamingStatus } from '../../models/streaming.model';
import { ActionService } from '../../services/action/action.service';
import { BroadcastingService } from '../../services/broadcasting/broadcasting.service';
import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
import { DeviceService } from '../../services/device/device.service';
import { LayoutService } from '../../services/layout/layout.service';
@ -40,7 +41,6 @@ import { ParticipantService } from '../../services/participant/participant.servi
import { PlatformService } from '../../services/platform/platform.service';
import { RecordingService } from '../../services/recording/recording.service';
import { StorageService } from '../../services/storage/storage.service';
import { StreamingService } from '../../services/streaming/streaming.service';
import { TranslateService } from '../../services/translate/translate.service';
/**
@ -185,9 +185,9 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
@Output() onStartRecordingClicked: EventEmitter<void> = new EventEmitter<void>();
/**
* Provides event notifications that fire when start streaming button has been clicked.
* Provides event notifications that fire when start broadcasting button has been clicked.
*/
@Output() onStopStreamingClicked: EventEmitter<void> = new EventEmitter<void>();
@Output() onStopBroadcastingClicked: EventEmitter<void> = new EventEmitter<void>();
/**
* Provides event notifications that fire when stop recording button has been clicked.
@ -283,7 +283,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
/**
* @ignore
*/
showStreamingButton: boolean = true;
showBroadcastingButton: boolean = true;
/**
* @ignore
@ -340,7 +340,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
/**
* @ignore
*/
streamingStatus: StreamingStatus = StreamingStatus.STOPPED;
broadcastingStatus: BroadcastingStatus = BroadcastingStatus.STOPPED;
/**
* @ignore
*/
@ -348,7 +348,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
/**
* @ignore
*/
_streamingStatus = StreamingStatus;
_broadcastingStatus = BroadcastingStatus;
/**
* @ignore
@ -357,7 +357,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
/**
* @ignore
*/
streamingTime: Date;
broadcastingTime: Date;
/**
* @ignore
@ -379,9 +379,9 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
private backgroundEffectsButtonSub: Subscription;
private leaveButtonSub: Subscription;
private recordingButtonSub: Subscription;
private streamingButtonSub: Subscription;
private broadcastingButtonSub: Subscription;
private recordingSubscription: Subscription;
private streamingSubscription: Subscription;
private broadcastingSubscription: Subscription;
private activitiesPanelButtonSub: Subscription;
private participantsPanelButtonSub: Subscription;
private chatPanelButtonSub: Subscription;
@ -409,7 +409,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
private libService: OpenViduAngularConfigService,
private platformService: PlatformService,
private recordingService: RecordingService,
private streamingService: StreamingService,
private broadcastingService: BroadcastingService,
private translateService: TranslateService,
private storageSrv: StorageService
) {
@ -452,7 +452,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
this.subscribeToMenuToggling();
this.subscribeToChatMessages();
this.subscribeToRecordingStatus();
this.subscribeToStreamingStatus();
this.subscribeToBroadcastingStatus();
this.subscribeToScreenSize();
this.subscribeToCaptionsToggling();
}
@ -473,7 +473,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
if (this.backgroundEffectsButtonSub) this.backgroundEffectsButtonSub.unsubscribe();
if (this.leaveButtonSub) this.leaveButtonSub.unsubscribe();
if (this.recordingButtonSub) this.recordingButtonSub.unsubscribe();
if (this.streamingButtonSub) this.streamingButtonSub.unsubscribe();
if (this.broadcastingButtonSub) this.broadcastingButtonSub.unsubscribe();
if (this.participantsPanelButtonSub) this.participantsPanelButtonSub.unsubscribe();
if (this.chatPanelButtonSub) this.chatPanelButtonSub.unsubscribe();
if (this.displayLogoSub) this.displayLogoSub.unsubscribe();
@ -481,7 +481,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
if (this.minimalSub) this.minimalSub.unsubscribe();
if (this.activitiesPanelButtonSub) this.activitiesPanelButtonSub.unsubscribe();
if (this.recordingSubscription) this.recordingSubscription.unsubscribe();
if (this.streamingSubscription) this.streamingSubscription.unsubscribe();
if (this.broadcastingSubscription) this.broadcastingSubscription.unsubscribe();
if (this.screenSizeSub) this.screenSizeSub.unsubscribe();
if (this.settingsButtonSub) this.settingsButtonSub.unsubscribe();
if (this.captionsSubs) this.captionsSubs.unsubscribe();
@ -571,14 +571,14 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
/**
* @ignore
*/
toggleStreaming() {
if (this.streamingStatus === StreamingStatus.STARTED) {
this.log.d('Stopping streaming');
this.onStopStreamingClicked.emit();
this.streamingService.updateStatus(StreamingStatus.STOPPING);
} else if (this.streamingStatus === StreamingStatus.STOPPED) {
toggleBroadcasting() {
if (this.broadcastingStatus === BroadcastingStatus.STARTED) {
this.log.d('Stopping broadcasting');
this.onStopBroadcastingClicked.emit();
this.broadcastingService.updateStatus(BroadcastingStatus.STOPPING);
} else if (this.broadcastingStatus === BroadcastingStatus.STOPPED) {
if (this.showActivitiesPanelButton && !this.isActivitiesOpened) {
this.toggleActivitiesPanel('streaming');
this.toggleActivitiesPanel('broadcasting');
}
}
}
@ -706,14 +706,14 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
});
}
private subscribeToStreamingStatus() {
this.streamingSubscription = this.streamingService.streamingStatusObs
private subscribeToBroadcastingStatus() {
this.broadcastingSubscription = this.broadcastingService.broadcastingStatusObs
.pipe(skip(1))
.subscribe((ev: { status: StreamingStatus, time?: Date } | undefined) => {
.subscribe((ev: { status: BroadcastingStatus, time?: Date } | undefined) => {
if (!!ev) {
this.streamingStatus = ev.status;
this.broadcastingStatus = ev.status;
if (ev.time) {
this.streamingTime = ev.time;
this.broadcastingTime = ev.time;
}
this.cd.markForCheck();
}
@ -745,8 +745,8 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
this.cd.markForCheck();
});
this.streamingButtonSub = this.libService.streamingButtonObs.subscribe((value: boolean) => {
this.showStreamingButton = value;
this.broadcastingButtonSub = this.libService.broadcastingButtonObs.subscribe((value: boolean) => {
this.showBroadcastingButton = value;
this.checkDisplayMoreOptions();
this.cd.markForCheck();
});
@ -806,7 +806,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
this.showFullscreenButton ||
this.showBackgroundEffectsButton ||
this.showRecordingButton ||
this.showStreamingButton ||
this.showBroadcastingButton ||
this.showSettingsButton;
}
}

6
openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html
View File

@ -50,7 +50,7 @@
(onActivitiesPanelButtonClicked)="onActivitiesPanelButtonClicked()"
(onStartRecordingClicked)="onStartRecordingClicked('toolbar')"
(onStopRecordingClicked)="onStopRecordingClicked('toolbar')"
(onStopStreamingClicked)="onStopStreamingClicked('toolbar')"
(onStopBroadcastingClicked)="onStopBroadcastingClicked('toolbar')"
>
<ng-template #toolbarAdditionalButtons>
<ng-container *ngTemplateOutlet="openviduAngularToolbarAdditionalButtonsTemplate"></ng-container>
@ -100,8 +100,8 @@
(onStartRecordingClicked)="onStartRecordingClicked('panel')"
(onStopRecordingClicked)="onStopRecordingClicked('panel')"
(onDeleteRecordingClicked)="onDeleteRecordingClicked($event)"
(onStartStreamingClicked)="onStartStreamingClicked($event)"
(onStopStreamingClicked)="onStopStreamingClicked('panel')"
(onStartBroadcastingClicked)="onStartBroadcastingClicked($event)"
(onStopBroadcastingClicked)="onStopBroadcastingClicked('panel')"
></ov-activities-panel>
</ng-template>

22
openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts
View File

@ -384,19 +384,19 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
@Output() onActivitiesPanelPlayRecordingClicked: EventEmitter<string> = new EventEmitter<string>();
/**
* Provides event notifications that fire when start streaming button is clicked from {@link ActivitiesPanelComponent}.
* Provides event notifications that fire when start broadcasting button is clicked from {@link ActivitiesPanelComponent}.
*/
@Output() onActivitiesPanelStartStreamingClicked: EventEmitter<string> = new EventEmitter<string>();
@Output() onActivitiesPanelStartBroadcastingClicked: EventEmitter<string> = new EventEmitter<string>();
/**
* Provides event notifications that fire when start streaming button is clicked from {@link ActivitiesPanelComponent}.
* Provides event notifications that fire when start broadcasting button is clicked from {@link ActivitiesPanelComponent}.
*/
@Output() onActivitiesPanelStopStreamingClicked: EventEmitter<void> = new EventEmitter<void>();
@Output() onActivitiesPanelStopBroadcastingClicked: EventEmitter<void> = new EventEmitter<void>();
/**
* Provides event notifications that fire when start streaming button is clicked from {@link ToolbarComponent}.
* Provides event notifications that fire when start broadcasting button is clicked from {@link ToolbarComponent}.
*/
@Output() onToolbarStopStreamingClicked: EventEmitter<void> = new EventEmitter<void>();
@Output() onToolbarStopBroadcastingClicked: EventEmitter<void> = new EventEmitter<void>();
/**
* Provides event notifications that fire when OpenVidu Session is created.
@ -695,22 +695,22 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
/**
* @internal
*/
onStartStreamingClicked(rtmpUrl: string) {
onStartBroadcastingClicked(broadcastUrl: string) {
// if (from === 'toolbar') {
// this.onToolbarStartRecordingClicked.emit();
// } else if (from === 'panel') {
this.onActivitiesPanelStartStreamingClicked.emit(rtmpUrl);
this.onActivitiesPanelStartBroadcastingClicked.emit(broadcastUrl);
// }
}
/**
* @internal
*/
onStopStreamingClicked(from: string) {
onStopBroadcastingClicked(from: string) {
if (from === 'toolbar') {
this.onToolbarStopStreamingClicked.emit();
this.onToolbarStopBroadcastingClicked.emit();
} else if (from === 'panel') {
this.onActivitiesPanelStopStreamingClicked.emit();
this.onActivitiesPanelStopBroadcastingClicked.emit();
}
}

32
openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/activities-panel.directive.ts
View File

@ -52,51 +52,51 @@ export class ActivitiesPanelRecordingActivityDirective implements AfterViewInit,
}
/**
* The **streamingActivity** directive allows show/hide the streaming activity in {@link ActivitiesPanelComponent}.
* The **broadcastingActivity** directive allows show/hide the broadcasting activity in {@link ActivitiesPanelComponent}.
*
* Default: `true`
*
* It can be used in the parent element {@link VideoconferenceComponent} specifying the name of the `activitiesPanel` component:
*
* @example
* <ov-videoconference [activitiesPanelStreamingActivity]="false"></ov-videoconference>
* <ov-videoconference [activitiesPanelBroadcastingActivity]="false"></ov-videoconference>
*
* \
* And it also can be used in the {@link ActivitiesPanelComponent}.
* @example
* <ov-activities-panel *ovActivitiesPanel [streamingActivity]="false"></ov-activities-panel>
* <ov-activities-panel *ovActivitiesPanel [broadcastingActivity]="false"></ov-activities-panel>
*/
@Directive({
selector: 'ov-videoconference[activitiesPanelStreamingActivity], ov-activities-panel[streamingActivity]'
selector: 'ov-videoconference[activitiesPanelBroadcastingActivity], ov-activities-panel[broadcastingActivity]'
})
export class ActivitiesPanelStreamingActivityDirective implements AfterViewInit, OnDestroy {
@Input() set activitiesPanelStreamingActivity(value: boolean) {
this.streamingActivityValue = value;
this.update(this.streamingActivityValue);
export class ActivitiesPanelBroadcastingActivityDirective implements AfterViewInit, OnDestroy {
@Input() set activitiesPanelBroadcastingActivity(value: boolean) {
this.broadcastingActivityValue = value;
this.update(this.broadcastingActivityValue);
}
@Input() set streamingActivity(value: boolean) {
this.streamingActivityValue = value;
this.update(this.streamingActivityValue);
@Input() set broadcastingActivity(value: boolean) {
this.broadcastingActivityValue = value;
this.update(this.broadcastingActivityValue);
}
streamingActivityValue: boolean = true;
broadcastingActivityValue: boolean = true;
constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
ngAfterViewInit() {
this.update(this.streamingActivityValue);
this.update(this.broadcastingActivityValue);
}
ngOnDestroy(): void {
this.clear();
}
clear() {
this.streamingActivityValue = true;
this.broadcastingActivityValue = true;
this.update(true);
}
update(value: boolean) {
if (this.libService.streamingActivity.getValue() !== value) {
this.libService.streamingActivity.next(value);
if (this.libService.broadcastingActivity.getValue() !== value) {
this.libService.broadcastingActivity.next(value);
}
}
}

22
openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/api.directive.module.ts
View File

@ -1,6 +1,7 @@
import { NgModule } from '@angular/core';
import { ActivitiesPanelRecordingActivityDirective, ActivitiesPanelStreamingActivityDirective } from './activities-panel.directive';
import { ActivitiesPanelBroadcastingActivityDirective, ActivitiesPanelRecordingActivityDirective } from './activities-panel.directive';
import { AdminLoginDirective, AdminRecordingsListDirective } from './admin.directive';
import { BroadcastingActivityBroadcastingErrorDirective } from './broadcasting-activity.directive';
import { LogoDirective } from './internals.directive';
import { ParticipantPanelItemMuteButtonDirective } from './participant-panel-item.directive';
import { RecordingActivityRecordingErrorDirective, RecordingActivityRecordingsListDirective } from './recording-activity.directive';
@ -9,11 +10,9 @@ import {
StreamDisplayParticipantNameDirective,
StreamSettingsButtonDirective
} from './stream.directive';
import { StreamingActivityStreamingErrorDirective } from './streaming-activity.directive';
import {
ToolbarActivitiesPanelButtonDirective,
ToolbarBackgroundEffectsButtonDirective,
ToolbarCaptionsButtonDirective,
ToolbarBackgroundEffectsButtonDirective, ToolbarBroadcastingButtonDirective, ToolbarCaptionsButtonDirective,
ToolbarChatPanelButtonDirective,
ToolbarDisplayLogoDirective,
ToolbarDisplaySessionNameDirective,
@ -22,8 +21,7 @@ import {
ToolbarParticipantsPanelButtonDirective,
ToolbarRecordingButtonDirective,
ToolbarScreenshareButtonDirective,
ToolbarSettingsButtonDirective,
ToolbarStreamingButtonDirective
ToolbarSettingsButtonDirective
} from './toolbar.directive';
import {
AudioMutedDirective,
@ -51,7 +49,7 @@ import {
ToolbarCaptionsButtonDirective,
ToolbarLeaveButtonDirective,
ToolbarRecordingButtonDirective,
ToolbarStreamingButtonDirective,
ToolbarBroadcastingButtonDirective,
ToolbarParticipantsPanelButtonDirective,
ToolbarChatPanelButtonDirective,
ToolbarActivitiesPanelButtonDirective,
@ -65,10 +63,10 @@ import {
ParticipantPanelItemMuteButtonDirective,
ParticipantNameDirective,
ActivitiesPanelRecordingActivityDirective,
ActivitiesPanelStreamingActivityDirective,
ActivitiesPanelBroadcastingActivityDirective,
RecordingActivityRecordingsListDirective,
RecordingActivityRecordingErrorDirective,
StreamingActivityStreamingErrorDirective,
BroadcastingActivityBroadcastingErrorDirective,
AdminRecordingsListDirective,
AdminLoginDirective
],
@ -86,7 +84,7 @@ import {
ToolbarCaptionsButtonDirective,
ToolbarLeaveButtonDirective,
ToolbarRecordingButtonDirective,
ToolbarStreamingButtonDirective,
ToolbarBroadcastingButtonDirective,
ToolbarParticipantsPanelButtonDirective,
ToolbarChatPanelButtonDirective,
ToolbarActivitiesPanelButtonDirective,
@ -100,10 +98,10 @@ import {
ParticipantPanelItemMuteButtonDirective,
ParticipantNameDirective,
ActivitiesPanelRecordingActivityDirective,
ActivitiesPanelStreamingActivityDirective,
ActivitiesPanelBroadcastingActivityDirective,
RecordingActivityRecordingsListDirective,
RecordingActivityRecordingErrorDirective,
StreamingActivityStreamingErrorDirective,
BroadcastingActivityBroadcastingErrorDirective,
AdminRecordingsListDirective,
AdminLoginDirective
]

55
openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/broadcasting-activity.directive.ts Normal file
View File

@ -0,0 +1,55 @@
import { AfterViewInit, Directive, ElementRef, Input, OnDestroy } from '@angular/core';
import { BroadcastingError } from '../../models/broadcasting.model';
import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
/**
* The **broadcastingError** directive allows to show any possible error with the broadcasting in the {@link BroadcastingActivityComponent}.
*
* Default: `undefined`
*
* Type: {@link BroadcastingError}
*
* It can be used in the parent element {@link VideoconferenceComponent} specifying the name of the `broadcastingActivity` component:
*
* @example
* <ov-videoconference [broadcastingActivityBroadcastingError]="error"></ov-videoconference>
*
* \
* And it also can be used in the {@link BroadcastingActivityComponent}.
* @example
* <ov-broadcasting-activity [broadcastingError]="error"></ov-broadcasting-activity>
*/
@Directive({
selector: 'ov-videoconference[broadcastingActivityBroadcastingError], ov-broadcasting-activity[broadcastingError]'
})
export class BroadcastingActivityBroadcastingErrorDirective implements AfterViewInit, OnDestroy {
@Input() set broadcastingActivityBroadcastingError(value: BroadcastingError) {
this.broadcastingErrorValue = value;
this.update(this.broadcastingErrorValue);
}
@Input() set broadcastingError(value: BroadcastingError) {
this.broadcastingErrorValue = value;
this.update(this.broadcastingErrorValue);
}
broadcastingErrorValue: BroadcastingError | undefined = undefined;
constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
ngAfterViewInit() {
this.update(this.broadcastingErrorValue);
}
ngOnDestroy(): void {
this.clear();
}
clear() {
this.broadcastingErrorValue = undefined;
this.update(undefined);
}
update(value: BroadcastingError | undefined) {
if (this.libService.broadcastingError.getValue() !== value) {
this.libService.broadcastingError.next(value);
}
}
}

55
openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/streaming-activity.directive.ts
View File

@ -1,55 +0,0 @@
import { AfterViewInit, Directive, ElementRef, Input, OnDestroy } from '@angular/core';
import { StreamingError } from '../../models/streaming.model';
import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
/**
* The **streamingError** directive allows to show any possible error with the streaming in the {@link StreamingActivityComponent}.
*
* Default: `undefined`
*
* Type: {@link StreamingError}
*
* It can be used in the parent element {@link VideoconferenceComponent} specifying the name of the `streamingActivity` component:
*
* @example
* <ov-videoconference [streamingActivityStreamingError]="error"></ov-videoconference>
*
* \
* And it also can be used in the {@link StreamingActivityComponent}.
* @example
* <ov-streaming-activity [streamingError]="error"></ov-streaming-activity>
*/
@Directive({
selector: 'ov-videoconference[streamingActivityStreamingError], ov-streaming-activity[streamingError]'
})
export class StreamingActivityStreamingErrorDirective implements AfterViewInit, OnDestroy {
@Input() set streamingActivityStreamingError(value: StreamingError) {
this.streamingErrorValue = value;
this.update(this.streamingErrorValue);
}
@Input() set streamingError(value: StreamingError) {
this.streamingErrorValue = value;
this.update(this.streamingErrorValue);
}
streamingErrorValue: StreamingError | undefined = undefined;
constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
ngAfterViewInit() {
this.update(this.streamingErrorValue);
}
ngOnDestroy(): void {
this.clear();
}
clear() {
this.streamingErrorValue = undefined;
this.update(undefined);
}
update(value: StreamingError | undefined) {
if (this.libService.streamingError.getValue() !== value) {
this.libService.streamingError.next(value);
}
}
}

32
openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/toolbar.directive.ts
View File

@ -125,40 +125,40 @@ export class ToolbarRecordingButtonDirective implements AfterViewInit, OnDestroy
}
/**
* The **streamingButton** directive allows show/hide the start/stop streaming toolbar button.
* The **broadcastingButton** directive allows show/hide the start/stop broadcasting toolbar button.
*
* Default: `true`
*
* It can be used in the parent element {@link VideoconferenceComponent} specifying the name of the `toolbar` component:
*
* @example
* <ov-videoconference [toolbarStreamingButton]="false"></ov-videoconference>
* <ov-videoconference [toolbarBroadcastingButton]="false"></ov-videoconference>
*
* \
* And it also can be used in the {@link ToolbarComponent}.
* @example
* <ov-toolbar [streamingButton]="false"></ov-toolbar>
* <ov-toolbar [broadcastingButton]="false"></ov-toolbar>
*
*/
@Directive({
selector: 'ov-videoconference[toolbarStreamingButton], ov-toolbar[streamingButton]'
selector: 'ov-videoconference[toolbarBroadcastingButton], ov-toolbar[broadcastingButton]'
})
export class ToolbarStreamingButtonDirective implements AfterViewInit, OnDestroy {
export class ToolbarBroadcastingButtonDirective implements AfterViewInit, OnDestroy {
/**
* @ignore
*/
@Input() set toolbarStreamingButton(value: boolean) {
this.streamingValue = value;
this.update(this.streamingValue);
@Input() set toolbarBroadcastingButton(value: boolean) {
this.broadcastingValue = value;
this.update(this.broadcastingValue);
}
/**
* @ignore
*/
@Input() set streamingButton(value: boolean) {
this.streamingValue = value;
this.update(this.streamingValue);
@Input() set broadcastingButton(value: boolean) {
this.broadcastingValue = value;
this.update(this.broadcastingValue);
}
private streamingValue: boolean = true;
private broadcastingValue: boolean = true;
/**
* @ignore
@ -166,20 +166,20 @@ export class ToolbarStreamingButtonDirective implements AfterViewInit, OnDestroy
constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
ngAfterViewInit() {
this.update(this.streamingValue);
this.update(this.broadcastingValue);
}
ngOnDestroy(): void {
this.clear();
}
private clear() {
this.streamingValue = true;
this.broadcastingValue = true;
this.update(true);
}
private update(value: boolean) {
if (this.libService.streamingButton.getValue() !== value) {
this.libService.streamingButton.next(value);
if (this.libService.broadcastingButton.getValue() !== value) {
this.libService.broadcastingButton.next(value);
}
}
}

13
openvidu-components-angular/projects/openvidu-angular/src/lib/models/broadcasting.model.ts Normal file
View File

@ -0,0 +1,13 @@
export enum BroadcastingStatus {
STARTING = 'starting',
STARTED = 'started',
STOPPING = 'stopping',
STOPPED = 'stopped',
FAILED = 'failed'
}
export interface BroadcastingError {
message: string;
// If broadcasting feature is available or not
broadcastAvailable: boolean;
}

13
openvidu-components-angular/projects/openvidu-angular/src/lib/models/streaming.model.ts
View File

@ -1,13 +0,0 @@
export enum StreamingStatus {
STARTING = 'starting',
STARTED = 'started',
STOPPING = 'stopping',
STOPPED = 'stopped',
FAILED = 'failed'
}
export interface StreamingError {
message: string;
// If streaming service is available or not
rtmpAvailable: boolean;
}

4
openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts
View File

@ -49,8 +49,8 @@ import { AvatarProfileComponent } from './components/avatar-profile/avatar-profi
import { CaptionsComponent } from './components/captions/captions.component';
import { ProFeatureDialogTemplateComponent } from './components/dialogs/pro-feature-dialog.component';
import { ActivitiesPanelComponent } from './components/panel/activities-panel/activities-panel.component';
import { BroadcastingActivityComponent } from './components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component';
import { RecordingActivityComponent } from './components/panel/activities-panel/recording-activity/recording-activity.component';
import { StreamingActivityComponent } from './components/panel/activities-panel/streaming-activity/streaming-activity.component';
import { BackgroundEffectsPanelComponent } from './components/panel/background-effects-panel/background-effects-panel.component';
import { SettingsPanelComponent } from './components/panel/settings-panel/settings-panel.component';
import { AudioDevicesComponent } from './components/settings/audio-devices/audio-devices.component';
@ -71,7 +71,7 @@ const publicComponents = [
PanelComponent,
ActivitiesPanelComponent,
RecordingActivityComponent,
StreamingActivityComponent,
BroadcastingActivityComponent,
ParticipantsPanelComponent,
ParticipantPanelItemComponent,
ChatPanelComponent,

8
openvidu-components-angular/projects/openvidu-angular/src/lib/services/streaming/streaming.service.spec.ts → openvidu-components-angular/projects/openvidu-angular/src/lib/services/broadcasting/broadcasting.service.spec.ts
View File

@ -1,13 +1,13 @@
import { TestBed } from '@angular/core/testing';
import { StreamingService } from './streaming.service';
import { BroadcastingService } from './broadcasting.service';
describe('StreamingService', () => {
let service: StreamingService;
describe('BroadcastingService', () => {
let service: BroadcastingService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(StreamingService);
service = TestBed.inject(BroadcastingService);
});
it('should be created', () => {

49
openvidu-components-angular/projects/openvidu-angular/src/lib/services/broadcasting/broadcasting.service.ts Normal file
View File

@ -0,0 +1,49 @@
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { BroadcastingStatus } from '../../models/broadcasting.model';
@Injectable({
providedIn: 'root'
})
export class BroadcastingService {
/**
* Broadcasting status Observable which pushes the broadcasting state in every update.
*/
broadcastingStatusObs: Observable<{ status: BroadcastingStatus; time?: Date } | undefined>;
private broadcastingTime: Date | undefined;
private broadcastingTimeInterval: NodeJS.Timer;
private broadcastingStatus = <BehaviorSubject<{ status: BroadcastingStatus; time?: Date } | undefined>>new BehaviorSubject(undefined);
constructor() {
this.broadcastingStatusObs = this.broadcastingStatus.asObservable();
}
/**
* @internal
* @param status
*/
updateStatus(status: BroadcastingStatus) {
if (status === BroadcastingStatus.STARTED) {
this.startBroadcastingTime();
} else {
this.stopBroadcastingTime();
}
this.broadcastingStatus.next({ status, time: this.broadcastingTime });
}
private startBroadcastingTime() {
this.broadcastingTime = new Date();
this.broadcastingTime.setHours(0, 0, 0, 0);
this.broadcastingTimeInterval = setInterval(() => {
this.broadcastingTime?.setSeconds(this.broadcastingTime.getSeconds() + 1);
this.broadcastingTime = new Date(this.broadcastingTime.getTime());
this.broadcastingStatus.next({ status: this.broadcastingStatus.getValue()?.status, time: this.broadcastingTime });
}, 1000);
}
private stopBroadcastingTime() {
clearInterval(this.broadcastingTimeInterval);
this.broadcastingTime = undefined;
}
}

26
openvidu-components-angular/projects/openvidu-angular/src/lib/services/config/openvidu-angular.config.service.ts
View File

@ -1,8 +1,8 @@
import { Inject, Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { OpenViduAngularConfig, ParticipantFactoryFunction } from '../../config/openvidu-angular.config';
import { BroadcastingError } from '../../models/broadcasting.model';
import { RecordingInfo } from '../../models/recording.model';
import { StreamingError } from '../../models/streaming.model';
// import { version } from '../../../../package.json';
@ -66,16 +66,16 @@ export class OpenViduAngularConfigService {
recordingsListObs: Observable<RecordingInfo[]>;
recordingButton = <BehaviorSubject<boolean>>new BehaviorSubject(true);
recordingButtonObs: Observable<boolean>;
streamingButton = <BehaviorSubject<boolean>>new BehaviorSubject(true);
streamingButtonObs: Observable<boolean>;
broadcastingButton = <BehaviorSubject<boolean>>new BehaviorSubject(true);
broadcastingButtonObs: Observable<boolean>;
recordingActivity = <BehaviorSubject<boolean>>new BehaviorSubject(true);
recordingActivityObs: Observable<boolean>;
streamingActivity = <BehaviorSubject<boolean>>new BehaviorSubject(true);
streamingActivityObs: Observable<boolean>;
broadcastingActivity = <BehaviorSubject<boolean>>new BehaviorSubject(true);
broadcastingActivityObs: Observable<boolean>;
recordingError = <BehaviorSubject<any>>new BehaviorSubject(null);
recordingErrorObs: Observable<any>;
streamingErrorObs: Observable<StreamingError | undefined>;
streamingError = <BehaviorSubject<StreamingError | undefined>>new BehaviorSubject(undefined);
broadcastingErrorObs: Observable<BroadcastingError | undefined>;
broadcastingError = <BehaviorSubject<BroadcastingError | undefined>>new BehaviorSubject(undefined);
// Admin
adminRecordingsList: BehaviorSubject<RecordingInfo[]> = new BehaviorSubject(<RecordingInfo[]>[]);
adminRecordingsListObs: Observable<RecordingInfo[]>;
@ -102,7 +102,7 @@ export class OpenViduAngularConfigService {
this.displaySessionNameObs = this.displaySessionName.asObservable();
this.displayLogoObs = this.displayLogo.asObservable();
this.recordingButtonObs = this.recordingButton.asObservable();
this.streamingButtonObs = this.streamingButton.asObservable();
this.broadcastingButtonObs = this.broadcastingButton.asObservable();
this.toolbarSettingsButtonObs = this.toolbarSettingsButton.asObservable();
this.captionsButtonObs = this.captionsButton.asObservable();
//Stream observables
@ -115,9 +115,9 @@ export class OpenViduAngularConfigService {
this.recordingActivityObs = this.recordingActivity.asObservable();
this.recordingsListObs = this.recordingsList.asObservable();
this.recordingErrorObs = this.recordingError.asObservable();
// Streaming activity
this.streamingActivityObs = this.streamingActivity.asObservable();
this.streamingErrorObs = this.streamingError.asObservable();
// Broadcasting activity
this.broadcastingActivityObs = this.broadcastingActivity.asObservable();
this.broadcastingErrorObs = this.broadcastingError.asObservable();
// Admin dashboard
this.adminRecordingsListObs = this.adminRecordingsList.asObservable();
this.adminLoginErrorObs = this.adminLoginError.asObservable();
@ -142,7 +142,7 @@ export class OpenViduAngularConfigService {
return this.recordingButton.getValue() && this.recordingActivity.getValue();
}
isStreamingEnabled(): boolean {
return this.streamingButton.getValue() && this.streamingActivity.getValue();
isBroadcastingEnabled(): boolean {
return this.broadcastingButton.getValue() && this.broadcastingActivity.getValue();
}
}

49
openvidu-components-angular/projects/openvidu-angular/src/lib/services/streaming/streaming.service.ts
View File

@ -1,49 +0,0 @@
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { StreamingStatus } from '../../models/streaming.model';
@Injectable({
providedIn: 'root'
})
export class StreamingService {
/**
* Streaming status Observable which pushes the streaming state in every update.
*/
streamingStatusObs: Observable<{ status: StreamingStatus; time?: Date } | undefined>;
private streamingTime: Date | undefined;
private streamingTimeInterval: NodeJS.Timer;
private streamingStatus = <BehaviorSubject<{ status: StreamingStatus; time?: Date } | undefined>>new BehaviorSubject(undefined);
constructor() {
this.streamingStatusObs = this.streamingStatus.asObservable();
}
/**
* @internal
* @param status
*/
updateStatus(status: StreamingStatus) {
if (status === StreamingStatus.STARTED) {
this.startStreamingTime();
} else {
this.stopStreamingTime();
}
this.streamingStatus.next({ status, time: this.streamingTime });
}
private startStreamingTime() {
this.streamingTime = new Date();
this.streamingTime.setHours(0, 0, 0, 0);
this.streamingTimeInterval = setInterval(() => {
this.streamingTime?.setSeconds(this.streamingTime.getSeconds() + 1);
this.streamingTime = new Date(this.streamingTime.getTime());
this.streamingStatus.next({ status: this.streamingStatus.getValue()?.status, time: this.streamingTime });
}, 1000);
}
private stopStreamingTime() {
clearInterval(this.streamingTimeInterval);
this.streamingTime = undefined;
}
}

8
openvidu-components-angular/projects/openvidu-angular/src/public-api.ts
View File

@ -7,8 +7,8 @@ export * from './lib/admin/dashboard/dashboard.component';
export * from './lib/admin/login/login.component';
export * from './lib/components/layout/layout.component';
export * from './lib/components/panel/activities-panel/activities-panel.component';
export * from './lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component';
export * from './lib/components/panel/activities-panel/recording-activity/recording-activity.component';
export * from './lib/components/panel/activities-panel/streaming-activity/streaming-activity.component';
export * from './lib/components/panel/chat-panel/chat-panel.component';
export * from './lib/components/panel/panel.component';
export * from './lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component';
@ -21,21 +21,21 @@ export * from './lib/config/openvidu-angular.config';
export * from './lib/directives/api/activities-panel.directive';
export * from './lib/directives/api/admin.directive';
export * from './lib/directives/api/api.directive.module';
export * from './lib/directives/api/broadcasting-activity.directive';
export * from './lib/directives/api/internals.directive';
export * from './lib/directives/api/participant-panel-item.directive';
export * from './lib/directives/api/recording-activity.directive';
export * from './lib/directives/api/stream.directive';
export * from './lib/directives/api/streaming-activity.directive';
export * from './lib/directives/api/toolbar.directive';
export * from './lib/directives/api/videoconference.directive';
export * from './lib/directives/template/openvidu-angular.directive';
export * from './lib/directives/template/openvidu-angular.directive.module';
export * from './lib/models/broadcasting.model';
// Models
export * from './lib/models/panel.model';
export * from './lib/models/participant.model';
export * from './lib/models/recording.model';
export * from './lib/models/signal.model';
export * from './lib/models/streaming.model';
export * from './lib/models/token.model';
export * from './lib/models/video-type.model';
export * from './lib/openvidu-angular.module';
@ -44,11 +44,11 @@ export * from './lib/pipes/participant.pipe';
export * from './lib/pipes/recording.pipe';
// Services
export * from './lib/services/action/action.service';
export * from './lib/services/broadcasting/broadcasting.service';
export * from './lib/services/chat/chat.service';
export * from './lib/services/layout/layout.service';
export * from './lib/services/openvidu/openvidu.service';
export * from './lib/services/panel/panel.service';
export * from './lib/services/participant/participant.service';
export * from './lib/services/recording/recording.service';
export * from './lib/services/streaming/streaming.service';

10
openvidu-components-angular/src/app/openvidu-call/call.component.html
View File

@ -12,7 +12,7 @@
[toolbarFullscreenButton]="true"
[toolbarCaptionsButton]="true"
[toolbarRecordingButton]="true"
[toolbarStreamingButton]="true"
[toolbarBroadcastingButton]="true"
[toolbarBackgroundEffectsButton]="true"
[toolbarLeaveButton]="true"
[toolbarChatPanelButton]="true"
@ -26,7 +26,7 @@
[activitiesPanelRecordingActivity]="true"
[recordingActivityRecordingsList]="recordingList"
[recordingActivityRecordingError]="recordingError"
[streamingActivityStreamingError]="streamingError"
[broadcastingActivityBroadcastingError]="broadcastingError"
[toolbarSettingsButton]="true"
(onJoinButtonClicked)="onJoinClicked()"
(onToolbarLeaveButtonClicked)="onToolbarLeaveButtonClicked()"
@ -41,9 +41,9 @@
(onActivitiesPanelStartRecordingClicked)="onStartRecordingClicked()"
(onActivitiesPanelStopRecordingClicked)="onStopRecordingClicked()"
(onActivitiesPanelDeleteRecordingClicked)="onDeleteRecordingClicked($event)"
(onActivitiesPanelStartStreamingClicked)="onStartStreamingClicked($event)"
(onActivitiesPanelStopStreamingClicked)="onStopStreamingClicked()"
(onToolbarStopStreamingClicked)="onStopStreamingClicked()"
(onActivitiesPanelStartBroadcastingClicked)="onStartBroadcastingClicked($event)"
(onActivitiesPanelStopBroadcastingClicked)="onStopBroadcastingClicked()"
(onToolbarStopBroadcastingClicked)="onStopBroadcastingClicked()"
(onNodeCrashed)="onNodeCrashed()"
>
<!-- <div *ovActivitiesPanel>HELLO</div> -->

24
openvidu-components-angular/src/app/openvidu-call/call.component.ts
View File

@ -16,7 +16,7 @@ export class CallComponent implements OnInit {
isSessionAlive: boolean = false;
recordingList: RecordingInfo[] = [];
recordingError: any;
streamingError: any;
broadcastingError: any;
constructor(private restService: RestService) {}
@ -81,27 +81,27 @@ export class CallComponent implements OnInit {
console.log('TOOLBAR LEAVE CLICKED');
}
async onStartStreamingClicked(rtmpUrl: string) {
console.log('START STREAMING', rtmpUrl);
async onStartBroadcastingClicked(broadcastUrl: string) {
console.log('START STREAMING', broadcastUrl);
try {
this.streamingError = null;
const resp = await this.restService.startStreaming(rtmpUrl);
console.log('Streaming response ', resp);
this.broadcastingError = null;
const resp = await this.restService.startBroadcasting(broadcastUrl);
console.log('Broadcasting response ', resp);
} catch (error) {
console.error(error);
this.streamingError = error.error;
this.broadcastingError = error.error;
}
}
async onStopStreamingClicked() {
async onStopBroadcastingClicked() {
console.log('STOP STREAMING');
try {
this.streamingError = null;
const resp = await this.restService.stopStreaming();
console.log('Streaming response ', resp);
this.broadcastingError = null;
const resp = await this.restService.stopBroadcasting();
console.log('Broadcasting response ', resp);
} catch (error) {
console.error(error);
this.streamingError = error.message || error;
this.broadcastingError = error.message || error;
}
}

4
openvidu-components-angular/src/app/services/rest.service.ts
View File

@ -41,7 +41,7 @@ export class RestService {
}
}
async startStreaming(broadcastUrl: string) {
async startBroadcasting(broadcastUrl: string) {
try {
const options = {
headers: new HttpHeaders({
@ -68,7 +68,7 @@ export class RestService {
}
}
async stopStreaming() {
async stopBroadcasting() {
try {
return lastValueFrom(this.http.delete<any>(`${this.baseHref}broadcasts/stop`));
} catch (error) {

6
openvidu-components-angular/src/app/testing-app/testing.component.html
View File

@ -84,7 +84,7 @@
[chatPanelButton]="chatPanelBtn"
[displaySessionName]="displaySessionId"
[displayLogo]="displayLogo"
[streamingButton]="streamingBtn"
[broadcastingButton]="broadcastingBtn"
(onLeaveButtonClicked)="appendElement('onLeaveButtonClicked')"
(onCameraButtonClicked)="appendElement('onCameraButtonClicked')"
(onMicrophoneButtonClicked)="appendElement('onMicrophoneButtonClicked')"
@ -205,11 +205,11 @@
<ov-activities-panel
*ovActivitiesPanel
[recordingActivity]="recordingActivity"
[streamingActivity]="streamingActivity"
[broadcastingActivity]="broadcastingActivity"
id="custom-activities-panel"
>
<ov-recording-activity *ngIf="recordingActivity"></ov-recording-activity>
<ov-streaming-activity *ngIf="streamingActivity" [streamingError]="streamingError"></ov-streaming-activity>
<ov-broadcasting-activity *ngIf="broadcastingActivity" [broadcastingError]="broadcastingError"></ov-broadcasting-activity>
</ov-activities-panel>
</ng-template>

32
openvidu-components-angular/src/app/testing-app/testing.component.ts
View File

@ -2,7 +2,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { PanelService, StreamingError } from 'openvidu-angular';
import { BroadcastingError, PanelService } from 'openvidu-angular';
import { Subscription, throwError as observableThrowError } from 'rxjs';
import { catchError } from 'rxjs/operators';
@ -39,7 +39,7 @@ export enum AttributeDirective {
// AUDIO_MUTED = 'audioMuted',
TOOLBAR_SCREENSHARE = 'screenshareButton',
TOOLBAR_FULLSCREEN = 'fullscreenButton',
TOOLBAR_STREAMING = 'streamingButton',
TOOLBAR_BROADCASTING = 'broadcastingButton',
TOOLBAR_LEAVE = 'leaveButton',
TOOLBAR_PARTICIPANTS_PANEL = 'participantsPanelButton',
TOOLBAR_ACTIVITIES_PANEL = 'activitiesPanelButton',
@ -51,8 +51,8 @@ export enum AttributeDirective {
STREAM_SETTINGS = 'settingsButton',
PARTICIPANT_ITEM_MUTE = 'muteButton',
ACTIVITIES_PANEL_RECORDING_ACTIVITY = 'recordingActivity',
ACTIVITIES_PANEL_STREAMING_ACTIVITY = 'streamingActivity',
ACTIVITIES_PANEL_STREAMING_ERROR = 'streamingError'
ACTIVITIES_PANEL_BROADCASTING_ACTIVITY = 'broadcastingActivity',
ACTIVITIES_PANEL_BROADCASTING_ERROR = 'broadcastingError'
}
@Component({
@ -100,7 +100,7 @@ export class TestingComponent implements OnInit {
{ name: AttributeDirective.TOOLBAR_DISPLAY_LOGO, checked: true },
{ name: AttributeDirective.TOOLBAR_DISPLAY_SESSION, checked: true },
{ name: AttributeDirective.TOOLBAR_FULLSCREEN, checked: true },
{ name: AttributeDirective.TOOLBAR_STREAMING, checked: true },
{ name: AttributeDirective.TOOLBAR_BROADCASTING, checked: true },
{ name: AttributeDirective.TOOLBAR_LEAVE, checked: true },
{ name: AttributeDirective.TOOLBAR_PARTICIPANTS_PANEL, checked: true },
{ name: AttributeDirective.TOOLBAR_ACTIVITIES_PANEL, checked: true },
@ -123,8 +123,8 @@ export class TestingComponent implements OnInit {
component: StructuralDirectives.ACTIVITIES_PANEL,
directives: [
{ name: AttributeDirective.ACTIVITIES_PANEL_RECORDING_ACTIVITY, checked: true },
{ name: AttributeDirective.ACTIVITIES_PANEL_STREAMING_ACTIVITY, checked: true },
{ name: AttributeDirective.ACTIVITIES_PANEL_STREAMING_ERROR, checked: false }
{ name: AttributeDirective.ACTIVITIES_PANEL_BROADCASTING_ACTIVITY, checked: true },
{ name: AttributeDirective.ACTIVITIES_PANEL_BROADCASTING_ERROR, checked: false }
]
}
];
@ -155,13 +155,13 @@ export class TestingComponent implements OnInit {
participantName = true;
settingsBtn = true;
participantItemMuteBtn = true;
streamingActivity = true;
streamingBtn = true;
broadcastingActivity = true;
broadcastingBtn = true;
tokens: { webcam: any; screen: any };
subscription: Subscription;
streamingError: StreamingError | undefined;
broadcastingError: BroadcastingError | undefined;
recordingActivity = true;
@ -264,8 +264,8 @@ export class TestingComponent implements OnInit {
this.fullscreenBtn = value;
break;
case AttributeDirective.TOOLBAR_STREAMING:
this.streamingBtn = value;
case AttributeDirective.TOOLBAR_BROADCASTING:
this.broadcastingBtn = value;
break;
case AttributeDirective.TOOLBAR_LEAVE:
@ -296,12 +296,12 @@ export class TestingComponent implements OnInit {
case AttributeDirective.ACTIVITIES_PANEL_RECORDING_ACTIVITY:
this.recordingActivity = value;
break;
case AttributeDirective.ACTIVITIES_PANEL_STREAMING_ACTIVITY:
this.streamingActivity = value;
case AttributeDirective.ACTIVITIES_PANEL_BROADCASTING_ACTIVITY:
this.broadcastingActivity = value;
break;
case AttributeDirective.ACTIVITIES_PANEL_STREAMING_ERROR:
this.streamingError = { message: 'TEST_ERROR', rtmpAvailable: true };
case AttributeDirective.ACTIVITIES_PANEL_BROADCASTING_ERROR:
this.broadcastingError = { message: 'TEST_ERROR', broadcastAvailable: true };
break;
default:
break;