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

openvidu-components-angular: multiple VB bug fixes

pull/721/head
pabloFuente 2022-05-05 14:03:41 +02:00
parent f735819ae2
commit 7832f5a75f
9 changed files with 38 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html
View File

@ -72,7 +72,7 @@
<button
mat-icon-button
id="camera-button"
[disabled]="!hasVideoDevices"
[disabled]="!hasVideoDevices || videoMuteChanging"
[class.warn-btn]="isVideoMuted"
(click)="toggleCam()"
>

9
openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts
View File

@ -20,6 +20,7 @@ import { OpenViduService } from '../../services/openvidu/openvidu.service';
import { PanelService } from '../../services/panel/panel.service';
import { ParticipantService } from '../../services/participant/participant.service';
import { StorageService } from '../../services/storage/storage.service';
import { VirtualBackgroundService } from '../../services/virtual-background/virtual-background.service';
/**
* @internal
@ -37,6 +38,7 @@ export class PreJoinComponent implements OnInit, OnDestroy {
microphoneSelected: CustomDevice;
isVideoMuted: boolean;
isAudioMuted: boolean;
videoMuteChanging: boolean;
localParticipant: ParticipantAbstractModel;
windowSize: number;
hasVideoDevices: boolean;
@ -72,7 +74,8 @@ export class PreJoinComponent implements OnInit, OnDestroy {
private participantService: ParticipantService,
protected panelService: PanelService,
private libService: OpenViduAngularConfigService,
private storageSrv: StorageService
private storageSrv: StorageService,
private backgroundService: VirtualBackgroundService
) {
this.log = this.loggerSrv.get('PreJoinComponent');
}
@ -118,6 +121,8 @@ export class PreJoinComponent implements OnInit, OnDestroy {
// await this.openviduService.replaceTrack(VideoType.CAMERA, pp);
// TODO: Remove this when replaceTrack issue is fixed
const pp: PublisherProperties = { videoSource, audioSource: this.microphoneSelected.device, mirror };
await this.backgroundService.removeBackground();
await this.openviduService.republishTrack(pp);
this.deviceSrv.setCameraSelected(videoSource);
@ -142,10 +147,12 @@ export class PreJoinComponent implements OnInit, OnDestroy {
}
async toggleCam() {
this.videoMuteChanging = true;
const publish = this.isVideoMuted;
await this.openviduService.publishVideo(publish);
this.isVideoMuted = !this.isVideoMuted;
this.storageSrv.setVideoMuted(this.isVideoMuted);
this.videoMuteChanging = false;
}
toggleMic() {

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

@ -29,7 +29,7 @@
id="camera-btn"
mat-icon-button
(click)="toggleCamera()"
[disabled]="isConnectionLost || !hasVideoDevices"
[disabled]="isConnectionLost || !hasVideoDevices || videoMuteChanging"
[class.warn-btn]="!isWebcamVideoActive"
>
<mat-icon *ngIf="isWebcamVideoActive" matTooltip="Mute your cam" id="videocam">videocam</mat-icon>

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

@ -277,6 +277,10 @@ export class ToolbarComponent implements OnInit, OnDestroy {
* @ignore
*/
showSessionName: boolean = true;
/**
* @ignore
*/
videoMuteChanging: boolean = false;
/**
* @ignore
@ -395,8 +399,8 @@ export class ToolbarComponent implements OnInit, OnDestroy {
* @ignore
*/
async toggleCamera() {
this.videoMuteChanging = true;
this.onCameraButtonClicked.emit();
try {
const publishVideo = !this.participantService.isMyVideoActive();
await this.openviduService.publishVideo(publishVideo);
@ -404,6 +408,7 @@ export class ToolbarComponent implements OnInit, OnDestroy {
this.log.e('There was an error toggling camera:', error.code, error.message);
this.actionService.openDialog('There was an error toggling camera', error?.error || error?.message);
}
this.videoMuteChanging = false;
}
/**

6
openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.ts
View File

@ -114,7 +114,7 @@ export class UserSettingsComponent implements OnInit, OnDestroy {
}
if (this.isVideoMuted) {
// Publish Webcam video
this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), true);
await this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), true);
this.isVideoMuted = false;
}
}
@ -141,10 +141,10 @@ export class UserSettingsComponent implements OnInit, OnDestroy {
}
}
toggleCam() {
async toggleCam() {
const publish = this.isVideoMuted;
this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), publish);
await this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), publish);
if (this.participantService.haveICameraAndScreenActive()) {
// Cam will not published, disable webcam with screensharing active

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

@ -261,7 +261,7 @@ export class OpenViduService {
// Disabling webcam
if (this.participantService.haveICameraAndScreenActive()) {
this.publishVideoAux(this.participantService.getMyCameraPublisher(), publish);
await this.publishVideoAux(this.participantService.getMyCameraPublisher(), publish);
this.participantService.disableWebcamStream();
this.unpublish(this.participantService.getMyCameraPublisher());
this.publishAudioAux(this.participantService.getMyScreenPublisher(), publishAudio);
@ -273,22 +273,22 @@ export class OpenViduService {
await this.connectSession(this.getWebcamSession(), this.tokenService.getWebcamToken());
}
await this.publish(this.participantService.getMyCameraPublisher());
this.publishVideoAux(this.participantService.getMyCameraPublisher(), true);
await this.publishVideoAux(this.participantService.getMyCameraPublisher(), true);
this.publishAudioAux(this.participantService.getMyScreenPublisher(), false);
this.publishAudioAux(this.participantService.getMyCameraPublisher(), hasAudio);
this.participantService.enableWebcamStream();
} else {
// Muting/unmuting webcam
this.publishVideoAux(this.participantService.getMyCameraPublisher(), publish);
await this.publishVideoAux(this.participantService.getMyCameraPublisher(), publish);
}
}
/**
* @internal
*/
private publishVideoAux(publisher: Publisher, publish: boolean): void {
private async publishVideoAux(publisher: Publisher, publish: boolean): Promise<void> {
if (!!publisher) {
publisher.publishVideo(publish, true);
await publisher.publishVideo(publish, true);
this.participantService.updateLocalParticipant();
}
}

4
openvidu-components-angular/projects/openvidu-angular/src/lib/services/virtual-background/virtual-background.service.ts
View File

@ -41,9 +41,11 @@ export class VirtualBackgroundService {
getBackgrounds(): any[] {
return this.backgrounds;
}
async applyBackground(effect: BackgroundEffect) {
if (effect.id !== this.backgroundSelected.getValue()) {
const isBackgroundSelected = !!this.backgroundSelected.getValue() && this.backgroundSelected.getValue() !== 'no_effect';
const filter = this.participantService.getMyCameraPublisher().stream.filter;
const isBackgroundSelected = !!filter && filter.type.startsWith('VB:');
let options = { token: this.tokenService.getWebcamToken(), url: '' };
if (effect.type === EffectType.IMAGE) {
options.url = effect.src;

12
openvidu-components-angular/src/app/examples/toolbar-directive/toolbar-directive.component.ts
View File

@ -20,9 +20,9 @@ export class ToolbarDirectiveComponent implements OnInit {
OPENVIDU_SECRET = 'MY_SECRET';
publishVideo = true;
publishAudio = true;
constructor(private restService: RestService, private openviduService: OpenViduService) {}
constructor(private restService: RestService, private openviduService: OpenViduService) { }
ngOnInit(): void {}
ngOnInit(): void { }
async onJoinButtonClicked() {
this.tokens = {
@ -31,13 +31,13 @@ export class ToolbarDirectiveComponent implements OnInit {
};
}
toggleVideo() {
async toggleVideo(): Promise<void> {
this.publishVideo = !this.publishVideo;
this.openviduService.publishVideo(this.publishVideo);
await this.openviduService.publishVideo(this.publishVideo);
}
toggleAudio() {
async toggleAudio(): Promise<void> {
this.publishAudio = !this.publishAudio;
this.openviduService.publishAudio(this.publishAudio);
await this.openviduService.publishAudio(this.publishAudio);
}
}

10
openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component.ts
View File

@ -22,7 +22,7 @@ export class ToolbarAdditionalButtonsDirectiveComponent {
private restService: RestService,
private openviduService: OpenViduService,
private participantService: ParticipantService
) {}
) { }
async onJoinButtonClicked() {
this.tokens = {
@ -31,13 +31,13 @@ export class ToolbarAdditionalButtonsDirectiveComponent {
};
}
toggleVideo() {
async toggleVideo() {
const publishVideo = !this.participantService.isMyVideoActive();
this.openviduService.publishVideo(publishVideo);
await this.openviduService.publishVideo(publishVideo);
}
toggleAudio() {
async toggleAudio() {
const publishAudio = !this.participantService.isMyAudioActive();
this.openviduService.publishAudio(publishAudio);
await this.openviduService.publishAudio(publishAudio);
}
}