mirror of https://github.com/OpenVidu/openvidu.git
openvidu-components: Removed user settings component
csantosm
parent
e3340171a0
commit
3922bb456c
File diff suppressed because it is too large
Load Diff
|
|
@ -1,162 +0,0 @@
|
||||||
<!-- Modal -->
|
|
||||||
<div class="modal">
|
|
||||||
<div class="modal-dialog modal-xl">
|
|
||||||
<div class="modal-content cardContainer">
|
|
||||||
<!-- Modal Header -->
|
|
||||||
<div class="modal-header card-header">
|
|
||||||
<div class="headerLogo">
|
|
||||||
<img id="header_img" alt="OpenVidu Logo" src="assets/images/openvidu_logo.png" />
|
|
||||||
</div>
|
|
||||||
<h3 class="headerTitle" *ngIf="sessionId">{{ sessionId }}</h3>
|
|
||||||
|
|
||||||
<button mat-mini-fab (click)="close()" class="closeButton" id="closeButton">
|
|
||||||
<mat-icon matTooltip="Close">close</mat-icon>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Modal body -->
|
|
||||||
<div class="modal-body" #bodyCard>
|
|
||||||
<div class="row align-items-center">
|
|
||||||
<div class="col-sm-6 col-md-6 col-lg-6 leftSection">
|
|
||||||
<div class="spinner-container" *ngIf="isLoading">
|
|
||||||
<mat-spinner [diameter]="50"></mat-spinner>
|
|
||||||
</div>
|
|
||||||
<div class="videoContainer" *ngIf="!isLoading">
|
|
||||||
<div *ngFor="let stream of localParticipant | streams">
|
|
||||||
<!-- Only webcam video will be shown if webcamera is available -->
|
|
||||||
<ov-video
|
|
||||||
*ngIf="(stream.type === 'CAMERA' && hasVideoDevices) || stream.type === 'SCREEN'"
|
|
||||||
[streamManager]="stream.streamManager"
|
|
||||||
[ngClass]="{ ovVideoSmall: localParticipant.streams.size > 1 && stream.type === 'CAMERA' }"
|
|
||||||
></ov-video>
|
|
||||||
<div class="cameraMessageContainer" *ngIf="stream.type === 'CAMERA' && !hasVideoDevices">
|
|
||||||
<span *ngIf="!hasVideoDevices && !hasAudioDevices">Oops! Camera and microphone are not available</span>
|
|
||||||
<span *ngIf="!hasVideoDevices && hasAudioDevices">Oops! Camera is not available</span>
|
|
||||||
<span *ngIf="hasVideoDevices && !hasAudioDevices">Oops! Microphone is not available</span>
|
|
||||||
</div>
|
|
||||||
<div id="audio-wave-container" *ngIf="stream.type === 'CAMERA'">
|
|
||||||
<ov-audio-wave [streamManager]="stream.streamManager"></ov-audio-wave>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-sm-6 col-md-6 col-lg-6 rightSection">
|
|
||||||
<!-- Devices section / Camera-->
|
|
||||||
<div fxLayout="row" fxFill id="devicesSection" *ngIf="hasVideoDevices">
|
|
||||||
<div fxLayout fxFlex>
|
|
||||||
<div class="one" fxFlex="20" fxLayoutAlign="center center">
|
|
||||||
<button
|
|
||||||
mat-mini-fab
|
|
||||||
(click)="toggleCam()"
|
|
||||||
class="deviceButton"
|
|
||||||
id="configCardCameraButton"
|
|
||||||
[class.warn-btn]="isVideoMuted"
|
|
||||||
>
|
|
||||||
<mat-icon *ngIf="!isVideoMuted" matTooltip="Camera Enabled">videocam</mat-icon>
|
|
||||||
<mat-icon *ngIf="isVideoMuted" matTooltip="Camera Disabled">videocam_off</mat-icon>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="two" fxFlex="80" fxLayoutAlign="center center">
|
|
||||||
<mat-form-field class="alternate-theme">
|
|
||||||
<mat-label>Camera Options</mat-label>
|
|
||||||
<mat-select [disabled]="isVideoMuted" (selectionChange)="onCameraSelected($event)">
|
|
||||||
<mat-option *ngFor="let camera of cameras" [value]="camera.device">
|
|
||||||
{{ camera.label }}
|
|
||||||
</mat-option>
|
|
||||||
</mat-select>
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Devices section / Microphone-->
|
|
||||||
<div fxLayout="row" fxFill id="devicesSection" *ngIf="hasAudioDevices">
|
|
||||||
<div fxLayout fxFlex>
|
|
||||||
<div class="one" fxFlex="20" fxLayoutAlign="center center">
|
|
||||||
<button
|
|
||||||
mat-mini-fab
|
|
||||||
(click)="toggleMic()"
|
|
||||||
class="deviceButton"
|
|
||||||
id="configCardMicrophoneButton"
|
|
||||||
[class.warn-btn]="isAudioMuted"
|
|
||||||
>
|
|
||||||
<mat-icon *ngIf="!isAudioMuted" matTooltip="Microphone Enabled">mic</mat-icon>
|
|
||||||
<mat-icon *ngIf="isAudioMuted" matTooltip="Microphone Disabled">mic_off</mat-icon>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="two" fxFlex="80" fxLayoutAlign="center center">
|
|
||||||
<mat-form-field class="alternate-theme">
|
|
||||||
<mat-label>Microphone Options</mat-label>
|
|
||||||
<mat-select [disabled]="isAudioMuted" (selectionChange)="onMicrophoneSelected($event)">
|
|
||||||
<mat-option *ngFor="let microphone of microphones" [value]="microphone.device">
|
|
||||||
{{ microphone.label }}
|
|
||||||
</mat-option>
|
|
||||||
</mat-select>
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Devices section / ScreenShare-->
|
|
||||||
<div fxLayout="row" fxFill id="devicesSection">
|
|
||||||
<div fxLayout fxFlex>
|
|
||||||
<div class="one" fxFlex="20" fxLayoutAlign="center center">
|
|
||||||
<button
|
|
||||||
mat-mini-fab
|
|
||||||
(click)="toggleScreenShare()"
|
|
||||||
class="deviceButton"
|
|
||||||
id="configCardScreenButton"
|
|
||||||
[class.active-btn]="screenShareEnabled"
|
|
||||||
>
|
|
||||||
<mat-icon *ngIf="!screenShareEnabled" matTooltip="Enable screen share">screen_share</mat-icon>
|
|
||||||
<mat-icon *ngIf="screenShareEnabled" matTooltip="Disable screen share">screen_share</mat-icon>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="two" fxFlex="80" fxLayoutAlign="center center">
|
|
||||||
<mat-form-field class="alternate-theme">
|
|
||||||
<input matInput disabled placeholder="Screen" [ngModel]="screenShareEnabled ? 'Screen' : 'None'" />
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Devices section / Nickname-->
|
|
||||||
<div fxLayout="row" fxFill id="devicesSection">
|
|
||||||
<div fxLayout fxFlex>
|
|
||||||
<div class="one" fxFlex="20" fxLayoutAlign="center center">
|
|
||||||
<button mat-mini-fab class="deviceButton" disabled>
|
|
||||||
<mat-icon matTooltip="Nickname">person</mat-icon>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="two" fxFlex="80" fxLayoutAlign="center center">
|
|
||||||
<form id="nicknameForm" class="alternate-theme">
|
|
||||||
<mat-form-field>
|
|
||||||
<input
|
|
||||||
matInput
|
|
||||||
placeholder="Nickname"
|
|
||||||
[formControl]="nicknameFormControl"
|
|
||||||
[errorStateMatcher]="matcher"
|
|
||||||
(keypress)="eventKeyPress($event)"
|
|
||||||
autocomplete="off"
|
|
||||||
/>
|
|
||||||
<mat-error *ngIf="nicknameFormControl.hasError('required')">
|
|
||||||
Nickname is <strong>required</strong>
|
|
||||||
</mat-error>
|
|
||||||
<mat-error *ngIf="nicknameFormControl.hasError('maxlength')">
|
|
||||||
Nickname is <strong>too long!</strong>
|
|
||||||
</mat-error>
|
|
||||||
</mat-form-field>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Modal footer -->
|
|
||||||
<div class="modal-footer" style="justify-content: center">
|
|
||||||
<button mat-flat-button (click)="joinSession()" form="nicknameForm" id="joinButton">JOIN</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
import { ActionService } from '../../services/action/action.service';
|
|
||||||
import { ActionServiceMock } from '../../services/action/action.service.mock';
|
|
||||||
import { DeviceService } from '../../services/device/device.service';
|
|
||||||
|
|
||||||
import { DeviceServiceMock } from '../../services/device/device.service.mock';
|
|
||||||
import { LocalUserService } from '../../services/local-user/local-user.service';
|
|
||||||
import { LocalUserServiceMock } from '../../services/local-user/local-user.service.mock';
|
|
||||||
import { LoggerService } from '../../services/logger/logger.service';
|
|
||||||
import { LoggerServiceMock } from '../../services/logger/logger.service.mock';
|
|
||||||
import { StorageService } from '../../services/storage/storage.service';
|
|
||||||
import { WebrtcService } from '../../services/webrtc/webrtc.service';
|
|
||||||
import { StorageServiceMock } from '../../services/storage/storage.service.mock';
|
|
||||||
|
|
||||||
import { WebrtcServiceMock } from '../../services/webrtc/webrtc.service.mock';
|
|
||||||
|
|
||||||
import { UserSettingsComponent } from './user-settings.component';
|
|
||||||
|
|
||||||
describe('UserSettingsComponent', () => {
|
|
||||||
let component: UserSettingsComponent;
|
|
||||||
let fixture: ComponentFixture<UserSettingsComponent>;
|
|
||||||
|
|
||||||
beforeEach(async () => {
|
|
||||||
await TestBed.configureTestingModule({
|
|
||||||
declarations: [ UserSettingsComponent ],
|
|
||||||
providers: [
|
|
||||||
{ provide: LoggerService, useClass: LoggerServiceMock },
|
|
||||||
{ provide: ActionService, useClass: ActionServiceMock },
|
|
||||||
{ provide: LocalUserService, useClass: LocalUserServiceMock },
|
|
||||||
{ provide: WebrtcService, useClass: WebrtcServiceMock },
|
|
||||||
{ provide: DeviceService, useClass: DeviceServiceMock },
|
|
||||||
{ provide: StorageService, useClass: StorageServiceMock }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
});
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
fixture = TestBed.createComponent(UserSettingsComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,321 +0,0 @@
|
||||||
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
|
|
||||||
import { FormControl, Validators } from '@angular/forms';
|
|
||||||
import { Subscription } from 'rxjs';
|
|
||||||
|
|
||||||
import { OpenViduErrorName } from 'openvidu-browser/lib/OpenViduInternal/Enums/OpenViduError';
|
|
||||||
import { Publisher, PublisherProperties } from 'openvidu-browser';
|
|
||||||
|
|
||||||
import { ILogger } from '../../models/logger.model';
|
|
||||||
import { CustomDevice } from '../../models/device.model';
|
|
||||||
import { ScreenType, VideoType } from '../../models/video-type.model';
|
|
||||||
|
|
||||||
import { NicknameMatcher } from '../../matchers/nickname.matcher';
|
|
||||||
|
|
||||||
import { DeviceService } from '../../services/device/device.service';
|
|
||||||
import { LoggerService } from '../../services/logger/logger.service';
|
|
||||||
import { StorageService } from '../../services/storage/storage.service';
|
|
||||||
import { OpenViduService } from '../../services/openvidu/openvidu.service';
|
|
||||||
import { ActionService } from '../../services/action/action.service';
|
|
||||||
import { ParticipantService } from '../../services/participant/participant.service';
|
|
||||||
import { ParticipantAbstractModel } from '../../models/participant.model';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @internal
|
|
||||||
*/
|
|
||||||
@Component({
|
|
||||||
selector: 'ov-user-settings',
|
|
||||||
templateUrl: './user-settings.component.html',
|
|
||||||
styleUrls: ['./user-settings.component.css'],
|
|
||||||
// changeDetection: ChangeDetectionStrategy.OnPush
|
|
||||||
})
|
|
||||||
export class UserSettingsComponent implements OnInit, OnDestroy {
|
|
||||||
@ViewChild('bodyCard') bodyCard: ElementRef;
|
|
||||||
|
|
||||||
@Input() sessionId: string;
|
|
||||||
@Output() onJoinClicked = new EventEmitter<any>();
|
|
||||||
@Output() onCloseClicked = new EventEmitter<any>();
|
|
||||||
|
|
||||||
cameras: CustomDevice[];
|
|
||||||
microphones: CustomDevice[];
|
|
||||||
cameraSelected: CustomDevice;
|
|
||||||
microphoneSelected: CustomDevice;
|
|
||||||
isVideoMuted: boolean;
|
|
||||||
isAudioMuted: boolean;
|
|
||||||
screenShareEnabled: boolean;
|
|
||||||
localParticipant: ParticipantAbstractModel;
|
|
||||||
columns: number;
|
|
||||||
|
|
||||||
nicknameFormControl = new FormControl('', [Validators.maxLength(20), Validators.required]);
|
|
||||||
matcher = new NicknameMatcher();
|
|
||||||
hasVideoDevices: boolean;
|
|
||||||
hasAudioDevices: boolean;
|
|
||||||
isLoading = true;
|
|
||||||
private log: ILogger;
|
|
||||||
private localParticipantSubscription: Subscription;
|
|
||||||
private screenShareStateSubscription: Subscription;
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
private actionService: ActionService,
|
|
||||||
private deviceSrv: DeviceService,
|
|
||||||
private loggerSrv: LoggerService,
|
|
||||||
private openviduService: OpenViduService,
|
|
||||||
private participantService: ParticipantService,
|
|
||||||
private storageSrv: StorageService
|
|
||||||
) {
|
|
||||||
this.log = this.loggerSrv.get('UserSettingsComponent');
|
|
||||||
}
|
|
||||||
|
|
||||||
@HostListener('window:beforeunload')
|
|
||||||
beforeunloadHandler() {
|
|
||||||
this.close();
|
|
||||||
}
|
|
||||||
|
|
||||||
async ngOnInit() {
|
|
||||||
await this.deviceSrv.initializeDevices();
|
|
||||||
|
|
||||||
this.subscribeToLocalParticipantEvents();
|
|
||||||
this.openviduService.initialize();
|
|
||||||
const nickname = this.storageSrv.getNickname() || this.generateRandomNickname();
|
|
||||||
this.nicknameFormControl.setValue(nickname);
|
|
||||||
this.columns = window.innerWidth > 900 ? 2 : 1;
|
|
||||||
this.setDevicesInfo();
|
|
||||||
if (this.hasAudioDevices || this.hasVideoDevices) {
|
|
||||||
await this.initwebcamPublisher();
|
|
||||||
}
|
|
||||||
this.isLoading = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnDestroy() {
|
|
||||||
if (this.localParticipantSubscription) {
|
|
||||||
this.localParticipantSubscription.unsubscribe();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.screenShareStateSubscription) {
|
|
||||||
this.screenShareStateSubscription.unsubscribe();
|
|
||||||
}
|
|
||||||
this.deviceSrv.clear();
|
|
||||||
}
|
|
||||||
|
|
||||||
async onCameraSelected(event: any) {
|
|
||||||
const videoSource = event?.value;
|
|
||||||
// Is New deviceId different from the old one?
|
|
||||||
if (this.deviceSrv.needUpdateVideoTrack(videoSource)) {
|
|
||||||
const mirror = this.deviceSrv.cameraNeedsMirror(videoSource);
|
|
||||||
//TODO: Uncomment this when replaceTrack issue is fixed
|
|
||||||
// const pp: PublisherProperties = { videoSource, audioSource: false, mirror };
|
|
||||||
// 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.openviduService.republishTrack(pp);
|
|
||||||
|
|
||||||
|
|
||||||
this.cameraSelected = videoSource;
|
|
||||||
this.deviceSrv.setCameraSelected(this.cameraSelected);
|
|
||||||
}
|
|
||||||
if (this.isVideoMuted) {
|
|
||||||
// Publish Webcam video
|
|
||||||
await this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), true);
|
|
||||||
this.isVideoMuted = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async onMicrophoneSelected(event: any) {
|
|
||||||
const audioSource = event?.value;
|
|
||||||
// Is New deviceId different than older?
|
|
||||||
if (this.deviceSrv.needUpdateAudioTrack(audioSource)) {
|
|
||||||
//TODO: Uncomment this when replaceTrack issue is fixed
|
|
||||||
// const pp: PublisherProperties = { audioSource, videoSource: false };
|
|
||||||
// await this.openviduService.replaceTrack(VideoType.CAMERA, pp);
|
|
||||||
// TODO: Remove this when replaceTrack issue is fixed
|
|
||||||
const mirror = this.deviceSrv.cameraNeedsMirror(this.cameraSelected.device);
|
|
||||||
const pp: PublisherProperties = { videoSource: this.cameraSelected.device, audioSource, mirror };
|
|
||||||
await this.openviduService.republishTrack(pp);
|
|
||||||
|
|
||||||
this.microphoneSelected = audioSource;
|
|
||||||
this.deviceSrv.setMicSelected(this.microphoneSelected);
|
|
||||||
}
|
|
||||||
if (this.isAudioMuted) {
|
|
||||||
// Enable microphone
|
|
||||||
this.openviduService.publishAudio(this.participantService.getMyCameraPublisher(), true);
|
|
||||||
this.isAudioMuted = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async toggleCam() {
|
|
||||||
|
|
||||||
const publish = this.isVideoMuted;
|
|
||||||
await this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), publish);
|
|
||||||
|
|
||||||
if (this.participantService.haveICameraAndScreenActive()) {
|
|
||||||
// Cam will not published, disable webcam with screensharing active
|
|
||||||
this.participantService.disableWebcamUser();
|
|
||||||
this.openviduService.publishAudio(this.participantService.getMyScreenPublisher(), publish);
|
|
||||||
} else if (this.participantService.isOnlyMyScreenActive()) {
|
|
||||||
// Cam will be published, enable webcam
|
|
||||||
this.participantService.enableWebcamUser();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.isVideoMuted = !this.isVideoMuted;
|
|
||||||
this.storageSrv.setVideoMuted(this.isVideoMuted);
|
|
||||||
}
|
|
||||||
|
|
||||||
async toggleScreenShare() {
|
|
||||||
// Disabling screenShare
|
|
||||||
if (this.participantService.haveICameraAndScreenActive()) {
|
|
||||||
this.participantService.disableScreenUser();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Enabling screenShare
|
|
||||||
if (this.participantService.isOnlyMyCameraActive()) {
|
|
||||||
const willThereBeWebcam = this.participantService.isMyCameraActive() && this.participantService.hasCameraVideoActive();
|
|
||||||
const hasAudio = willThereBeWebcam ? false : this.hasAudioDevices && this.isAudioMuted;
|
|
||||||
const properties: PublisherProperties = {
|
|
||||||
videoSource: ScreenType.SCREEN,
|
|
||||||
audioSource: this.hasAudioDevices ? undefined : null,
|
|
||||||
publishVideo: true,
|
|
||||||
publishAudio: hasAudio,
|
|
||||||
mirror: false
|
|
||||||
};
|
|
||||||
const screenPublisher = await this.openviduService.initPublisher(undefined, properties);
|
|
||||||
|
|
||||||
screenPublisher.on('accessAllowed', (event) => {
|
|
||||||
screenPublisher.stream
|
|
||||||
.getMediaStream()
|
|
||||||
.getVideoTracks()[0]
|
|
||||||
.addEventListener('ended', () => {
|
|
||||||
this.log.d('Clicked native stop button. Stopping screen sharing');
|
|
||||||
this.toggleScreenShare();
|
|
||||||
});
|
|
||||||
this.participantService.activeMyScreenShare(screenPublisher);
|
|
||||||
if (!this.participantService.hasCameraVideoActive()) {
|
|
||||||
this.participantService.disableWebcamUser();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
screenPublisher.on('accessDenied', (error: any) => {
|
|
||||||
if (error && error.name === 'SCREEN_SHARING_NOT_SUPPORTED') {
|
|
||||||
this.actionService.openDialog('Error sharing screen', 'Your browser does not support screen sharing');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Disabling screnShare and enabling webcam
|
|
||||||
this.participantService.enableWebcamUser();
|
|
||||||
this.participantService.disableScreenUser();
|
|
||||||
}
|
|
||||||
|
|
||||||
toggleMic() {
|
|
||||||
const publish = this.isAudioMuted;
|
|
||||||
this.openviduService.publishAudio(this.participantService.getMyCameraPublisher(), publish);
|
|
||||||
this.isAudioMuted = !this.isAudioMuted;
|
|
||||||
this.storageSrv.setAudioMuted(this.isAudioMuted);
|
|
||||||
}
|
|
||||||
|
|
||||||
eventKeyPress(event) {
|
|
||||||
if (event && event.keyCode === 13 && this.nicknameFormControl.valid) {
|
|
||||||
this.joinSession();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onResize(event) {
|
|
||||||
this.columns = event.target.innerWidth > 900 ? 2 : 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
joinSession() {
|
|
||||||
if (this.nicknameFormControl.valid) {
|
|
||||||
const nickname = this.nicknameFormControl.value;
|
|
||||||
this.participantService.setMyNickname(nickname);
|
|
||||||
this.storageSrv.setNickname(nickname);
|
|
||||||
return this.onJoinClicked.emit();
|
|
||||||
}
|
|
||||||
this.scrollToBottom();
|
|
||||||
}
|
|
||||||
|
|
||||||
close() {
|
|
||||||
this.onCloseClicked.emit();
|
|
||||||
}
|
|
||||||
|
|
||||||
private setDevicesInfo() {
|
|
||||||
this.hasVideoDevices = this.deviceSrv.hasVideoDeviceAvailable();
|
|
||||||
this.hasAudioDevices = this.deviceSrv.hasAudioDeviceAvailable();
|
|
||||||
this.microphones = this.deviceSrv.getMicrophones();
|
|
||||||
this.cameras = this.deviceSrv.getCameras();
|
|
||||||
this.cameraSelected = this.deviceSrv.getCameraSelected();
|
|
||||||
this.microphoneSelected = this.deviceSrv.getMicrophoneSelected();
|
|
||||||
|
|
||||||
this.isVideoMuted = this.deviceSrv.isVideoMuted();
|
|
||||||
this.isAudioMuted = this.deviceSrv.isAudioMuted();
|
|
||||||
}
|
|
||||||
|
|
||||||
private scrollToBottom(): void {
|
|
||||||
try {
|
|
||||||
this.bodyCard.nativeElement.scrollTop = this.bodyCard.nativeElement.scrollHeight;
|
|
||||||
} catch (err) {}
|
|
||||||
}
|
|
||||||
|
|
||||||
private subscribeToLocalParticipantEvents() {
|
|
||||||
this.localParticipantSubscription = this.participantService.localParticipantObs.subscribe((p) => {
|
|
||||||
this.localParticipant = p;
|
|
||||||
this.screenShareEnabled = p.isScreenActive();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
private async initwebcamPublisher() {
|
|
||||||
const publisher = await this.openviduService.initDefaultPublisher(undefined);
|
|
||||||
if (publisher) {
|
|
||||||
// this.handlePublisherSuccess(publisher);
|
|
||||||
this.handlePublisherError(publisher);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//? After test in Chrome and Firefox, the devices always have labels.
|
|
||||||
//? It's not longer needed
|
|
||||||
// private handlePublisherSuccess(publisher: Publisher) {
|
|
||||||
// publisher.once('accessAllowed', async () => {
|
|
||||||
// if (this.deviceSrv.areEmptyLabels()) {
|
|
||||||
// await this.deviceSrv.forceUpdate();
|
|
||||||
// if (this.hasAudioDevices) {
|
|
||||||
// const audioLabel = publisher?.stream?.getMediaStream()?.getAudioTracks()[0]?.label;
|
|
||||||
// this.deviceSrv.setMicSelected(audioLabel);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// if (this.hasVideoDevices) {
|
|
||||||
// const videoLabel = publisher?.stream?.getMediaStream()?.getVideoTracks()[0]?.label;
|
|
||||||
// this.deviceSrv.setCameraSelected(videoLabel);
|
|
||||||
// }
|
|
||||||
// this.setDevicesInfo();
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
|
|
||||||
private handlePublisherError(publisher: Publisher) {
|
|
||||||
publisher.once('accessDenied', (e: any) => {
|
|
||||||
let message: string;
|
|
||||||
if (e.name === OpenViduErrorName.DEVICE_ALREADY_IN_USE) {
|
|
||||||
this.log.w('Video device already in use. Disabling video device...');
|
|
||||||
// Allow access to the room with only mic if camera device is already in use
|
|
||||||
this.hasVideoDevices = false;
|
|
||||||
this.deviceSrv.disableVideoDevices();
|
|
||||||
return this.initwebcamPublisher();
|
|
||||||
}
|
|
||||||
if (e.name === OpenViduErrorName.DEVICE_ACCESS_DENIED) {
|
|
||||||
message = 'Access to media devices was not allowed.';
|
|
||||||
this.hasVideoDevices = false;
|
|
||||||
this.hasAudioDevices = false;
|
|
||||||
this.deviceSrv.disableVideoDevices();
|
|
||||||
this.deviceSrv.disableAudioDevices();
|
|
||||||
return this.initwebcamPublisher();
|
|
||||||
} else if (e.name === OpenViduErrorName.NO_INPUT_SOURCE_SET) {
|
|
||||||
message = 'No video or audio devices have been found. Please, connect at least one.';
|
|
||||||
}
|
|
||||||
this.actionService.openDialog(e.name.replace(/_/g, ' '), message, true);
|
|
||||||
this.log.e(e.message);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
private generateRandomNickname(): string {
|
|
||||||
return 'OpenVidu_User' + Math.floor(Math.random() * 100);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -27,7 +27,6 @@ import { CommonModule } from '@angular/common';
|
||||||
import { ModuleWithProviders, NgModule } from '@angular/core';
|
import { ModuleWithProviders, NgModule } from '@angular/core';
|
||||||
import { HttpClientModule } from '@angular/common/http';
|
import { HttpClientModule } from '@angular/common/http';
|
||||||
|
|
||||||
// import { UserSettingsComponent } from './components/user-settings/user-settings.component';
|
|
||||||
import { ToolbarComponent } from './components/toolbar/toolbar.component';
|
import { ToolbarComponent } from './components/toolbar/toolbar.component';
|
||||||
import { VideoComponent } from './components/video/video.component';
|
import { VideoComponent } from './components/video/video.component';
|
||||||
import { ChatPanelComponent } from './components/panel/chat-panel/chat-panel.component';
|
import { ChatPanelComponent } from './components/panel/chat-panel/chat-panel.component';
|
||||||
|
|
@ -70,7 +69,6 @@ import { RecordingActivityComponent } from './components/panel/activities-panel/
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
// UserSettingsComponent,
|
|
||||||
VideoComponent,
|
VideoComponent,
|
||||||
ToolbarComponent,
|
ToolbarComponent,
|
||||||
ChatPanelComponent,
|
ChatPanelComponent,
|
||||||
|
|
@ -140,7 +138,6 @@ import { RecordingActivityComponent } from './components/panel/activities-panel/
|
||||||
],
|
],
|
||||||
exports: [
|
exports: [
|
||||||
VideoconferenceComponent,
|
VideoconferenceComponent,
|
||||||
// UserSettingsComponent,
|
|
||||||
ToolbarComponent,
|
ToolbarComponent,
|
||||||
PanelComponent,
|
PanelComponent,
|
||||||
ParticipantsPanelComponent,
|
ParticipantsPanelComponent,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue