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

openvidu-testapp dynamic change of Publisher

pull/30/head
pabloFuente 2018-01-18 16:09:39 +01:00
parent 34b753a298
commit 391be208af
4 changed files with 181 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openvidu-testapp/package.json
View File

@ -42,7 +42,7 @@
"karma-jasmine": "~1.1.0",
"karma-cli": "~1.0.1",
"karma-chrome-launcher": "2.2.0",
"typescript": "2.3.3",
"typescript": "2.5.3",
"karma-coverage-istanbul-reporter": "^1.3.0",
"karma": "1.7.1",
"karma-jasmine-html-reporter": "^0.2.2",

13
openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html
View File

@ -85,19 +85,22 @@
<div class="session-card-inner">
<div class="session-title">{{sessionName}}</div>
<div class="session-actions">
<button class="publish-btn" *ngIf="publishTo" (click)="publishUnpublish()">
<button class="change-publisher-btn" *ngIf="publishTo" (click)="changePublisher()" title="Change publisher">
<mat-icon aria-label="Change publisher button">switch_video</mat-icon>
</button>
<button class="publish-btn" *ngIf="publishTo" (click)="publishUnpublish()" title="Publish/Unpublish">
<mat-icon aria-label="Publish Unpublish button">{{publishIcon}}</mat-icon>
</button>
<button class="message-btn" (click)="sendMessage()">
<button class="message-btn" (click)="sendMessage()" title="Broadcast message">
<mat-icon aria-label="Send message button" style="font-size: 20px">chat</mat-icon>
</button>
<button class="video-btn" *ngIf="publishTo && sendVideo" (click)="toggleVideo()">
<button class="video-btn" *ngIf="publishTo && sendVideoChange" (click)="toggleVideo()" title="Mute/Unmute video">
<mat-icon aria-label="Mute video button">{{videoIcon}}</mat-icon>
</button>
<button class="audio-btn" *ngIf="publishTo && sendAudio" (click)="toggleAudio()">
<button class="audio-btn" *ngIf="publishTo && sendAudioChange" (click)="toggleAudio()" title="Mute/Unmute audio">
<mat-icon aria-label="Mute audio button">{{audioIcon}}</mat-icon>
</button>
<button class="leave-btn" (click)="leaveSession()">
<button class="leave-btn" (click)="leaveSession()" title="Leave session">
<mat-icon aria-label="Leave button">clear</mat-icon>
</button>
</div>

261
openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts
View File

