Remote device status indicator in thumb

public/css/meeting.css

@@ -161,11 +161,15 @@ h1 {
     font-weight: bold;
     text-align: center;
 }
-.main-view .thumbs .thumb-view>i.muted {
+.main-view .thumbs .thumb-view>.media-status-indicator {
     position: absolute;
     z-index: 1;
     right: 3px;
     top: 3px;
+    display: flex;
+    justify-content: end;
+}
+.main-view .thumbs .thumb-view i.muted {
     font-size: 12px;
     color: #fff;
     background: #333;

resources/views/app/video/call-agora-v2.blade.php

@@ -70,9 +70,14 @@
                          :data-audio="myMedia && myMedia.isMicrophoneOn ? 'on' : 'off'"
                          v-on:click.prevent="showInCenterView(true, myMediaServiceIdentifier, 'You', 'PRO')"
                          class="remote-view thumb-view c-pointer">
-                        <i v-show="!myMedia || !myMedia.isMicrophoneOn"
-                           class="fa fa-microphone-slash muted"
-                           :class="!myMedia || !myMedia.isMicrophoneAcquired ? 'text-danger' : ''"></i>
+                        <div class="media-status-indicator">
+                            <i v-show="!myMedia || !myMedia.isCameraOn"
+                               class="fa fa-video-slash muted ml-1"
+                               :class="!myMedia || !myMedia.isCameraAcquired ? 'text-danger' : ''"></i>
+                            <i v-show="!myMedia || !myMedia.isMicrophoneOn"
+                               class="fa fa-microphone-slash muted ml-1"
+                               :class="!myMedia || !myMedia.isMicrophoneAcquired ? 'text-danger' : ''"></i>
+                        </div>
                     </div>
                     <div v-for="participant in otherParticipants"
                          v-if="mainViewParticipant.uid !== (+participant.mediaServiceIdentifier)"
@@ -84,9 +89,14 @@
                          :data-audio="participant.media && participant.media.isMicrophoneOn ? 'on' : 'off'"
                          v-on:click.prevent="showInCenterView(false, participant.mediaServiceIdentifier, participant.displayName, participant.participantType)"
                          class="remote-view thumb-view c-pointer">
-                        <i v-show="!participant.media || !participant.media.isMicrophoneOn"
-                           class="fa fa-microphone-slash muted"
-                           :class="!participant.media || !participant.media.isMicrophoneAcquired ? 'text-danger' : ''"></i>
+                        <div class="media-status-indicator">
+                            <i v-show="!participant.media || !participant.media.isCameraOn"
+                               class="fa fa-video-slash muted ml-1"
+                               :class="!participant.media || !participant.media.isCameraAcquired ? 'text-danger' : ''"></i>
+                            <i v-show="!participant.media || !participant.media.isMicrophoneOn"
+                               class="fa fa-microphone-slash muted ml-1"
+                               :class="!participant.media || !participant.media.isMicrophoneAcquired ? 'text-danger' : ''"></i>
+                        </div>
                     </div>
                 </div>
                 <div class="call-actions d-flex align-items-center">
@@ -411,7 +421,7 @@
 
                             if (!this.myMicrophone && !this.myCamera) {
                                 alert('Do you have camera/mic? Unable to hear or see you.');
-                                return;
+                                // return; // allow to proceed without any device!
                             }
 
                             await _initMediaServiceEvents.call(this);
@@ -431,9 +441,12 @@
                                 this.myMediaServiceToken,
                                 +this.myMediaServiceIdentifier
                             );
-                            await this.mediaServiceClient.publish(      // publish audio/video
-                                [this.myMicrophone, this.myCamera].filter(Boolean)
-                            );
+
+                            if(this.myMicrophone || this.myCamera) {
+                                await this.mediaServiceClient.publish(      // publish audio/video
+                                    [this.myMicrophone, this.myCamera].filter(Boolean)
+                                );
+                            }
 
                             // notify others about my camera status
                             if(this.myCamera) {