Fixed avatar and device camera bug

Author: CSantosM

front/openvidu-call/package-lock.json

@@ -127,13 +127,13 @@ button {
 }
 
 #avatarImg {
-  height: 88%;
-  width: 88%;
+  height: 83%;
+  width: 83%;
 }
 
 #avatarContainer,
 #avatarImg {
-  border-radius: 50%;
+  border-radius: 25%;
 }
 
 #optionsContent {

front/openvidu-call/src/app/shared/components/dialog-choose-room/dialog-choose-room.component.css

@@ -45,19 +45,16 @@ <h3 id="sessionInfo">Session : {{ mySessionId }}</h3>
                   <h3 style="margin: auto;">Avatar</h3>
                 </div>
                 <div class="" fxFlex="70" fxLayoutAlign="center center">
-                  <div id="avatarContainer" (mouseover)="hover1 = true" (click)="setAvatar('video')"
-                    (mouseleave)="hover1 = false"
-                    [ngStyle]="{ backgroundColor: videoAvatar && hover1 && avatarSelected !== 'video' ? 'lightgreen' : 'white' }"
+                  <div id="avatarContainer" (click)="setAvatar('video')"
+
+
                     [style.background]="avatarSelected === 'video' ? 'lightgreen' : 'transparent'">
                     <div id="imgText" *ngIf="!videoAvatar">
                       <span>Press Avatar Button</span>
                     </div>
                     <img id="avatarImg" *ngIf="videoAvatar" [src]="videoAvatar" />
                   </div>
-                  <div id="avatarContainer" (click)="setAvatar('random')" (mouseover)="hover2 = true"
-                    (mouseleave)="hover2 = false" [ngStyle]="{
-                      backgroundColor: randomAvatar && hover2 && avatarSelected !== 'random' ? 'lightgreen' : 'white'
-                    }" [style.background]="avatarSelected === 'random' ? 'lightgreen' : 'transparent'">
+                  <div id="avatarContainer" (click)="setAvatar('random')" [style.background]="avatarSelected === 'random' ? 'lightgreen' : 'transparent'">
                     <mat-spinner id="imgText" [diameter]="70" *ngIf="!randomAvatar" color="accent"></mat-spinner>
                     <img id="avatarImg" *ngIf="randomAvatar" [src]="randomAvatar" />
                   </div>

front/openvidu-call/src/app/shared/components/dialog-choose-room/dialog-choose-room.component.html

@@ -3,9 +3,11 @@ import { FormControl, Validators } from '@angular/forms';
 import { UserModel } from '../../models/user-model';
 import { NicknameMatcher } from '../../forms-matchers/nickname';
 import { ApiService } from '../../services/api.service';
-import { OpenVidu, Publisher } from 'openvidu-browser';
+import { OpenVidu, Publisher, Device } from 'openvidu-browser';
 import { ActivatedRoute, Params } from '@angular/router';
 import { OvSettings } from '../../models/ov-settings';
+import { MatDialog } from '@angular/material/dialog';
+import { DialogErrorComponent } from '../dialog-error/dialog-error.component';
 
 interface IDevices {
   label: string;
@@ -50,10 +52,25 @@ export class DialogChooseRoomComponent implements OnInit {
   nicknameFormControl = new FormControl('', [Validators.maxLength(25), Validators.required]);
   matcher = new NicknameMatcher();
 
-  constructor(private route: ActivatedRoute, private apiSrv: ApiService) {}
+  constructor(private route: ActivatedRoute, private apiSrv: ApiService,  public dialog: MatDialog) {}
 
   ngOnInit() {
+
+
     this.OV = new OpenVidu();
+    this.OV.getDevices().then((devices: Device[]) => {
+      console.log(devices);
+      const haveCamera = devices.filter(device => device.kind === 'videoinput');
+      console.log(haveCamera);
+      if (haveCamera.length === 0) {
+        const message = 'It looks like that you do not have any cameras available on your PC. Please, check your devices and connect a webcam to start :)'
+        this.dialog.open(DialogErrorComponent, {
+          width: '450px',
+          data: { message: 'Device Error', messageError: message },
+        });
+      }
+
+    });
     this.localUsers.push(new UserModel());
     this.generateNickname();
     this.setSessionName();
@@ -243,11 +260,9 @@ export class DialogChooseRoomComponent implements OnInit {
   }
 
   private getRandomAvatar() {
-    this.apiSrv.getRandomAvatar().then((avatar: string) => {
-        this.randomAvatar = avatar;
-        this.setAvatar('random');
-      })
-      .catch((err) => console.error(err));
+    this.randomAvatar = this.apiSrv.getRandomAvatar();
+    this.avatarSelected = 'random';
+    this.setAvatar('random');
   }
 
   private initPublisher(): Promise<any> {

front/openvidu-call/src/app/shared/components/dialog-choose-room/dialog-choose-room.component.ts

@@ -45,12 +45,8 @@ export class ApiService {
     }
   }
 
-  public getRandomAvatar(): Promise<string> {
-    return new Promise((resolve, reject) => {
-      this.http.get('https://randomuser.me/api/?lego').subscribe((data: any) => {
-        resolve(data.results[0].picture.thumbnail);
-      });
-    });
+  public getRandomAvatar(): string {
+    return 'https://openvidu.io/img/logos/openvidu_globe_bg_transp_cropped.png'
   }
 
   public handlerScreenShareError(error: any) {

front/openvidu-call/src/app/shared/services/api.service.ts

@@ -9,7 +9,7 @@ import { OvSettings } from '../models/ov-settings';
   providedIn: 'root',
 })
 export class OpenViduService {
-  private URL_OV = 'https://demos.openvidu.io' + ':4443';
+  private URL_OV = 'https://' + location.hostname +  ':4443';
   private MY_SECRET = 'MY_SECRET';
   private SETTINGS_FILE_NAME = 'ov-settings.json';