Added [email protected] Fixed #140

Demo: https://rtcmulticonnection.herokuapp.com/demos/StreamHasData.html
muaz-khan · Apr 26, 2016 · 3c1f6bd · 3c1f6bd
1 parent 875950a
commit 3c1f6bd
Show file tree

Hide file tree

Showing 15 changed files with 687 additions and 55 deletions.
diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@
 
 ## Install
 
-* [NPM install](https://www.youtube.com/watch?v=EtsiYEW_T8Y) or [Other Videos](https://www.youtube.com/watch?v=EtsiYEW_T8Y&list=PLPRQUXAnRydKdyun-vjKPMrySoow2N4tl)
+* Youtube Video: [NPM install](https://www.youtube.com/watch?v=EtsiYEW_T8Y) or [Other Videos](https://www.youtube.com/watch?v=EtsiYEW_T8Y&list=PLPRQUXAnRydKdyun-vjKPMrySoow2N4tl)
 
 Or fetch latest code via github:
 
@@ -41,17 +41,19 @@ To TEST:
 node server.js
 ```
 
-If above command fails:
+## Stop Old Processes
+
+Check all processes running on port `9001` and stop process by `id`:
 
 ```
 lsof -n -i4TCP:9001 | grep LISTEN
 kill process-ID
 ```
 
-Or kill specific port. It may require "sudo" privileges:
+Or stop all processes on a specific port. (It may require `sudo` privileges):
 
 ```
-fuser -vk 9001/tcp
+[sudo] fuser -vk 9001/tcp
 ```
 
 Now open: `https://localhost:9001/`
@@ -123,6 +125,7 @@ More info about `forever-service` [here](http://stackoverflow.com/a/36027516/552
 | MultiRTC: Skype-like app | [Demo](https://rtcmulticonnection.herokuapp.com/demos/MultiRTC/) | [Source](https://github.com/muaz-khan/RTCMultiConnection/tree/master/demos/MultiRTC/) |
 | Change Video Resolutions in your Live Sessions | [Demo](https://rtcmulticonnection.herokuapp.com/demos/change-resolutions.html) | [Source](https://github.com/muaz-khan/RTCMultiConnection/tree/master/demos/change-resolutions.html) |
 | Admin/Guest demo | [Demo](https://rtcmulticonnection.herokuapp.com/demos/admin-guest.html) | [Source](https://github.com/muaz-khan/RTCMultiConnection/tree/master/demos/admin-guest.html) |
+| Check if StreamHasData | [Demo](https://rtcmulticonnection.herokuapp.com/demos/StreamHasData.html) | [Source](https://github.com/muaz-khan/RTCMultiConnection/tree/master/demos/StreamHasData.html) |
 
 ## Link Script Files
 
@@ -138,7 +141,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.2/rmc3.min.js"></script>
+<script src="https://github.com/muaz-khan/RTCMultiConnection/releases/download/3.3.3/rmc3.min.js"></script>
 ```
 
 If you're sharing files, you also need to link:
@@ -150,7 +153,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.2/rmc3.fbr.min.js"></script>
+<script src="https://github.com/muaz-khan/RTCMultiConnection/releases/download/3.3.3/rmc3.fbr.min.js"></script>
 ```
 
 > You can link multiple files from `dev` directory. Order doesn't matters.
@@ -1399,6 +1402,33 @@ Change userid using this method:
 connection.changeUserId('your-new-userid');
 ```
 
+## `StreamHasData`
+
+[`StreamHasData.js`](https://github.com/muaz-khan/RTCMultiConnection/tree/master/dev/StreamHasData.js) allows you check if remote stream started flowing or if remote stream is successfully received or if remote stream has data or not.
+
+```html
+<script src="/dev/StreamHasData.js"></script>
+<script>
+connection.videosContainer = document.getElementById('videos-container');
+connection.onstream = function(event) {
+    StreamHasData.check(event.mediaElement, function(hasData) {
+        if (!hasData) {
+            alert('Seems stream does NOT has any data.');
+        }
+
+        // append video here
+        connection.videosContainer.appendChild(event.mediaElement);
+        event.mediaElement.play();
+        setTimeout(function() {
+            event.mediaElement.play();
+        }, 5000);
+    });
+};
+</script>
+```
+
+Demo: https://rtcmulticonnection.herokuapp.com/demos/StreamHasData.html
+
 ## iOS/Android
 
 1. Audio/Video + TextChat/FileSharing (supported both on iOS/Android) [broadcast, conferencing, everything]
@@ -1501,7 +1531,7 @@ sudo xcode-select -switch /Applications/Xcode5.1.1/Xcode.app
 
 `config.xml` hints:
 
-Modify `platform/android/AndroidManifest.xml` for `<uses-permission android:name="android.permission.CAMERA"/>`. Now getUserMedia API will work in Android.
+Modify `platform/android/AndroidManifest.xml` for `<uses-permission android:name="android.permission.CAMERA"/>` and a few others. Now getUserMedia API will work in Android.
 
 An example `AndroidManifest.xml` file:
 
@@ -1518,11 +1548,16 @@ An example `AndroidManifest.xml` file:
         </activity>
     </application>
     <uses-sdk android:minSdkVersion="14" android:targetSdkVersion="23" />
+    <uses-permission android:name="android.permission.READ_CONTACTS" />
+    <uses-permission android:name="android.permission.WRITE_CONTACTS" />
+    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
     <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
-    <uses-permission android:name="android.permission.WAKE_LOCK" />
-    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
     <uses-permission android:name="android.permission.CAMERA" />
+    <uses-permission android:name="android.permission.MICROPHONE" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
+    <uses-permission android:name="android.permission.RECORD_AUDIO" />
 </manifest>
 ```
 

diff --git a/RTCMultiConnection.js b/RTCMultiConnection.js
@@ -1,4 +1,4 @@
-// Last time updated: 2016-04-17 5:58:28 PM UTC
+// Last time updated: 2016-04-26 5:20:49 AM UTC
 
 // _____________________
 // RTCMultiConnection-v3
@@ -552,8 +552,6 @@
                 mandatory: {},
                 optional: [{
                     bandwidth: connection.bandwidth.video * 8 * 1024 || 128 * 8 * 1024
-                }, {
-                    googLeakyBucket: true
                 }, {
                     facingMode: 'user'
                 }]
@@ -864,15 +862,11 @@
                     mPeer.onGettingLocalMedia(stream);
 
                     if (callback) {
-                        return callback();
+                        callback(stream);
                     }
                 },
                 onLocalMediaError: function(error, constraints) {
                     mPeer.onLocalMediaError(error, constraints);
-
-                    if (callback) {
-                        callback();
-                    }
                 },
                 localMediaConstraints: localMediaConstraints || {
                     audio: session.audio ? connection.mediaConstraints.audio : false,
@@ -1181,7 +1175,7 @@
         };
 
         connection.onmute = function(e) {
-            if (!e.mediaElement) {
+            if (!e || !e.mediaElement) {
                 return;
             }
 
@@ -1195,7 +1189,7 @@
         };
 
         connection.onunmute = function(e) {
-            if (!e.mediaElement) {
+            if (!e || !e.mediaElement || !e.stream) {
                 return;
             }
 
@@ -4186,6 +4180,32 @@
             return sdp.replace('SAVPF 100 101', 'SAVPF 101 100');
         }
 
+        // forceStereoAudio => via webrtcexample.com
+        // requires getUserMedia => echoCancellation:false
+        function forceStereoAudio(sdp) {
+            var sdpLines = sdp.split('\r\n');
+            var fmtpLineIndex = null;
+            for (var i = 0; i < sdpLines.length; i++) {
+                if (sdpLines[i].search('opus/48000') !== -1) {
+                    var opusPayload = extractSdp(sdpLines[i], /:(\d+) opus\/48000/i);
+                    break;
+                }
+            }
+            for (var i = 0; i < sdpLines.length; i++) {
+                if (sdpLines[i].search('a=fmtp') !== -1) {
+                    var payload = extractSdp(sdpLines[i], /a=fmtp:(\d+)/);
+                    if (payload === opusPayload) {
+                        fmtpLineIndex = i;
+                        break;
+                    }
+                }
+            }
+            if (fmtpLineIndex === null) return sdp;
+            sdpLines[fmtpLineIndex] = sdpLines[fmtpLineIndex].concat('; stereo=1; sprop-stereo=1');
+            sdp = sdpLines.join('\r\n');
+            return sdp;
+        }
+
         return {
             removeVPX: removeVPX,
             disableNACK: disableNACK,
@@ -4200,7 +4220,8 @@
             setOpusAttributes: function(sdp, params) {
                 return setOpusAttributes(sdp, params);
             },
-            preferVP9: preferVP9
+            preferVP9: preferVP9,
+            forceStereoAudio: forceStereoAudio
         };
     })();
 

diff --git a/RTCMultiConnection.min.js b/RTCMultiConnection.min.js
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.2",
+    "version": "3.3.3",
     "authors": [
         {
             "name": "Muaz Khan",

diff --git a/demos/Audio+ScreenSharing.html b/demos/Audio+ScreenSharing.html
@@ -14,7 +14,7 @@
     <style>
         video {
             object-fit: fill;
-            width: 100%;
+            width: 30%;
         }
         button,
         input,
@@ -51,15 +51,24 @@ <h1>Audio+ScreenSharing using RTCMultiConnection</h1>
             </p>
         </header>
 
-
         <div class="github-stargazers"></div>
 
+        <blockquote>
+            Please try this demo on Chrome Canary. Also make sure to enable <code>"chrome://flags/#tab-for-desktop-share"</code> flag.
+
+            <br><br>
+            Requirements: <a href="https://chrome.google.com/webstore/detail/screen-capturing/ajhifddimkapgcifgcodmmfdlknahffk">install this Chrome extension</a> or <a href="https://addons.mozilla.org/en-US/firefox/addon/enable-screen-capturing/">this Firefox extension</a>.
+        </blockquote>
+
         <section class="experiment">
             <div class="make-center">
                 <input type="text" id="room-id" value="abcdef">
                 <button id="open-room">Open Room</button>
                 <button id="join-room">Join Room</button>
                 <button id="open-or-join-room">Auto Open Or Join Room</button>
+
+                <br><br>
+                <button id="btn-add-video" disabled>Add Video</button>
             </div>
 
             <div id="videos-container"></div>
@@ -127,7 +136,7 @@ <h1>Audio+ScreenSharing using RTCMultiConnection</h1>
 
             connection.sdpConstraints.mandatory = {
                 OfferToReceiveAudio: true,
-                OfferToReceiveVideo: false
+                OfferToReceiveVideo: true
             };
 
             connection.videosContainer = document.getElementById('videos-container');
@@ -143,6 +152,19 @@ <h1>Audio+ScreenSharing using RTCMultiConnection</h1>
                 setTimeout(function() {
                     event.mediaElement.play();
                 }, 5000);
+
+                if(event.type === 'remote' && !connection.session.video) {
+                    document.getElementById('btn-add-video').disabled = false;
+                }
+            };
+
+            document.getElementById('btn-add-video').onclick = function() {
+                this.disabled = true;
+                connection.session.video = true;
+                connection.addStream({
+                    video: true,
+                    oneway: true
+                });
             };
         </script>