From ebe65cbd4497992b940a74550e52973277292a0a Mon Sep 17 00:00:00 2001 From: Muaz Khan Date: Sat, 4 Jun 2016 20:49:56 +0500 Subject: [PATCH] Added "docs/tips-tricks.md" --- README.md | 9 +- RTCMultiConnection.js | 2 +- RTCMultiConnection.min.js | 2 +- dist/rmc3.fbr.min.js | 2 +- dist/rmc3.js | 2 +- dist/rmc3.min.js | 2 +- docs/README.md | 1 + docs/api.md | 67 ++++++++----- docs/tips-tricks.md | 200 ++++++++++++++++++++++++++++++++++++++ 9 files changed, 254 insertions(+), 33 deletions(-) create mode 100755 docs/tips-tricks.md diff --git a/README.md b/README.md index 7c7d99e4..8587f9d1 100755 --- 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 index 720a9c74..2ecb04c4 100644 --- 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 index 83d6bd20..587879e4 100644 --- a/RTCMultiConnection.min.js +++ b/RTCMultiConnection.min.js @@ -1,4 +1,4 @@ -// Last time updated: 2016-05-31 6:27:43 AM UTC +// Last time updated: 2016-06-04 2:15:39 PM UTC // _____________________ // RTCMultiConnection-v3 diff --git a/dist/rmc3.fbr.min.js b/dist/rmc3.fbr.min.js index 71277eb0..abd437ea 100644 --- a/dist/rmc3.fbr.min.js +++ b/dist/rmc3.fbr.min.js @@ -1,4 +1,4 @@ -// Last time updated: 2016-05-31 6:27:43 AM UTC +// Last time updated: 2016-06-04 2:15:39 PM UTC // _____________________ // RTCMultiConnection-v3 diff --git a/dist/rmc3.js b/dist/rmc3.js index 720a9c74..2ecb04c4 100644 --- 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 index 83d6bd20..587879e4 100644 --- a/dist/rmc3.min.js +++ b/dist/rmc3.min.js @@ -1,4 +1,4 @@ -// Last time updated: 2016-05-31 6:27:43 AM UTC +// Last time updated: 2016-06-04 2:15:39 PM UTC // _____________________ // RTCMultiConnection-v3 diff --git a/docs/README.md b/docs/README.md index 7224886d..17795cf7 100755 --- 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 index ca259f29..78bfdf9b 100755 --- 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') { ``` -## 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 new file mode 100755 index 00000000..3566e258 --- /dev/null +++ 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 + + +``` + +## 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/).