@ -82,10 +82,14 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
audioMuted = false;
videoMuted = false;
unpublished = false;
publisherChanged = false;
audioIcon = 'mic';
videoIcon = 'videocam';
publishIcon = 'stop';
sendAudioChange: boolean;
sendVideoChange: boolean;
events: OpenViduEvent[] = [];
openviduError: any;
@ -163,58 +167,11 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
private joinSessionShared(sId, token): void {
const OV: OpenVidu = new OpenVidu();
this.OV = new OpenVidu();
this.session = OV.initSession(sId);
this.session = this.OV.initSession(sId);
this.session.on('streamCreated', (event) => {
this.changeDetector.detectChanges();
if (this.subscribeTo) {
const subscriber: Subscriber = this.session.subscribe(event.stream, 'remote-vid-' + this.session.connection.connectionId);
subscriber.on('videoElementCreated', (e) => {
if (!event.stream.getRecvVideo()) {
$(e.element).css({ 'background-color': '#4d4d4d' });
$(e.element).attr('poster', 'assets/images/volume.png');
}
this.appendUserData(e.element, subscriber.stream.connection);
this.updateEventList('videoElementCreated', e.element.id);
});
subscriber.on('videoPlaying', (e) => {
this.updateEventList('videoPlaying', e.element.id);
});
this.subscribers[subscriber.stream.connection.connectionId] = { 'subscriber': subscriber, 'subbed': true };
}
this.updateEventList('streamCreated', event.stream.connection.connectionId);
});
this.session.on('streamDestroyed', (event) => {
this.removeUserData(event.stream.connection.connectionId);
this.updateEventList('streamDestroyed', event.stream.connection.connectionId);
});
this.session.on('connectionCreated', (event) => {
this.updateEventList('connectionCreated', event.connection.connectionId);
});
this.session.on('connectionDestroyed', (event) => {
this.updateEventList('connectionDestroyed', event.connection.connectionId);
});
this.session.on('sessionDisconnected', (event) => {
this.updateEventList('sessionDisconnected', 'No data');
});
this.session.on('signal', (event) => {
this.updateEventList('signal', event.from.connectionId + '-' + event.data);
});
/*this.session.on('publisherStartSpeaking', (event) => {
console.log('Publisher start speaking');
console.log(event);
});
this.session.on('publisherStopSpeaking', (event) => {
console.log('Publisher stop speaking');
console.log(event);
});*/
this.addSessionEvents(this.session);
this.session.connect(token, this.clientData, (error) => {
if (!error) {
@ -227,13 +184,16 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
this.updateVideoIcon();
this.updatePublishIcon();
this.publisher = OV.initPublisher(
this.sendAudioChange = this.sendAudio;
this.sendVideoChange = this.sendVideo;
this.publisher = this.OV.initPublisher(
'local-vid-' + this.session.connection.connectionId,
{
audio: this.sendAudio,
video: this.sendVideo,
activeAudio: this.activeAudio,
activeVideo: this.activeVideo,
audioActive: this.activeAudio,
videoActive: this.activeVideo,
quality: 'MEDIUM',
screen: this.optionsVideo === 'screen' ? true : false
},
@ -251,43 +211,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
}
});
this.publisher.on('videoElementCreated', (event) => {
if (this.publishTo &&
(!this.sendVideo ||
this.sendVideo &&
!(this.optionsVideo !== 'screen') &&
this.openviduError &&
this.openviduError.name === 'NO_VIDEO_DEVICE')) {
$(event.element).css({ 'background-color': '#4d4d4d' });
$(event.element).attr('poster', 'assets/images/volume.png');
}
this.updateEventList('videoElementCreated', event.element.id);
});
this.publisher.on('accessAllowed', (e) => {
this.updateEventList('accessAllowed', '');
});
this.publisher.on('accessDenied', (e) => {
this.updateEventList('accessDenied', '');
});
this.publisher.on('videoPlaying', (e) => {
this.updateEventList('videoPlaying', e.element.id);
});
this.publisher.on('remoteVideoPlaying', (e) => {
this.updateEventList('remoteVideoPlaying', e.element.id);
});
this.publisher.on('streamCreated', (e) => {
this.updateEventList('streamCreated', e.stream.connection.connectionId);
});
this.publisher.on('streamDestroyed', (e) => {
this.updateEventList('streamDestroyed', e.stream.connection.connectionId);
});
this.addPublisherEvents(this.publisher);
if (this.subscribeToRemote) {
this.publisher.subscribeToRemote();
@ -455,6 +379,72 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
this.updatePublishIcon();
}
changePublisher() {
if (!this.unpublished) {
this.session.unpublish(this.publisher);
}
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 === 'video') {
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;
}
this.audioMuted = false;
this.videoMuted = false;
this.unpublished = false;
this.updateAudioIcon();
this.updateVideoIcon();
this.updatePublishIcon();
this.publisher = this.OV.initPublisher(
'local-vid-' + this.session.connection.connectionId,
{
audio: this.sendAudioChange,
video: this.sendVideoChange,
audioActive: (!this.publisherChanged) ? true : !this.audioMuted,
videoActive: (!this.publisherChanged) ? true : !this.videoMuted,
quality: 'MEDIUM',
screen: screenChange
},
(err) => {
if (err) {
console.warn(err);
this.openviduError = err;
if (err.name === 'SCREEN_EXTENSION_NOT_INSTALLED') {
this.extensionDialog.open(ExtensionDialogComponent, {
data: { url: err.message },
disableClose: true,
width: '250px'
});
}
}
});
this.addPublisherEvents(this.publisher);
this.session.publish(this.publisher);
this.publisherChanged = !this.publisherChanged;
}
subUnsubFromSubscriber(connectionId: string) {
let subscriber: Subscriber = this.subscribers[connectionId].subscriber;
if (this.subscribers[connectionId].subbed) {
@ -480,4 +470,95 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
this.subscribers[connectionId].subbed = !this.subscribers[connectionId].subbed;
}
addSessionEvents(session: Session) {
session.on('streamCreated', (event) => {
this.changeDetector.detectChanges();
if (this.subscribeTo) {
const subscriber: Subscriber = session.subscribe(event.stream, 'remote-vid-' + session.connection.connectionId);
subscriber.on('videoElementCreated', (e) => {
if (!event.stream.getRecvVideo()) {
$(e.element).css({ 'background-color': '#4d4d4d' });
$(e.element).attr('poster', 'assets/images/volume.png');
}
this.appendUserData(e.element, subscriber.stream.connection);
this.updateEventList('videoElementCreated', e.element.id);
});
subscriber.on('videoPlaying', (e) => {
this.updateEventList('videoPlaying', e.element.id);
});
this.subscribers[subscriber.stream.connection.connectionId] = { 'subscriber': subscriber, 'subbed': true };
}
this.updateEventList('streamCreated', event.stream.connection.connectionId);
});
session.on('streamDestroyed', (event) => {
this.removeUserData(event.stream.connection.connectionId);
this.updateEventList('streamDestroyed', event.stream.connection.connectionId);
});
session.on('connectionCreated', (event) => {
this.updateEventList('connectionCreated', event.connection.connectionId);
});
session.on('connectionDestroyed', (event) => {
this.updateEventList('connectionDestroyed', event.connection.connectionId);
});
session.on('sessionDisconnected', (event) => {
this.updateEventList('sessionDisconnected', 'No data');
});
session.on('signal', (event) => {
this.updateEventList('signal', event.from.connectionId + '-' + event.data);
});
/*session.on('publisherStartSpeaking', (event) => {
console.log('Publisher start speaking');
console.log(event);
});
session.on('publisherStopSpeaking', (event) => {
console.log('Publisher stop speaking');
console.log(event);
});*/
}
addPublisherEvents(publisher: Publisher) {
publisher.on('videoElementCreated', (event) => {
if (this.publishTo &&
(!this.sendVideoChange ||
this.sendVideoChange &&
!(this.optionsVideo !== 'screen') &&
this.openviduError &&
this.openviduError.name === 'NO_VIDEO_DEVICE')) {
$(event.element).css({ 'background-color': '#4d4d4d' });
$(event.element).attr('poster', 'assets/images/volume.png');
}
this.updateEventList('videoElementCreated', event.element.id);
});
publisher.on('accessAllowed', (e) => {
this.updateEventList('accessAllowed', '');
});
publisher.on('accessDenied', (e) => {
this.updateEventList('accessDenied', '');
});
publisher.on('videoPlaying', (e) => {
this.updateEventList('videoPlaying', e.element.id);
});
publisher.on('remoteVideoPlaying', (e) => {
this.updateEventList('remoteVideoPlaying', e.element.id);
});
publisher.on('streamCreated', (e) => {
this.updateEventList('streamCreated', e.stream.connection.connectionId);
});
publisher.on('streamDestroyed', (e) => {
this.updateEventList('streamDestroyed', e.stream.connection.connectionId);
});
}
}

2
openvidu-testapp/src/app/components/test-sessions/test-sessions.component.html
View File

@ -10,7 +10,7 @@
<button id="one2one-btn" mat-raised-button color="primary" (click)="loadScenario(2,0,0)">1:1</button>
<button id="one2many-btn" mat-raised-button color="primary" (click)="loadScenario(0,1,numberSubs)">1:{{numberSubs}}</button>
<mat-form-field>
<input matInput [(ngModel)]="numberSubs">
<input id="one2many-input" matInput [(ngModel)]="numberSubs">
</mat-form-field>
</div>
</div>