Added "docs/tips-tricks.md"

muaz-khan · Jun 4, 2016 · ebe65cb · ebe65cb
1 parent a04b426
commit ebe65cb
Show file tree

Hide file tree

Showing 9 changed files with 254 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -11,13 +11,16 @@
 >
 > v3 can use XHR/XMPP/etc. signaling implementations as well. Please check [PubNubConnection.js](https://github.com/muaz-khan/RTCMultiConnection/blob/master/dev/PubNubConnection.js) to see how to configure it for 3rd party signaling implementations. You simply have to modify top few lines.
 
-# RTCMultiConnection [Documentation](https://github.com/muaz-khan/RTCMultiConnection/tree/master/docs/)
+# [Documentation](https://github.com/muaz-khan/RTCMultiConnection/tree/master/docs/)
 
 1. [Installation Guide](https://github.com/muaz-khan/RTCMultiConnection/tree/master/docs/installation-guide.md)
 2. [How to Use?](https://github.com/muaz-khan/RTCMultiConnection/tree/master/docs/how-to-use.md)
 3. [API Reference](https://github.com/muaz-khan/RTCMultiConnection/tree/master/docs/api.md)
 4. [Upgrade from v2 to v3](https://github.com/muaz-khan/RTCMultiConnection/tree/master/docs/upgrade.md)
 5. [How to write iOS/Android applications?](https://github.com/muaz-khan/RTCMultiConnection/tree/master/docs/ios-android.md)
+6. [Tips & Tricks](https://github.com/muaz-khan/RTCMultiConnection/blob/master/docs/tips-tricks.md)
+
+# v3 Demos
 
 | DemoTitle        | TestLive           | ViewSource |
 | ------------- |-------------|-------------|
@@ -51,9 +54,7 @@
 | Check if StreamHasData | [Demo](https://rtcmulticonnection.herokuapp.com/demos/StreamHasData.html) | [Source](https://github.com/muaz-khan/RTCMultiConnection/tree/master/demos/StreamHasData.html) |
 | Capture & Share Screen from any domain! | [Demo](https://rtcmulticonnection.herokuapp.com/demos/Cross-Domain-Screen-Capturing.html) | [Source](https://github.com/muaz-khan/RTCMultiConnection/tree/master/demos/Cross-Domain-Screen-Capturing.html) |
 
-
-
-## RTCMultiConnection v2 Demos
+# v2 Demos
 
 | Experiment Name        | Demo           | Source Code |
 | ------------- |-------------|-------------|

diff --git a/RTCMultiConnection.js b/RTCMultiConnection.js
@@ -1,4 +1,4 @@
-// Last time updated: 2016-05-31 6:27:42 AM UTC
+// Last time updated: 2016-06-04 2:15:39 PM UTC
 
 // _____________________
 // RTCMultiConnection-v3

diff --git a/RTCMultiConnection.min.js b/RTCMultiConnection.min.js
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-05-31 6:27:42 AM UTC
+// Last time updated: 2016-06-04 2:15:39 PM UTC
 
 // _____________________
 // RTCMultiConnection-v3

diff --git a/dist/rmc3.min.js b/dist/rmc3.min.js
diff --git a/docs/README.md b/docs/README.md
@@ -5,6 +5,7 @@
 3. [API Reference](https://github.com/muaz-khan/RTCMultiConnection/tree/master/docs/api.md)
 4. [Upgrade from v2 to v3](https://github.com/muaz-khan/RTCMultiConnection/tree/master/docs/upgrade.md)
 5. [How to write iOS/Android applications?](https://github.com/muaz-khan/RTCMultiConnection/tree/master/docs/ios-android.md)
+6. [Tips & Tricks](https://github.com/muaz-khan/RTCMultiConnection/blob/master/docs/tips-tricks.md)
 
 # [Wiki Pages](https://github.com/muaz-khan/RTCMultiConnection/wiki)
 

diff --git a/docs/api.md b/docs/api.md
@@ -495,6 +495,18 @@ connection.socketOptions = {
 };
 ```
 
+Or:
+
+```javascript
+connection.socketOptions.resource = 'custom';
+connection.socketOptions.transport = 'polling';
+connection.socketOptions['try multiple transports'] = false;
+connection.socketOptions.secure = true;
+connection.socketOptions.port = '9001';
+connection.socketOptions['max reconnection attempts'] = 100;
+// etc.
+```
+
 ## `connection.socket`
 
 ```javascript
@@ -682,6 +694,17 @@ connection.addStream({
 });
 ```
 
+## `removeStream`
+
+* http://www.rtcmulticonnection.org/docs/removeStream/
+
+You can even pass `streamCallback`:
+
+```javascript
+connection.removeStream('streamid');
+connection.renegotiate();
+```
+
 ## `mediaConstraints`
 
 * http://www.rtcmulticonnection.org/docs/mediaConstraints/
@@ -810,6 +833,16 @@ window.onbeforeunlaod = function() {
 };
 ```
 
+## `closeSocket`
+
+```javascript
+connection.closeSocket(); // close socket.io connections
+```
+
+## `close`
+
+* http://www.rtcmulticonnection.org/docs/close/
+
 ## `onUserIdAlreadyTaken`
 
 This event is fired if two users tries to open same room.
@@ -1223,28 +1256,6 @@ if(connection.DetectRTC.browser.name === 'Firefox') {
 </script>
 ```
 
-## Tips & Tricks
-
-`Object.observe` has been removed since `v3.2.95`. So you've to manually update-extra-data or set stream-end-handlers:
-
-```javascript
-connection.extra.something = 'something';
-connection.updateExtraData();
-```
-
-When attaching external streams:
-
-```javascript
-connection.attachStreams.push(yourExternalStrea);
-connection.setStreamEndHandler(yourExternalStrea);
-```
-
-Change userid using this method:
-
-```javascript
-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.
@@ -1301,8 +1312,8 @@ fileInput.onchange = function() {
 };
 
 if(connection.fbr) {
-    // Second Last step: remove file chunks based on file UUID
-    connection.fbr.chunks[file.uuid];
+    // Second Last step: remove/delete file chunks based on file UUID
+    delete connection.fbr.chunks[file.uuid];
 }
 ```
 
@@ -1362,6 +1373,14 @@ You can either remove `enableLogs` from the `config.json` to **disable logs**; o
 }
 ```
 
+# Missing API?
+
+Search here: http://www.rtcmulticonnection.org/docs/
+
+# Tips & Tricks
+
+* https://github.com/muaz-khan/RTCMultiConnection/blob/master/docs/tips-tricks.md
+
 ## Twitter
 
 * https://twitter.com/WebRTCWeb i.e. @WebRTCWeb

diff --git a/docs/tips-tricks.md b/docs/tips-tricks.md
@@ -0,0 +1,200 @@
+# Tips & Tricks
+
+> RTCMultiConnection v3 tips and tricks for advance users!
+
+## `Object.observe`
+
+`Object.observe` has been removed since `v3.2.95`. So you've to manually update-extra-data or set stream-end-handlers:
+
+```javascript
+connection.extra.something = 'something';
+connection.updateExtraData();
+```
+
+## Attach External Stream
+
+When attaching external streams:
+
+```javascript
+connection.attachStreams.push(yourExternalStrea);
+connection.setStreamEndHandler(yourExternalStrea);
+```
+
+## Change User ID
+
+Change userid using this method:
+
+```javascript
+connection.changeUserId('your-new-userid');
+```
+
+## ReUse Socket.io
+
+* https://github.com/muaz-khan/RTCMultiConnection/issues/170#issuecomment-223758688
+
+## Record Videos
+
+```html
+<script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
+<script>
+var listOfRecorders = {};
+connection.onstream = function(event) {
+    var recorder = RecordRTC(event.stream, {
+        type: 'video',
+        recorderType: MediaStreamRecorder
+    });
+
+    recorder.startRecording();
+
+    listOfRecorders[event.streamid] = recorder;
+};
+
+btnStopRecording.onclick = function() {
+    var streamid = prompt('Enter stream-id');
+
+    if(!listOfRecorders[streamid]) throw 'Wrong stream-id';
+
+    var recorder = listOfRecorders[streamid];
+    recorder.stopRecording(function() {
+        var blob = recorder.getBlob();
+
+        window.open( URL.createObjectURL(blob) );
+
+        // or upload to server
+        var formData = new FormData();
+        formData.append('file', blob);
+        $.post('/server-address', formData, serverCallback);
+    });
+};
+</script>
+```
+
+## Record All Videos In Single File
+
+Not Supported yet.
+
+## Record Audio along with Screen
+
+```javascript
+connection.session = {
+    audio: true,
+    screen: true
+};
+
+connection.onstream = function(event) {
+    if(connection.attachStreams.length <= 1) return;
+
+    var screenStream, audioStream;
+    connection.attachStreams.forEach(function(stream) {
+        if(stream.isScreen) screenStream = true;
+        if(stream.isAudio) audioSTream = true;
+    });
+
+    if(!screenStream || !audioStream) return;
+
+    var audioPlusScreenStream = new MediaStream();
+    audioPlusScreenStream.addTrack( screenStream.getVideoTracks()[0] );
+    audioPlusScreenStream.addTrack( audioStream.getAudioTracks()[0] );
+
+    var recorder = RecordRTC(audioPlusScreenStream, {
+        type: 'video',
+        recorderType: MediaStreamRecorder
+    });
+
+    recorder.startRecording();
+};
+```
+
+## Share RoomID in the URL
+
+There are two possible methods:
+
+1. Share room-id as URL-hash
+2. Share room-id as URL-query-parameters
+
+```javascript
+var roomid = 'xyz';
+connection.open(roomid, function() {
+    var urlToShare = 'https://yourDomain.com/room.html#' + roomid;
+
+    // or second technique
+    var urlToShare = 'https://yourDomain.com/room.html?roomid=' + roomid;
+
+    window.open(urlToShare);
+});
+```
+
+Now target users can read room-id as following:
+
+```javascript
+if(location.hash.length > 1) {
+    var roomid = location.hash.replace('#', '');
+
+    // auto join room
+    connection.join(roomid);
+}
+```
+
+Or read URL-query-parameters:
+
+```javascript
+(function() {
+    var params = {},
+        r = /([^&=]+)=?([^&]*)/g;
+
+    function d(s) {
+        return decodeURIComponent(s.replace(/\+/g, ' '));
+    }
+    var match, search = window.location.search;
+    while (match = r.exec(search.substring(1)))
+        params[d(match[1])] = d(match[2]);
+    window.params = params;
+})();
+
+if(params.roomid) {
+    // auto join room
+    connection.join(params.roomid);
+}
+```
+
+If you want to hide HTML for non-moderators or for users that are MERELY expected to join a room:
+
+```javascript
+if(params.roomid || location.hash.length > 1) { // whatever condition suits you
+    $('.moderators-sections').hide();
+
+    // or simple javascript
+    Array.prototype.slice.call(document.querySelectorAll('.moderators-sections')).forEach(function(div) {
+        div.style.display = 'none';
+
+        // or
+        div.parentNode.removeChild(div);
+    });
+}
+```
+
+PHP/ASPNET-MVC/Ruby developers can easily omit or remove those "redundant" HTML parts before serving the HTML to the browser.
+
+Remember, both `open, join, or openOrJoin` all these methods supports second-callback-parameter, which means that either you joined or opened the room. E.g. `connection.open('roomid', successCallback);`
+
+## Detect Presence
+
+RTCMultiConnection v2 users should check this wiki-page: https://github.com/muaz-khan/RTCMultiConnection/wiki/Presence-Detection
+
+v3 users should check this API (`connection.checkPresence`):
+
+* https://github.com/muaz-khan/RTCMultiConnection/blob/master/docs/api.md#checkpresence
+
+v3 users can get list of existing public-rooms using this API (`connection.getPublicModerators`):
+
+* https://github.com/muaz-khan/RTCMultiConnection/blob/master/docs/api.md#getpublicmoderators
+
+However v2 users can use `connection.onNewSession` event: http://www.rtcmulticonnection.org/docs/onNewSession/
+
+## Twitter
+
+* https://twitter.com/WebRTCWeb i.e. @WebRTCWeb
+
+## License
+
+[RTCMultiConnection](https://github.com/muaz-khan/RTCMultiConnection) is released under [MIT licence](https://github.com/muaz-khan/RTCMultiConnection/blob/master/LICENSE.md) . Copyright (c) [Muaz Khan](http://www.MuazKhan.com/).