Added [email protected]

Scalable-Broadcast demo now displays “number-of-broadcast-viewers”
muaz-khan · Aug 12, 2016 · 69b6a7e · 69b6a7e
1 parent d4717b0
commit 69b6a7e
Show file tree

Hide file tree

Showing 14 changed files with 236 additions and 24 deletions.
diff --git a/RTCMultiConnection.js b/RTCMultiConnection.js
@@ -1,4 +1,4 @@
-// Last time updated: 2016-07-24 8:06:16 AM UTC
+// Last time updated: 2016-08-12 5:21:05 AM UTC
 
 // _____________________
 // RTCMultiConnection-v3
@@ -1310,6 +1310,29 @@
         connection.socketCustomEvent = 'RTCMultiConnection-Custom-Message'; // generated via config.json
         connection.DetectRTC = DetectRTC;
 
+        connection.setCustomSocketEvent = function(customEvent) {
+            if (customEvent) {
+                connection.socketCustomEvent = customEvent;
+            }
+
+            if (!connection.socket) {
+                return;
+            }
+
+            connection.socket.emit('set-custom-socket-event-listener', connection.socketCustomEvent);
+        };
+
+        connection.getNumberOfBroadcastViewers = function(broadcastId, callback) {
+            if (!connection.socket || !broadcastId || !callback) return;
+
+            connection.socket.emit('get-number-of-users-in-specific-broadcast', broadcastId, callback);
+        };
+
+        connection.onNumberOfBroadcastViewersUpdated = function(event) {
+            if (!connection.enableLogs || !connection.isInitiator) return;
+            console.info('Number of broadcast (', event.broadcastId, ') viewers', event.numberOfBroadcastViewers);
+        };
+
         connection.onUserStatusChanged = function(event, dontWriteLogs) {
             if (!!connection.enableLogs && !dontWriteLogs) {
                 console.info(event.userid, event.status);
@@ -1782,6 +1805,10 @@
             if (!connection.enableLogs) return;
             console.debug('server-logs', log);
         });
+
+        connection.socket.on('number-of-broadcast-viewers-updated', function(data) {
+            connection.onNumberOfBroadcastViewersUpdated(data);
+        });
     }
 
     // MultiPeersHandler.js

diff --git a/RTCMultiConnection.min.js b/RTCMultiConnection.min.js
diff --git a/Scalable-Broadcast.js b/Scalable-Broadcast.js
@@ -27,7 +27,9 @@ module.exports = exports = function(socket, maxRelayLimitPerUser) {
                     canRelay: false,
                     typeOfStreams: user.typeOfStreams || {audio: true, video: true},
                     socket: socket
-                }
+                };
+
+                notifyBroadcasterAboutNumberOfViewers(user.broadcastId);
             }
 
             var relayUser = getFirstAvailableBraodcater(user.broadcastId, maxRelayLimitPerUser);
@@ -40,7 +42,8 @@ module.exports = exports = function(socket, maxRelayLimitPerUser) {
             if (relayUser && user.userid !== user.broadcastId) {
                 var hintsToJoinBroadcast = {
                     typeOfStreams: relayUser.typeOfStreams,
-                    userid: relayUser.userid
+                    userid: relayUser.userid,
+                    broadcastId: relayUser.broadcastId
                 };
 
                 users[user.userid].receivingFrom = relayUser.userid;
@@ -94,6 +97,53 @@ module.exports = exports = function(socket, maxRelayLimitPerUser) {
         }
     });
 
