Mute/unmute, stop/start camera functions

public/css/call-minimal.css

@@ -6,19 +6,21 @@
 }
 .main-view .video-view {
     margin: 0.5rem;
-    -webkit-margin-collapse: collapse;
     position: relative;
+    background: #444;
 }
 .main-view .video-view .name-bar {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
-    background: #00000044;
+    background: #00000066;
     font-size: 11px;
     text-align: right;
     padding: 3px 6px;
     color: #fff;
+    z-index: 1;
+    font-weight: bold;
 }
 #call-actions {
     justify-content: center;

resources/views/app/video/call-minimal.blade.php

@@ -63,23 +63,26 @@
                 title="Leave Call">
             <i class="fa fa-phone"></i>
         </button>
-<!--        <button v-if="myMedia.isCameraOn" class="btn btn-default bg-light border rounded-circle"
+        <button class="ml-2 btn btn-default bg-light border"
+                id="btn-stop-camera"
                 title="Stop Camera">
             <i class="fa fa-video"></i>
         </button>
-        <button v-if="!myMedia.isCameraOn" class="btn btn-secondary rounded-circle"
+        <button class="ml-2 btn btn-secondary d-none"
+                id="btn-start-camera"
                 title="Start Camera">
             <i class="fa fa-video-slash"></i>
         </button>
-        <button v-if="myMedia.isMicrophoneOn" class="btn btn-default bg-light border rounded-circle"
-                title="Stop Microphone"
-                v-on:click.prevent="myMicrophoneIsOff()">
+        <button class="ml-2 btn btn-default bg-light border"
+                id="btn-mute-audio"
+                title="Mute">
             <i class="fa fa-microphone"></i>
         </button>
-        <button v-if="!myMedia.isMicrophoneOn" class="btn btn-secondary rounded-circle"
-                title="Start Microphone">
+        <button class="ml-2 btn btn-secondary d-none"
+                id="btn-unmute-audio"
+                title="Unmute">
             <i class="fa fa-microphone-slash"></i>
-        </button>-->
+        </button>
     </div>
 
 </div>
@@ -139,6 +142,10 @@
             $selfView: null,
             $callActions: null,
             $btnHangUp: null,
+            $btnStopCamera: null,
+            $btnStartCamera: null,
+            $btnMuteAudio: null,
+            $btnUnmuteAudio: null,
 
             // methods
             init: function() {
@@ -150,6 +157,11 @@
                 this.$callActions = $('#call-actions');
                 this.$btnHangUp = $('#btn-hang-up');
 
+                this.$btnStopCamera = $('#btn-stop-camera');
+                this.$btnStartCamera = $('#btn-start-camera');
+                this.$btnMuteAudio = $('#btn-mute-audio');
+                this.$btnUnmuteAudio = $('#btn-unmute-audio');
+
                 this.registerSocket();
 
                 // event handlers
@@ -165,6 +177,31 @@
                         this.leaveRoomAsPro();
                     });
 
+                $(document)
+                    .off('click.stop-camera', '#btn-stop-camera')
+                    .on('click.stop-camera', '#btn-stop-camera', () => {
+                        this.stopCamera();
+                    });
+
+                $(document)
+                    .off('click.start-camera', '#btn-start-camera')
+                    .on('click.start-camera', '#btn-start-camera', () => {
+                        this.startCamera();
+                    });
+
+                $(document)
+                    .off('click.mute-audio', '#btn-mute-audio')
+                    .on('click.mute-audio', '#btn-mute-audio', () => {
+                        this.muteAudio();
+                    });
+
+                $(document)
+                    .off('click.unmute-audio', '#btn-unmute-audio')
+                    .on('click.unmute-audio', '#btn-unmute-audio', () => {
+                        this.unmuteAudio();
+                    });
+
+
                 this.enterRoomAsPro();
             },
 
@@ -512,6 +549,64 @@
 
             },
 
+            // mute/unmute cam/mic
+            stopCamera: async function () {
+                try {
+                    await this.myVideo.setEnabled(false);
+                    this.socketClient.send("/app/myCameraIsOff", {},
+                        JSON.stringify({sessionKey: '{{$performer->session_key}}'})
+                    );
+                    this.$btnStopCamera.addClass('d-none');
+                    this.$btnStartCamera.removeClass('d-none');
+                    // TODO log
+                } catch (e) {
+                    console.error('ALIX: could not stop camera!', e);
+                    // TODO log
+                }
+            },
+            startCamera: async function () {
+                try {
+                    await this.myVideo.setEnabled(true);
+                    this.socketClient.send("/app/myCameraIsOn", {},
+                        JSON.stringify({sessionKey: '{{$performer->session_key}}'})
+                    );
+                    this.$btnStartCamera.addClass('d-none');
+                    this.$btnStopCamera.removeClass('d-none');
+                    // TODO log
+                } catch (e) {
+                    console.error('ALIX: could not start camera!', e);
+                    // TODO log
+                }
+            },
+            muteAudio: async function () {
+                try {
+                    await this.myAudio.setEnabled(false);
+                    this.socketClient.send("/app/myMicrophoneIsOff", {},
+                        JSON.stringify({sessionKey: '{{$performer->session_key}}'})
+                    );
+                    this.$btnMuteAudio.addClass('d-none');
+                    this.$btnUnmuteAudio.removeClass('d-none');
+                    // TODO log
+                } catch (e) {
+                    console.error('ALIX: could not mute audio!', e);
+                    // TODO log
+                }
+            },
+            unmuteAudio: async function () {
+                try {
+                    await this.myAudio.setEnabled(true);
+                    this.socketClient.send("/app/myMicrophoneIsOn", {},
+                        JSON.stringify({sessionKey: '{{$performer->session_key}}'})
+                    );
+                    this.$btnUnmuteAudio.addClass('d-none');
+                    this.$btnMuteAudio.removeClass('d-none');
+                    // TODO log
+                } catch (e) {
+                    console.error('ALIX: could not unmute audio!', e);
+                    // TODO log
+                }
+            },
+
             // utils - start ============================================================== //
 
             // generic logger