Detailed logging [wip]

public/css/call-minimal.css

@@ -5,7 +5,7 @@
 
 }
 .main-view .video-view {
-    margin: 0.5rem;
+    margin: 0.25rem;
     position: relative;
     background: #444;
 }

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

@@ -150,6 +150,9 @@
             // methods
             init: function() {
 
+                // to distinguish between reloads
+                this.log('page refreshed ----------------------------------');
+
                 // cache elements to avoid running selectors everytime
                 this.$btnStartVideo = $('#btn-start-video');
                 this.$videoContainer = $('#video-container');
@@ -210,7 +213,6 @@
                 let socket = new SockJS(this.backendWsURL);
                 this.socketClient = Stomp.over(socket);
                 this.socketClient.connect({}, (frame) => {
-                    console.log('Connected: ' + frame);
                     // this.initSocketListeners();
                     this.socketClient.send("/app/register", {},
                         JSON.stringify({
@@ -271,7 +273,7 @@
                 // acquire devices
                 this.attemptToAcquireMicrophone(() => {
                     this.attemptToAcquireCamera(() => {
-                        console.log('ALIX: Hurrah! Mic and camera both acquired :)');
+                        this.log('Hurrah! Mic and camera both acquired :)', 'log');
 
                         // go to video UI
                         this.$btnStartVideo.removeClass('d-block').addClass('d-none');
@@ -300,7 +302,7 @@
 
             attemptToAcquireMicrophone: function(_done) {
                 AgoraRTC.onMicrophoneChanged = (_info) => {
-                    console.log("ALIX: microphone changed!", _info.state, _info.device);
+                    this.log("microphone changed! - " + JSON.stringify(_info.state), 'log');
                     if(_info.state === 'ACTIVE') {
 
                         if(!this.myAudio || !this.meetingData.myMedia.isMicrophoneAcquired) {
@@ -309,9 +311,7 @@
 
                         // reactive acquisition (because user later granted access)
                         this.acquireMicrophone().then(() => {
-                            console.log('ALIX: microphone acquisition attempt completed');
-                            console.log('ALIX: (reactive) isMicrophoneAcquired = ', this.meetingData.myMedia.isMicrophoneAcquired);
-                            console.log('ALIX: (reactive) isMicrophoneOn = ', this.meetingData.myMedia.isMicrophoneOn);
+                            this.log('microphone acquisition attempt completed', 'log');
 
                             // if all good, allow to proceed
                             if(this.myAudio && this.meetingData.myMedia.isMicrophoneAcquired) {
@@ -323,9 +323,7 @@
 
                 // proactive acquisition (already allowed OR user clicked "Allow" when prompted
                 this.acquireMicrophone().then(() => {
-                    console.log('ALIX: microphone acquisition attempt completed');
-                    console.log('ALIX: (proactive) isMicrophoneAcquired = ', this.meetingData.myMedia.isMicrophoneAcquired);
-                    console.log('ALIX: (proactive) isMicrophoneOn = ', this.meetingData.myMedia.isMicrophoneOn);
+                    this.log('microphone acquisition attempt completed', 'log');
 
                     // if all good, allow to proceed
                     if(this.myAudio && this.meetingData.myMedia.isMicrophoneAcquired) {
@@ -338,7 +336,7 @@
 
                 // if already acquired, ignore
                 if(this.myAudio && this.meetingData.myMedia.isMicrophoneAcquired) {
-                    console.log("ALIX: Skipping microphone acquisition..")
+                    // Skipping microphone acquisition..
                     return;
                 }
 
@@ -347,24 +345,21 @@
                 try {
                     this.myAudio = await AgoraRTC.createMicrophoneAudioTrack();
 
-                    console.log('ALIX: acquired microphone :)');
                     this.meetingData.myMedia.isMicrophoneAcquired = true;
-                    // TODO: log
+                    this.log('acquired microphone :)');
                     // TODO: notify others via WS
 
                     this.myAudio.setEnabled(true);
                     this.myAudio.setVolume(1000); // 1000 is the max allowed value
                     this.meetingData.myMedia.isMicrophoneOn = true;
-                    console.log('ALIX: microphone is ON and not on mute :)');
-                    // TODO: log
+                    this.log('microphone is ON and not on mute :)');
                     // TODO: notify others via WS
 
                 } catch (e) {
-                    console.error('ALIX: could not acquire microphone');
+                    this.log('could not acquire microphone', 'error');
 
                     this.meetingData.myMedia.isMicrophoneAcquired = false;
                     this.meetingData.myMedia.isMicrophoneOn = false;
-                    // TODO: log
                     // TODO: notify others via WS
 
                     this.$btnStartVideo.removeClass('d-block').addClass('d-none');
@@ -375,7 +370,7 @@
 
             attemptToAcquireCamera: function(_done) {
                 AgoraRTC.onCameraChanged = (_info) => {
-                    console.log("ALIX: camera changed!", _info.state, _info.device);
+                    this.log("camera changed! - " + JSON.stringify(_info));
                     if(_info.state === 'ACTIVE') {
 
                         if(!this.myVideo || !this.meetingData.myMedia.isCameraAcquired) {
@@ -384,9 +379,7 @@
 
                         // reactive acquisition (because user later granted access)
                         this.acquireCamera().then(() => {
-                            console.log('ALIX: camera acquisition attempt completed');
-                            console.log('ALIX: (reactive) isCameraAcquired = ', this.meetingData.myMedia.isCameraAcquired);
-                            console.log('ALIX: (reactive) isCameraOn = ', this.meetingData.myMedia.isCameraOn);
+                            this.log('camera acquisition attempt completed');
 
                             // if all good, allow to proceed
                             if(this.myVideo && this.meetingData.myMedia.isCameraAcquired) {
@@ -398,9 +391,7 @@
 
                 // proactive acquisition (already allowed OR user clicked "Allow" when prompted
                 this.acquireCamera().then(() => {
-                    console.log('ALIX: camera acquisition attempt completed');
-                    console.log('ALIX: (proactive) isCameraAcquired = ', this.meetingData.myMedia.isCameraAcquired);
-                    console.log('ALIX: (proactive) isCameraOn = ', this.meetingData.myMedia.isCameraOn);
+                    this.log('camera acquisition attempt completed');
 
                     // if all good, allow to proceed
                     if(this.myVideo && this.meetingData.myMedia.isCameraAcquired) {
@@ -413,7 +404,7 @@
 
                 // if already acquired, ignore
                 if(this.myVideo && this.meetingData.myMedia.isCameraAcquired) {
-                    console.log("ALIX: Skipping camera acquisition..")
+                    // Skipping camera acquisition
                     return;
                 }
 
@@ -424,23 +415,20 @@
                         optimizationMode: "motion"
                     });
 
-                    console.log('ALIX: acquired camera :)');
                     this.meetingData.myMedia.isCameraAcquired = true;
-                    // TODO: log
+                    this.log('acquired camera :)');
                     // TODO: notify others via WS
 
                     this.myVideo.setEnabled(true);
                     this.meetingData.myMedia.isCameraOn = true;
-                    console.log('ALIX: camera is ON :)');
-                    // TODO: log
+                    this.log('camera is ON :)');
                     // TODO: notify others via WS
 
                 } catch (e) {
-                    console.error('ALIX: could not acquire camera');
+                    this.log('could not acquire camera', 'error');
 
                     this.meetingData.myMedia.isCameraAcquired = false;
                     this.meetingData.myMedia.isCameraOn = false;
-                    // TODO: log
                     // TODO: notify others via WS
 
                     this.$btnStartVideo.removeClass('d-block').addClass('d-none');
@@ -471,7 +459,7 @@
                     // TODO log
                 });
                 this.mediaServiceClient.on('user-published', async (user, mediaType) => {
-                    console.log('ALIX user-published', user);
+                    this.log('user-published - ' + user.uid);
 
                     // subscribe to the stream
                     try {
@@ -510,8 +498,7 @@
                         // TODO log
                     }
                     catch (e) {
-                        console.error('ALIX: could not subscribe to ' + mediaType + ' from ', user, e);
-                        // TODO log
+                        this.log('could not subscribe to ' + mediaType + ' from ' + user.uid + ' - ' + e.toString(), 'error');
                     }
                 });
             },
@@ -530,19 +517,21 @@
                             this.meetingData.myMediaServiceToken,
                             +this.meetingData.myMediaServiceIdentifier
                         );
+
+                        this.log('Joined agora channel :)');
                     }
                     catch (e) {
-                        console.error('ALIX: could not join the room!', e);
-                        // TODO log
+                        this.log('could not join the room! - ' + e.toString(), 'error');
                     }
 
                     try {
                         // publish
                         await this.mediaServiceClient.publish([this.myAudio, this.myVideo]);
+
+                        this.log('Started publishing own audio and video to channel :)');
                     }
                     catch (e) {
-                        console.error('ALIX: could not publish media to media service!', e);
-                        // TODO log
+                        this.log('could not publish media to media service! - ' + e.toString(), 'error');
                     }
 
                 });
@@ -560,8 +549,7 @@
                     this.$btnStartCamera.removeClass('d-none');
                     // TODO log
                 } catch (e) {
-                    console.error('ALIX: could not stop camera!', e);
-                    // TODO log
+                    this.log('could not stop camera! - ' + e.toString(), 'error');
                 }
             },
             startCamera: async function () {
@@ -574,8 +562,7 @@
                     this.$btnStopCamera.removeClass('d-none');
                     // TODO log
                 } catch (e) {
-                    console.error('ALIX: could not start camera!', e);
-                    // TODO log
+                    this.log('could not start camera! - ' + e.toString(), 'error');
                 }
             },
             muteAudio: async function () {
@@ -588,7 +575,7 @@
                     this.$btnUnmuteAudio.removeClass('d-none');
                     // TODO log
                 } catch (e) {
-                    console.error('ALIX: could not mute audio!', e);
+                    this.log('could not mute audio! - ' + e.toString(), 'error');
                     // TODO log
                 }
             },
@@ -602,8 +589,7 @@
                     this.$btnMuteAudio.removeClass('d-none');
                     // TODO log
                 } catch (e) {
-                    console.error('ALIX: could not unmute audio!', e);
-                    // TODO log
+                    this.log('could not unmute audio! ' + e.toString(), 'error');
                 }
             },
 
@@ -614,7 +600,11 @@
                 console[_type](
                     'StagVideo => ' + '[' + (new Date()).toLocaleTimeString() + '] ' + this.myName,
                     _message);
-                // TODO: send message to server via socket as well
+                // post to userEventLog
+                $.post('/api/userEventLog/create', {
+                    eventName: 'video-event',
+                    dataJson: JSON.stringify({type: _type, message: _message})
+                }, function () {}, 'json');
             },
 
             // ajax request with error checking and reporting