+    socket.on('get-number-of-users-in-specific-broadcast', function(broadcastId, callback) {
+        try {
+            if(!broadcastId || !callback) return;
+
+            if(!users[broadcastId]) {
+                callback(0);
+                return;
+            }
+
+            callback(getNumberOfBroadcastViewers(broadcastId));
+        }
+        catch(e) {}
+    });
+
+    function getNumberOfBroadcastViewers(broadcastId) {
+        try {
+            var numberOfUsers = 0;
+            Object.keys(users).forEach(function(uid) {
+                var user = users[uid];
+                if(user.broadcastId === broadcastId) {
+                    numberOfUsers++;
+                }
+            });
+            return numberOfUsers - 1;
+        }
+        catch(e) {
+            return 0;
+        }
+    }
+
+    function notifyBroadcasterAboutNumberOfViewers(broadcastId, userLeft) {
+        try {
+            if(!broadcastId || !users[broadcastId] || !users[broadcastId].socket) return;
+            var numberOfBroadcastViewers = getNumberOfBroadcastViewers(broadcastId);
+
+            if(userLeft === true) {
+                numberOfBroadcastViewers--;
+            } 
+
+            users[broadcastId].socket.emit('number-of-broadcast-viewers-updated', {
+                numberOfBroadcastViewers: numberOfBroadcastViewers,
+                broadcastId: broadcastId
+            });
+        }
+        catch(e) {}
+    }
+
     socket.on('disconnect', function() {
         try {
             if (!socket.isScalableBroadcastSocket) return;
@@ -102,6 +152,10 @@ module.exports = exports = function(socket, maxRelayLimitPerUser) {
 
             if(!user) return;
 
+            if(user.isBroadcastInitiator === false) {
+                notifyBroadcasterAboutNumberOfViewers(user.broadcastId, true);
+            }
+
             if(user.isBroadcastInitiator === true) {
                 consoleLog({
                     'initiator-left': true,

diff --git a/Signaling-Server.js b/Signaling-Server.js
@@ -97,6 +97,18 @@ module.exports = exports = function(app, socketCallback) {
             }
         });
 
+        var dontDuplicateListeners = {};
+        socket.on('set-custom-socket-event-listener', function(customEvent) {
+            if (dontDuplicateListeners[customEvent]) return;
+            dontDuplicateListeners[customEvent] = customEvent;
+
+            socket.on(customEvent, function(message) {
+                try {
+                    socket.broadcast.emit(customEvent, message);
+                } catch (e) {}
+            });
+        });
+
         socket.on('dont-make-me-moderator', function() {
             try {
                 if (!listOfUsers[socket.userid]) return;

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
     "name": "rtcmulticonnection",
     "description": "RTCMultiConnection is a WebRTC JavaScript wrapper library runs top over RTCPeerConnection API to provide multi-session establishment scenarios.",
-    "version": "3.3.7",
+    "version": "3.3.8",
     "authors": [
         {
             "name": "Muaz Khan",

diff --git a/demos/Scalable-Broadcast.html b/demos/Scalable-Broadcast.html
@@ -105,10 +105,14 @@ <h1><a href="https://github.com/muaz-khan/WebRTC-Scalable-Broadcast">WebRTC Scal
                 <div id="room-urls" style="text-align: center;display: none;background: #F1EDED;margin: 15px -10px;border: 1px solid rgb(189, 189, 189);border-left: 0;border-right: 0;"></div>
             </div>
 
+            <div class="make-center" id="broadcast-viewers-counter"></div>
+
             <video id="video-preview" controls loop></video>
         </section>
 
         <blockquote>
+            This demo <a href="http://dl.webrtc-experiment.com/cordova-apps/scalable-broadcast" target="_blank">has built-in (open-sourced) apps both for iOS and Android</a>.<br><br>
+
             This module simply initializes socket.io and configures it in a way that single audio/video/screen stream can be shared/relayed over unlimited users without any <a href="https://www.webrtc-experiment.com/docs/RTP-usage.html">bandwidth/CPU usage issues</a>. Everything happens peer-to-peer!
 
             <br><br>
@@ -123,7 +127,7 @@ <h1><a href="https://github.com/muaz-khan/WebRTC-Scalable-Broadcast">WebRTC Scal
         </script>
 
         <!-- <script src="/dist/rmc3.min.js"></script> -->
-        <script src="https://cdn.webrtc-experiment.com:443/rmc3.min.js"></script>
+        <script src="https://cdn.webrtc-experiment.com/rmc3.min.js"></script>
 
         <script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
         <script>
@@ -169,6 +173,7 @@ <h1><a href="https://github.com/muaz-khan/WebRTC-Scalable-Broadcast">WebRTC Scal
                         OfferToReceiveVideo: !!connection.session.video,
                         OfferToReceiveAudio: !!connection.session.audio
                     };
+                    connection.broadcastId = hintsToJoinBroadcast.broadcastId;
                     connection.join(hintsToJoinBroadcast.userid);
                 });
 
@@ -468,7 +473,14 @@ <h1><a href="https://github.com/muaz-khan/WebRTC-Scalable-Broadcast">WebRTC Scal
 
                 disableInputButtons();
             }
-
+
+            // below section detects how many users are viewing your broadcast
+
+            connection.onNumberOfBroadcastViewersUpdated = function(event) {
+                if (!connection.isInitiator) return;
+
+                document.getElementById('broadcast-viewers-counter').innerHTML = 'Number of broadcast viewers: <b>' + event.numberOfBroadcastViewers + '</b>';
+            };
         </script>
 
         <section class="experiment own-widgets latest-commits">

diff --git a/dev/RTCMultiConnection.js b/dev/RTCMultiConnection.js
@@ -1294,6 +1294,29 @@ function RTCMultiConnection(roomid, forceOptions) {
     connection.socketCustomEvent = '@@socketCustomEvent'; // generated via config.json
     connection.DetectRTC = DetectRTC;
 
+    connection.setCustomSocketEvent = function(customEvent) {
+        if (customEvent) {
+            connection.socketCustomEvent = customEvent;
+        }
+
+        if (!connection.socket) {
+            return;
+        }
+
+        connection.socket.emit('set-custom-socket-event-listener', connection.socketCustomEvent);
+    };
+
+    connection.getNumberOfBroadcastViewers = function(broadcastId, callback) {
+        if (!connection.socket || !broadcastId || !callback) return;
+
+        connection.socket.emit('get-number-of-users-in-specific-broadcast', broadcastId, callback);
+    };
+
+    connection.onNumberOfBroadcastViewersUpdated = function(event) {
+        if (!connection.enableLogs || !connection.isInitiator) return;
+        console.info('Number of broadcast (', event.broadcastId, ') viewers', event.numberOfBroadcastViewers);
+    };
+
     connection.onUserStatusChanged = function(event, dontWriteLogs) {
         if (!!connection.enableLogs && !dontWriteLogs) {
             console.info(event.userid, event.status);

diff --git a/dev/SocketConnection.js b/dev/SocketConnection.js
@@ -295,4 +295,8 @@ function SocketConnection(connection, connectCallback) {
         if (!connection.enableLogs) return;
         console.debug('server-logs', log);
     });
+
+    connection.socket.on('number-of-broadcast-viewers-updated', function(data) {
+        connection.onNumberOfBroadcastViewersUpdated(data);
+    });
 }
diff --git a/dist/rmc3.fbr.min.js b/dist/rmc3.fbr.min.js
diff --git a/dist/rmc3.js b/dist/rmc3.js
@@ -1,4 +1,4 @@
-// Last time updated: 2016-07-24 8:06:16 AM UTC
+// Last time updated: 2016-08-12 5:21:05 AM UTC
 
 // _____________________
 // RTCMultiConnection-v3
@@ -1310,6 +1310,29 @@
         connection.socketCustomEvent = 'RTCMultiConnection-Custom-Message'; // generated via config.json
         connection.DetectRTC = DetectRTC;
 
+        connection.setCustomSocketEvent = function(customEvent) {
+            if (customEvent) {
+                connection.socketCustomEvent = customEvent;
+            }
+
+            if (!connection.socket) {
+                return;
+            }
+
+            connection.socket.emit('set-custom-socket-event-listener', connection.socketCustomEvent);
+        };
+
+        connection.getNumberOfBroadcastViewers = function(broadcastId, callback) {
+            if (!connection.socket || !broadcastId || !callback) return;
+
+            connection.socket.emit('get-number-of-users-in-specific-broadcast', broadcastId, callback);
+        };
+
+        connection.onNumberOfBroadcastViewersUpdated = function(event) {
+            if (!connection.enableLogs || !connection.isInitiator) return;
+            console.info('Number of broadcast (', event.broadcastId, ') viewers', event.numberOfBroadcastViewers);
+        };
+
         connection.onUserStatusChanged = function(event, dontWriteLogs) {
             if (!!connection.enableLogs && !dontWriteLogs) {
                 console.info(event.userid, event.status);
@@ -1782,6 +1805,10 @@
             if (!connection.enableLogs) return;
             console.debug('server-logs', log);
         });
+
+        connection.socket.on('number-of-broadcast-viewers-updated', function(data) {
+            connection.onNumberOfBroadcastViewersUpdated(data);
+        });
     }
 
     // MultiPeersHandler.js

diff --git a/dist/rmc3.min.js b/dist/rmc3.min.js
diff --git a/docs/api.md b/docs/api.md
@@ -209,6 +209,34 @@ connection.connectSocket(function(socket) {
 });
 ```
 
+### `socketCustomEvent`
+
+A `string` property, allows you set custom socket.io event listener:
+
+```javascript
+connection.socketCustomEvent = 'abcdef';
+connection.openOrJoin('roomid', function() {
+    connection.socket.on(connection.socketCustomEvent, function(message) {
+        alert(message);
+    });
+
+    connection.socket.emit(connection.socketCustomEvent, 'My userid is: ' + connection.userid);
+});
+```
+
+### `setCustomSocketEvent`
+
+This method allows you set custom socket listeners anytime, during a live session:
+
+```javascript
+connection.setCustomSocketEvent('abcdef');
+connection.socket.on('abcdef', function(message) {
+    alert(message);
+});
+
+connection.socket.emit('abcdef', 'My userid is: ' + connection.userid);
+```
+
 ### `getUserMediaHandler`
 
 This object allows you capture audio/video stream yourself. RTCMultiConnection will NEVER know about your stream until you add it yourself, manually:
@@ -1145,9 +1173,34 @@ connection.singleBroadcastAttendees = 3;   // how many users are handled by each
 
 Live Demos:
 
-* [All-in-One Scalable Broadcast](https://rtcmulticonnection.herokuapp.com/demos/Scalable-Broadcast.html)
-* [Files-Scalable-Broadcast.html](https://rtcmulticonnection.herokuapp.com/demos/Files-Scalable-Broadcast.html)
-* [Video-Scalable-Broadcast.html](https://rtcmulticonnection.herokuapp.com/demos/Video-Scalable-Broadcast.html)
+| DemoTitle        | TestLive           | ViewSource |
+| ------------- |-------------|-------------|
+| Scalable Audio/Video Broadcast | [Demo](https://rtcmulticonnection.herokuapp.com/demos/Scalable-Broadcast.html) | [Source](https://github.com/muaz-khan/RTCMultiConnection/tree/master/demos/Scalable-Broadcast.html) |
+| Scalable Screen Broadcast | [Demo](https://rtcmulticonnection.herokuapp.com/demos/Scalable-Screen-Broadcast.html) | [Source](https://github.com/muaz-khan/RTCMultiConnection/tree/master/demos/Scalable-Screen-Broadcast.html) |
+| Scalable Video Broadcast | [Demo](https://rtcmulticonnection.herokuapp.com/demos/Video-Scalable-Broadcast.html) | [Source](https://github.com/muaz-khan/RTCMultiConnection/tree/master/demos/Video-Scalable-Broadcast.html) |
+| Scalable File Sharing | [Demo](https://rtcmulticonnection.herokuapp.com/demos/Files-Scalable-Broadcast.html) | [Source](https://github.com/muaz-khan/RTCMultiConnection/tree/master/demos/Files-Scalable-Broadcast.html) |
+
+## `onNumberOfBroadcastViewersUpdated`
+
+This event is fired for scalable-broadcast-initiator.
+
+```javascript
+connection.onNumberOfBroadcastViewersUpdated = function(event) {
+    // event.broadcastId
+    // event.numberOfBroadcastViewers
+    console.info('Number of broadcast (', event.broadcastId, ') viewers', event.numberOfBroadcastViewers);
+};
+```
+
+## `getNumberOfBroadcastViewers`
+
+You can manually get number-of-broadcast viewers as well:
+
+```javascript
+connection.getNumberOfBroadcastViewers('broadcast-unique-id', function(numberOfBroadcastViewers) {
+    alert(numberOfBroadcastViewers);
+});
+```
 
 ## Fix Echo
 

diff --git a/docs/how-to-use.md b/docs/how-to-use.md
@@ -16,7 +16,7 @@ All files from `/dist` directory are available on CDN: `https://cdn.webrtc-exper
 <script src="https://cdn.webrtc-experiment.com:443/rmc3.min.js"></script>
 
 <!-- or specific version -->
-<script src="https://github.com/muaz-khan/RTCMultiConnection/releases/download/3.3.7/rmc3.min.js"></script>
+<script src="https://github.com/muaz-khan/RTCMultiConnection/releases/download/3.3.8/rmc3.min.js"></script>
 ```
 
 If you're sharing files, you also need to link:
@@ -28,7 +28,7 @@ If you're sharing files, you also need to link:
 <script src="https://cdn.webrtc-experiment.com:443/rmc3.fbr.min.js"></script>
 
 <!-- or specific version -->
-<script src="https://github.com/muaz-khan/RTCMultiConnection/releases/download/3.3.7/rmc3.fbr.min.js"></script>
+<script src="https://github.com/muaz-khan/RTCMultiConnection/releases/download/3.3.8/rmc3.fbr.min.js"></script>
 ```
 
 > You can link multiple files from `dev` directory. Order doesn't matters.