Added account image to MeshMessenger.

meshrelay.js

@@ -199,6 +199,17 @@ function CreateMeshRelayEx(parent, ws, req, domain, user, cookie) {
         }
     }
 
+    // Push any stored message to the peer
+    obj.sendPeerImage = function () {
+        if (obj.id.startsWith('meshmessenger/') && (obj.peer != null) && (obj.user != null) && (typeof obj.user.flags == 'number') && (obj.user.flags & 1)) {
+            parent.db.Get('im' + obj.user._id, function (err, docs) {
+                if ((err == null) && (docs != null) && (docs.length == 1) && (typeof docs[0].image == 'string')) {
+                    try { obj.peer.ws.send(JSON.stringify({ ctrlChannel: '102938', type: 'image', image: docs[0].image })); } catch (ex) { }
+                }
+            });
+        }
+    }
+
     // Send a PING/PONG message
     function sendPing() {
         try { obj.ws.send('{"ctrlChannel":"102938","type":"ping"}'); } catch (ex) { }
@@ -312,6 +323,10 @@ function CreateMeshRelayEx(parent, ws, req, domain, user, cookie) {
                                     // Send any stored push messages
                                     obj.pushStoredMessages();
                                     relayinfo.peer1.pushStoredMessages();
+
+                                    // Send other peer's image
+                                    obj.sendPeerImage();
+                                    relayinfo.peer1.sendPeerImage();
                                     return;
                                 }
                             }
@@ -339,6 +354,10 @@ function CreateMeshRelayEx(parent, ws, req, domain, user, cookie) {
                                     // Send any stored push messages
                                     obj.pushStoredMessages();
                                     relayinfo.peer1.pushStoredMessages();
+
+                                    // Send other peer's image
+                                    obj.sendPeerImage();
+                                    relayinfo.peer1.sendPeerImage();
                                 } else {
                                     // Write the recording file header
                                     parent.parent.debug('relay', 'Relay: Started recoding to file: ' + recFullFilename);
@@ -365,6 +384,10 @@ function CreateMeshRelayEx(parent, ws, req, domain, user, cookie) {
                                             // Send any stored push messages
                                             obj.pushStoredMessages();
                                             relayinfo.peer1.pushStoredMessages();
+
+                                            // Send other peer's image
+                                            obj.sendPeerImage();
+                                            relayinfo.peer1.sendPeerImage();
                                             return;
                                         }
                                         try { ws.send('cr'); } catch (ex) { } // Send connect to both peers, 'cr' indicates the session is being recorded.
@@ -373,6 +396,10 @@ function CreateMeshRelayEx(parent, ws, req, domain, user, cookie) {
                                         // Send any stored push messages
                                         obj.pushStoredMessages();
                                         relayinfo.peer1.pushStoredMessages();
+
+                                        // Send other peer's image
+                                        obj.sendPeerImage();
+                                        relayinfo.peer1.sendPeerImage();
                                     });
                                 }
                             });
@@ -385,6 +412,10 @@ function CreateMeshRelayEx(parent, ws, req, domain, user, cookie) {
                         // Send any stored push messages
                         obj.pushStoredMessages();
                         relayinfo.peer1.pushStoredMessages();
+
+                        // Send other peer's image
+                        obj.sendPeerImage();
+                        relayinfo.peer1.sendPeerImage();
                     }
 
                     parent.parent.debug('relay', 'Relay connected: ' + obj.id + ' (' + obj.req.clientIp + ' --> ' + obj.peer.req.clientIp + ')');

views/messenger.handlebars

@@ -56,6 +56,7 @@
         <div style="position:absolute;right:0;left:0;top:2.5px;text-align:center">Local</div>
         <video id="localVideoCanvas" autoplay muted style="position:absolute;top:20px;left:0;right:100%;height:calc(100% - 30px);background-color:black"></video>
     </div>
+    <canvas width="256" height="256" id="remoteImage" style="position:absolute;right:24px;top:45px;width:200px;height:200px;background-color:gray;border-radius:12px 12px 12px 12px;box-shadow:3px 3px 10px gray;display:none" />
     <input id="uploadFileInput" type="file" multiple style="display:none">
     <script type="text/javascript" onunload="onUnLoad()">
             var userInputFocus = 0;
@@ -86,6 +87,7 @@
             var chatTextSession = new Date().toString() + '\r\n';
             var localOutText = false;
             var remoteOutText = false;
+            var remoteImage = false;
 
             // File transfer state
             var fileUploads = [];
@@ -99,6 +101,8 @@
                 if (remoteStream != null) {
                     rheight = ((320 * Q('remoteVideoCanvas').videoHeight) / Q('remoteVideoCanvas').videoWidth);
                     QS('remoteVideo').height = 'calc(' + rheight + 'px + 30px)';
+                } else {
+                    if (remoteImage == true) { rheight += 200; }
                 }
                 if (localStream != null) {
                     QS('localVideo').height = 'calc(' + ((160 * Q('localVideoCanvas').videoHeight) / Q('localVideoCanvas').videoWidth) + 'px + 30px)';
@@ -205,9 +209,12 @@
             function displayLocalVideo(active) { QV('localVideo', active); adjustVideoWindows(); }
             function displayRemoteVideo(active) { QV('remoteVideo', active); adjustVideoWindows(); }
             function adjustVideoWindows() {
-                //var lv = (QS('localVideo')['display'] != 'none');
+                var lv = (QS('localVideo')['display'] != 'none');
                 var rv = (QS('remoteVideo')['display'] != 'none');
-                QS('localVideo')['top'] = rv ? '320px' : '45px';
+                QV('remoteImage', (remoteImage == true) && (rv == false))
+                if (rv) { QS('localVideo')['top'] = '320px'; }
+                else if (remoteImage) { QS('localVideo')['top'] = '320px'; }
+                else { QS('localVideo')['top'] = '45px'; }
                 resizeVideos();
             }
 
@@ -351,6 +358,8 @@
                 if (socket != null) { socket.close(); socket = null; }
                 updateControls();
                 state = 0;
+                remoteImage = false;
+                QV('remoteImage', false);
                 updateLocalOutText();
                 updateRemoteOutText();
             }
@@ -374,6 +383,12 @@
             // WebRTC id switcher (0 -> 0, 1 -> 2, 2 -> 1)
             function webRtcIdSwitch(id) { if (id == 0) { return 0; } return 3 - id; }
 
+            function drawRemoteImage(imageBase64) {
+                var canvas = Q('remoteImage'), context = canvas.getContext('2d'), img = new Image();
+                img.onload = function () { context.drawImage(this, 0, 0, canvas.width, canvas.height); remoteImage = true; adjustVideoWindows(); }
+                img.src = imageBase64;
+            }
+
             // Process incoming messages
             function processMessage(data, transport) {
                 if (typeof data == 'string') {
@@ -383,6 +398,7 @@
                     // Handle control command
                     if (data.ctrlChannel == '102938') {
                         switch (data.type) {
+                            case 'image': { drawRemoteImage(data.image); break; }
                             case 'ping': { send({ ctrlChannel: '102938', type: 'pong' }); break; }
                             case 'pong': { break; }
                         }