From 25af0379537778a855e9328cd1b3075f66a9e227 Mon Sep 17 00:00:00 2001 From: Muaz Khan Date: Sat, 20 Jul 2013 06:44:33 +0500 Subject: [PATCH] =?UTF-8?q?WebRTC=20Experiments=20=E2=80=94=20https://www.?= =?UTF-8?q?webrtc-experiment.com/=20=E2=80=94=20updated.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- AudioVideoRecorder/README.md | 14 +- AudioVideoRecorder/index.html | 12 +- DataChannel/DataChannel.js | 9 +- DataChannel/README.md | 12 +- DataChannel/auto-session-establishment.html | 14 +- DataChannel/index.html | 14 +- LICENSE | 2 +- Pluginfree-Screen-Sharing/README.md | 19 +- Pluginfree-Screen-Sharing/conference-ui.js | 37 +- Pluginfree-Screen-Sharing/index.html | 18 +- Pre-recorded-Media-Streaming/README.md | 30 +- Pre-recorded-Media-Streaming/index.html | 14 +- README.md | 196 ++++---- RTCDataConnection/README.md | 9 +- .../RTCDataConnection-Manual-Test.html | 4 +- .../RTCDataConnection-Simple-Test.html | 4 +- RTCDataConnection/RTCDataConnection-Test.html | 4 +- RTCMultiConnection/README.md | 54 +- ...RTCMultiConnection-v1.3-and-socket.io.html | 4 +- .../RTCMultiConnection-v1.3-demo.html | 6 +- .../RTCMultiConnection-Demos/all-in-one.html | 14 +- .../audio-conferencing-data-sharing.html | 14 +- .../audioconferencing.html | 14 +- .../RTCMultiConnection-Demos/bandwidth.html | 14 +- .../group-file-sharing-plus-text-chat.html | 14 +- .../join-with-or-without-camera.html | 14 +- ...a-transmission-plus-videoconferencing.html | 12 +- ...lishment-plus-extra-data-transmission.html | 14 +- .../multi-session-establishment.html | 14 +- .../one-to-one-filesharing.html | 14 +- .../screen-sharing.html | 14 +- .../users-ejection.html | 14 +- .../video-broadcasting.html | 14 +- .../videoconferencing.html | 10 +- .../RTCMultiConnection-v1.2-and-earlier.md | 39 +- RTCMultiConnection/RTCMultiConnection-v1.3.md | 43 +- .../All-in-One.html | 14 +- .../Renegotiation.html | 6 +- .../Video-Conferencing.html | 10 +- .../multi-streams-attachment.html | 6 +- .../All-in-One.html | 14 +- .../Renegotiation.html | 6 +- .../Video-Conferencing.html | 10 +- .../RTCMultiConnection-v1.5-experimental.md | 16 +- RTCMultiConnection/index.html | 383 +++++++------- RTCPeerConnection/README.md | 307 +++++++++--- RTCPeerConnection/RTCPeerConnection-v1.5.js | 258 +++++----- RTCall/README.md | 35 +- RTCall/index.html | 16 +- RecordRTC/README.md | 14 +- RecordRTC/index.html | 20 +- audio-broadcast/README.md | 12 +- audio-broadcast/index.html | 16 +- broadcast/README.md | 14 +- broadcast/index.html | 16 +- chat-hangout/README.md | 14 +- chat-hangout/hangout-ui.js | 67 +-- chat-hangout/hangout.js | 195 +++----- chat-hangout/index.html | 16 +- chat/README.md | 12 +- demos/README.md | 22 +- demos/client-side-datachannel.html | 12 +- demos/client-side.html | 8 +- demos/remote-stream-recording.html | 171 +++++++ demos/screen-and-video-from-single-peer.html | 8 +- .../How-to-Broadcast-Screen-using-WebRTC.html | 6 +- docs/README.md | 27 +- docs/how-file-broadcast-works.html | 14 +- docs/how-to-WebRTC-video-conferencing.html | 8 +- ...-to-broadcast-video-using-RTCWeb-APIs.html | 8 +- docs/how-to-install-tabCapture-extension.html | 10 +- docs/how-to-share-audio-only-streams.html | 8 +- docs/how-to-use-plugin-free-calls.html | 6 +- docs/how-to-use-rtcdatachannel.html | 8 +- .../how-to-use-rtcpeerconnection-js-v1.1.html | 10 +- docs/rtc-datachannel-for-beginners.html | 14 +- docs/webrtc-for-beginners.html | 8 +- docs/webrtc-for-newbies.html | 8 +- experimental/README.md | 4 +- .../mozCaptureStreamUntilEnded/README.md | 6 +- .../mozCaptureStreamUntilEnded/index.html | 8 +- .../remote-media-stream-attachment/README.md | 6 +- .../remote-media-stream-attachment/index.html | 8 +- experimental/remote-stream-recording.html | 122 +++-- file-hangout/README.md | 16 +- file-hangout/hangout-ui.js | 83 ++-- file-hangout/hangout.js | 371 +++++++------- file-hangout/index.html | 18 +- file-sharing/README.md | 30 +- file-sharing/index.html | 12 +- meeting/README.md | 26 +- meeting/index.html | 12 +- one-to-many-audio-broadcasting/README.md | 29 +- one-to-many-audio-broadcasting/index.html | 12 +- one-to-many-video-broadcasting/README.md | 28 +- one-to-many-video-broadcasting/index.html | 12 +- p2p-share/README.md | 17 +- part-of-screen-sharing/README.md | 18 +- part-of-screen-sharing/index.html | 468 +++++++++--------- .../realtime-chat/README.md | 15 +- .../realtime-chat/how-this-work.html | 2 +- .../realtime-chat/index.html | 2 +- .../README.md | 18 +- .../index.html | 31 +- realtime-pluginfree-calls/README.md | 6 +- realtime-pluginfree-calls/index.html | 41 +- screen-broadcast/README.md | 30 +- screen-broadcast/index.html | 18 +- screen-sharing/README.md | 36 +- screen-sharing/index.html | 14 +- socket.io/README.md | 12 +- socket.io/index.html | 16 +- socket.io/rtclib.js | 204 ++++---- socket.io/ui.js | 83 ++-- socketio-over-nodejs/README.md | 30 +- socketio-over-nodejs/Signaling-Concepts.md | 22 +- .../webrtc-signaling/README.md | 6 +- .../static/RTCMultiConnection-v1.4/index.html | 2 +- .../static/RTCMultiConnection/index.html | 4 +- .../webrtc-signaling/static/text-chat.html | 2 +- .../RTCPeerConnection-v1.5.js | 258 +++++----- .../video-conferencing/conference-ui.js | 77 +-- .../static/video-conferencing/conference.js | 169 ++++--- .../static/video-conferencing/index.html | 8 +- text-chat/README.md | 28 +- text-chat/index.html | 12 +- video-conferencing/README.md | 18 +- video-conferencing/conference-ui.js | 76 +-- video-conferencing/conference.js | 189 +++---- video-conferencing/index.html | 16 +- webrtc-broadcasting/README.md | 12 +- webrtc-broadcasting/broadcast-ui.js | 39 +- webrtc-broadcasting/index.html | 16 +- websocket-over-nodejs/README.md | 22 +- .../RTCPeerConnection-v1.5.js | 259 +++++----- .../video-conferencing/index.html | 8 +- websocket/README.md | 12 +- websocket/index.html | 16 +- 138 files changed, 3148 insertions(+), 2568 deletions(-) create mode 100644 demos/remote-stream-recording.html diff --git a/AudioVideoRecorder/README.md b/AudioVideoRecorder/README.md index 607f7c70..877bd6f7 100644 --- a/AudioVideoRecorder/README.md +++ b/AudioVideoRecorder/README.md @@ -1,4 +1,4 @@ -##### Audio+Video Recording using MediaRecorder / [Demo](https://webrtc-experiment.appspot.com/AudioVideoRecorder/) +##### Audio+Video Recording using MediaRecorder / [Demo](https://www.webrtc-experiment.com/AudioVideoRecorder/) Only audio-relevant parts are supported in the moment. Audio+Video recording coming soon. @@ -6,10 +6,16 @@ Support? Current/Latest Firefox Nightly (ONLY). Understood? Download from: http: = +##### Note + +There is another relevant project: https://github.com/streamproc/MediaStreamRecorder + += + ##### How to use AudioVideoRecorder? ```html - + ``` = @@ -47,7 +53,7 @@ AudioVideoRecorder({ ##### Browser Support -[AudioVideoRecorder.js](https://webrtc-experiment.appspot.com/AudioVideoRecorder/) works fine on following web-browsers: +[AudioVideoRecorder.js](https://www.webrtc-experiment.com/AudioVideoRecorder/) works fine on following web-browsers: | Browser | Support | | ------------- |-------------| @@ -57,4 +63,4 @@ AudioVideoRecorder({ ##### License -[AudioVideoRecorder.js](https://webrtc-experiment.appspot.com/AudioVideoRecorder/) is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[AudioVideoRecorder.js](https://www.webrtc-experiment.com/AudioVideoRecorder/) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/AudioVideoRecorder/index.html b/AudioVideoRecorder/index.html index d1a52030..3ee2071c 100644 --- a/AudioVideoRecorder/index.html +++ b/AudioVideoRecorder/index.html @@ -91,7 +91,7 @@ ::-moz-selection { background: #ccc; } - +

@@ -103,7 +103,7 @@

Copyright © 2013 Muaz Khan<@muazkh>.

-
+
@@ -112,7 +112,7 @@

navigator.mozGetUserMedia(mediaConstraints, onMediaSuccess, onMediaError); function onMediaSuccess(stream) { - // https://webrtc-experiment.appspot.com/AudioVideoRecorder.js + // https://www.webrtc-experiment.com/AudioVideoRecorder.js AudioVideoRecorder({ stream: stream, mimeType: 'audio/ogg', @@ -147,7 +147,7 @@

Limitation: Only audio-recording is available (...audio+video recording coming soon)

-<script src="https://webrtc-experiment.appspot.com/AudioVideoRecorder.js"></script>
+<script src="https://www.webrtc-experiment.com/AudioVideoRecorder.js"></script>
 
 AudioVideoRecorder({
 
@@ -185,12 +185,12 @@ 

Send Message - + diff --git a/DataChannel/DataChannel.js b/DataChannel/DataChannel.js index 34eda78e..cba854ab 100644 --- a/DataChannel/DataChannel.js +++ b/DataChannel/DataChannel.js @@ -235,7 +235,7 @@ var self = { }; var that = this; - self.userToken = root.userid || uniqueToken(); + self.userToken = root.userid = root.userid || uniqueToken(); self.sockets = []; self.socketObjects = { }; @@ -819,9 +819,10 @@ var message = content[uuid].join(''); if (data.isobject) message = JSON.parse(message); - // latency detection + // bug: latency detection must be fixed + // https://github.com/muaz-khan/WebRTC-Experiment/issues/63#issuecomment-21083575 var receivingTime = new Date().getTime(); - var latency = receivingTime - data.sendingTime; + var latency = Math.abs(receivingTime - data.sendingTime); if (onmessage) onmessage(message, userid, latency); @@ -861,7 +862,7 @@ credential: 'homeo' }; - iceServers = { + var iceServers = { iceServers: options.iceServers || [STUN] }; diff --git a/DataChannel/README.md b/DataChannel/README.md index 93bf739a..61b2267e 100644 --- a/DataChannel/README.md +++ b/DataChannel/README.md @@ -1,4 +1,4 @@ -##### [DataChannel.js](https://webrtc-experiment.appspot.com/DataChannel.js) : A JavaScript wrapper library for RTCDataChannel APIs / [Demos](https://webrtc-experiment.appspot.com/#DataChannel) +##### [DataChannel.js](https://www.webrtc-experiment.com/DataChannel.js) : A JavaScript wrapper library for RTCDataChannel APIs / [Demos](https://www.webrtc-experiment.com/#DataChannel) DataChannel.js is a JavaScript library useful to write many-to-many i.e. group file/data sharing or text chat applications. Its syntax is easier to use and understand. It highly simplifies complex tasks like any or all user rejection/ejection; direct messages delivery; and more. @@ -22,7 +22,7 @@ DataChannel.js is a JavaScript library useful to write many-to-many i.e. group f ##### First Step: Link the library ```html - + ``` = @@ -289,10 +289,10 @@ channel.connect('channel-name'); = -##### [Demos using DataChannel.js](https://webrtc-experiment.appspot.com/#DataChannel) +##### [Demos using DataChannel.js](https://www.webrtc-experiment.com/#DataChannel) -1. [DataChannel basic demo](https://webrtc-experiment.appspot.com/DataChannel/) -2. [Auto Session Establishment and Users presence detection](https://webrtc-experiment.appspot.com/DataChannel/auto-session-establishment/) +1. [DataChannel basic demo](https://www.webrtc-experiment.com/DataChannel/) +2. [Auto Session Establishment and Users presence detection](https://www.webrtc-experiment.com/DataChannel/auto-session-establishment/) = @@ -310,4 +310,4 @@ channel.connect('channel-name'); ##### License -[DataChannel.js](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/DataChannel) is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[DataChannel.js](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/DataChannel) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/DataChannel/auto-session-establishment.html b/DataChannel/auto-session-establishment.html index b55766f6..f98492a2 100644 --- a/DataChannel/auto-session-establishment.html +++ b/DataChannel/auto-session-establishment.html @@ -206,13 +206,13 @@ document.createElement('footer'); - - + +
-↑ WEBRTC EXPERIMENTS @@ -227,7 +227,7 @@

Auto Session Establishment using @muazkh>.

-
+
@@ -341,7 +341,7 @@

Share Files

Getting started with WebRTC DataChannel

-<script src="https://webrtc-experiment.appspot.com/DataChannel.js"></script>
+<script src="https://www.webrtc-experiment.com/DataChannel.js"></script>
 <script>
     var channel = new DataChannel('default-channel');
 
@@ -490,7 +490,7 @@ 

WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @@ -498,6 +498,6 @@

Github

- + \ No newline at end of file diff --git a/DataChannel/index.html b/DataChannel/index.html index d1da413e..df7d06c9 100644 --- a/DataChannel/index.html +++ b/DataChannel/index.html @@ -183,13 +183,13 @@ document.createElement('footer'); - - + +
-↑ WEBRTC EXPERIMENTS @@ -205,7 +205,7 @@

File Sharing + Text Chat using WebRTC @muazkh>.

-
+

Open Data Channel

@@ -325,7 +325,7 @@

Share Files

Getting started with WebRTC DataChannel

-<script src="https://webrtc-experiment.appspot.com/DataChannel.js"></script>
+<script src="https://www.webrtc-experiment.com/DataChannel.js"></script>
 <script>
     var channel = new DataChannel();
 
@@ -439,7 +439,7 @@ 

WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @@ -447,6 +447,6 @@

Github

- + \ No newline at end of file diff --git a/LICENSE b/LICENSE index 9a2330de..6c4b6b12 100644 --- a/LICENSE +++ b/LICENSE @@ -9,4 +9,4 @@ The above copyright notice and this permission notice shall be included in all c THE SOFTWARE IS PROVIDED AS IS, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -MIT: https://webrtc-experiment.appspot.com/licence/ +MIT: https://www.webrtc-experiment.com/licence/ diff --git a/Pluginfree-Screen-Sharing/README.md b/Pluginfree-Screen-Sharing/README.md index 86f33ce2..c52e986c 100644 --- a/Pluginfree-Screen-Sharing/README.md +++ b/Pluginfree-Screen-Sharing/README.md @@ -1,7 +1,9 @@ -#### WebRTC plugin free screen sharing / [Demo](https://webrtc-experiment.appspot.com/Pluginfree-Screen-Sharing/) +#### WebRTC plugin free screen sharing / [Demo](https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/) Share entire screen directly without any single installation! += + #### Enable screen capture support in getUserMedia() 1. Open `chrome://flags` in the latest chrome (canary/beta). @@ -21,24 +23,29 @@ navigator.webkitGetUserMedia({ }, onstreaming, onfailure); ``` -There is another experiment: [WebRTC Tab Sharing using experimental tabCapture APIs](https://webrtc-experiment.appspot.com/screen-broadcast/) +There is another experiment: [WebRTC Tab Sharing using experimental tabCapture APIs](https://www.webrtc-experiment.com/screen-broadcast/) + += #### What about Desktop Sharing? It is a big wish to share desktop using RTCWeb peer connection APIs but unfortunately currently it is not possible. Current experiment is using chrome screen sharing APIs which is allows end-users just **view the screen**....nothing else! += #### Browser Support -[WebRTC plugin free screen sharing](https://webrtc-experiment.appspot.com/Pluginfree-Screen-Sharing/) experiment works fine on following web-browsers: +[WebRTC plugin free screen sharing](https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/) experiment works fine on following web-browsers: | Browser | Support | -| ------------- |:-------------| +| ------------- |-------------| | Firefox | [Stable](http://www.mozilla.org/en-US/firefox/new/) / [Aurora](http://www.mozilla.org/en-US/firefox/aurora/) / [Nightly](http://nightly.mozilla.org/) | | Google Chrome | [Stable](https://www.google.com/intl/en_uk/chrome/browser/) / [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) / [Beta](https://www.google.com/intl/en/chrome/browser/beta.html) / [Dev](https://www.google.com/intl/en/chrome/browser/index.html?extra=devchannel#eula) | -| Internet Explorer / IE | [Chrome Frame](http://www.google.com/chromeframe) | +| Android | [Chrome Beta](https://play.google.com/store/apps/details?id=com.chrome.beta&hl=en) | + += #### License -[WebRTC plugin free screen sharing](https://webrtc-experiment.appspot.com/Pluginfree-Screen-Sharing/) experiment is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[WebRTC plugin free screen sharing](https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/) experiment is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/Pluginfree-Screen-Sharing/conference-ui.js b/Pluginfree-Screen-Sharing/conference-ui.js index 6db09378..f8ae4f19 100644 --- a/Pluginfree-Screen-Sharing/conference-ui.js +++ b/Pluginfree-Screen-Sharing/conference-ui.js @@ -1,17 +1,34 @@ -var config = { +// 2013, @muazkh » github.com/muaz-khan +// MIT License » https://webrtc-experiment.appspot.com/licence/ +// Documentation » https://github.com/muaz-khan/WebRTC-Experiment/tree/master/Pluginfree-Screen-Sharing + +var config = { openSocket: function (config) { - var channel = config.channel || location.hash.replace('#', '') || 'pluginfree-screen-sharing'; - var socket = new Firebase('https://rtcweb.firebaseIO.com/' + channel); + var SIGNALING_SERVER = 'https://www.webrtc-experiment.com:8553/', + defaultChannel = location.hash.substr(1) || 'Pluginfree-Screen-Sharing'; + + var channel = config.channel || defaultChannel; + var sender = Math.round(Math.random() * 999999999) + 999999999; + + io.connect(SIGNALING_SERVER).emit('new-channel', { + channel: channel, + sender: sender + }); + + var socket = io.connect(SIGNALING_SERVER + channel); socket.channel = channel; - socket.on('child_added', function (data) { - config.onmessage && config.onmessage(data.val()); + socket.on('connect', function() { + if (config.callback) config.callback(socket); }); - socket.send = function (data) { - this.push(data); + + socket.send = function(message) { + socket.emit('message', { + sender: sender, + data: message + }); }; - config.onopen && setTimeout(config.onopen, 1); - socket.onDisconnect().remove(); - return socket; + + socket.on('message', config.onmessage); }, onRemoteStream: function (media) { var video = media.video; diff --git a/Pluginfree-Screen-Sharing/index.html b/Pluginfree-Screen-Sharing/index.html index 398b93ec..eb74af34 100644 --- a/Pluginfree-Screen-Sharing/index.html +++ b/Pluginfree-Screen-Sharing/index.html @@ -190,7 +190,7 @@

- - - - + + + +

@@ -268,7 +268,7 @@

To use code in your own site, you must understand following limitations:


- mandatory: {chromeMediaSource: 'tab'} can only be useful in chrome extensions. See Tab sharing using tabCapture APIs. + mandatory: {chromeMediaSource: 'tab'} can only be useful in chrome extensions. See Tab sharing using tabCapture APIs.
@@ -291,13 +291,13 @@

WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @muazkh» Github

- + diff --git a/Pre-recorded-Media-Streaming/README.md b/Pre-recorded-Media-Streaming/README.md index 88fb65a7..a4f89040 100644 --- a/Pre-recorded-Media-Streaming/README.md +++ b/Pre-recorded-Media-Streaming/README.md @@ -1,20 +1,24 @@ -#### Pre-recorded media streaming / [Demo](https://webrtc-experiment.appspot.com/Pre-recorded-Media-Streaming/) +#### Pre-recorded media streaming / [Demo](https://www.webrtc-experiment.com/Pre-recorded-Media-Streaming/) 1. Streaming pre-recorded video (media file) 2. Currently, using `Firebase` for streaming chunks of data because `MediaSource APIs` are only supported on chrome canary which has unreliable RTP (RTCDataChannel) streams. 3. Streaming `WebM` files only (in the moment!) 4. WebM file's size must be less than `1000KB`; otherwise it will fail. It is a bug will be fixed soon. += + #### How to stream your own video? ```html - + ``` ```javascript var streamer = new Streamer(); ``` += + #### /* pre-recorded media sender */ ```javascript @@ -27,6 +31,8 @@ document.querySelector('input[type=file]').onchange = function () { }; ``` += + #### /* pre-recorded media receiver */ ```javascript @@ -39,6 +45,8 @@ function onData(data) { } ``` += + #### /* socket.io/websocket to push chunks */ ```javascript @@ -49,6 +57,8 @@ socket.onmessage = onData; socket.on('message', onData); ``` += + #### It is an early release! This experiment is an early release. In future, RTCDataChannel APIs will be used to stream pre-recorded media in realtime! @@ -57,6 +67,8 @@ This experiment is an early release. In future, RTCDataChannel APIs will be used We are waiting `video.captureStream` implementation that is proposed for pre-recorded media streaming, unfortunately still in draft! += + #### In future, to stream pre-recorded medias ```javascript @@ -76,6 +88,8 @@ partial interface HTMLMediaElement { // peer.addStream ( preRecordedStream ); ``` += + #### How this experiment works? 1. Getting access to `WebM` video file using `File API` @@ -84,6 +98,8 @@ partial interface HTMLMediaElement { 4. As soon as other party receives first chunk; `MediaSource API` will start playing video without waiting for all chunks to be download! 5. You can save/store/record those chunks in any database; because it is a typed array [Uint8Array] in text form. += + #### Let's say you want to: 1. Stream 5min to 7 min of video data i.e. total two minutes of video data over all sockets from first WebM file. @@ -94,19 +110,25 @@ You can do all such things today! In simple words; you can stream part of video from first WebM file; part of video from second WebM file and so on, in realtime! += + #### Spec Reference 1. http://www.w3.org/TR/streamproc/ 2. https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html += + #### Browser Support -[Pre-recorded media streaming](https://webrtc-experiment.appspot.com/Pre-recorded-Media-Streaming/) experiment works fine on following web-browsers: +[Pre-recorded media streaming](https://www.webrtc-experiment.com/Pre-recorded-Media-Streaming/) experiment works fine on following web-browsers: | Browser | Support | | ------------- |:-------------:| | Google Chrome | [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) | += + ##### License -[Pre-recorded media streaming](https://webrtc-experiment.appspot.com/Pre-recorded-Media-Streaming/) experiment is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[Pre-recorded media streaming](https://www.webrtc-experiment.com/Pre-recorded-Media-Streaming/) experiment is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/Pre-recorded-Media-Streaming/index.html b/Pre-recorded-Media-Streaming/index.html index a1edf947..7e850242 100644 --- a/Pre-recorded-Media-Streaming/index.html +++ b/Pre-recorded-Media-Streaming/index.html @@ -124,13 +124,13 @@ document.createElement('article'); document.createElement('footer'); - - + +
- ↑ WEBRTC EXPERIMENTS + ↑ WEBRTC EXPERIMENTS

Pre-recorded media streaming @@ -141,7 +141,7 @@

-
+


How to stream your own video?

-<script src="https://webrtc-experiment.appspot.com/streamer.js"> </script>
+<script src="https://www.webrtc-experiment.com/streamer.js"> </script>
 <script> var streamer = new Streamer(); </script>
 
 

/* pre-recorded media sender */

@@ -289,14 +289,14 @@

WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @muazkh» Github

- + \ No newline at end of file diff --git a/README.md b/README.md index 97cce782..724e7486 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -## Realtime/Working [WebRTC Experiments](https://webrtc-experiment.appspot.com/) +## Realtime/Working [WebRTC Experiments](https://www.webrtc-experiment.com/) 1. It is a repository of uniquely experimented WebRTC demos; written by Muaz Khan! 2. No special requirement! Just Chrome (for desktop and android) or Firefox! @@ -10,12 +10,12 @@ | Library Name | Short Description | Documentation | Demos | | ------------- |-------------|-------------|-------------| -| `RecordRTC.js` | A library for audio/video recording | [Documentation](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC) | [Demos](https://webrtc-experiment.appspot.com/RecordRTC/) | -| `AudioVideoRecorder.js` | Audio+video recording using MediaRecorder API | [Documentation](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/AudioVideoRecorder) | [Demos](https://webrtc-experiment.appspot.com/AudioVideoRecorder/) | -| `RTCMultiConnection.js` | An ultimate wrapper library for `RTCWeb APIs` | [Documentation](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCMultiConnection) | [Demos](https://webrtc-experiment.appspot.com/#RTCMultiConnection) | -| `DataChannel.js` | An ultimate wrapper library for `RTCDataChannel APIs` | [Documentation](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/DataChannel) | [Demos](https://webrtc-experiment.appspot.com/#DataChannel) | -| `RTCall.js` | A library for voice (i.e. audio-only) calls | [Documentation](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCall) | [Demos](https://webrtc-experiment.appspot.com/RTCall/) | -| `meeting.js` | A library for audio/video conferencing | [Documentation](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/meeting) | [Demos](https://webrtc-experiment.appspot.com/meeting/) | +| `RecordRTC.js` | A library for audio/video recording | [Documentation](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC) | [Demos](https://www.webrtc-experiment.com/RecordRTC/) | +| `AudioVideoRecorder.js` | Audio+video recording using MediaRecorder API | [Documentation](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/AudioVideoRecorder) | [Demos](https://www.webrtc-experiment.com/AudioVideoRecorder/) | +| `RTCMultiConnection.js` | An ultimate wrapper library for `RTCWeb APIs` | [Documentation](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCMultiConnection) | [Demos](https://www.webrtc-experiment.com/#RTCMultiConnection) | +| `DataChannel.js` | An ultimate wrapper library for `RTCDataChannel APIs` | [Documentation](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/DataChannel) | [Demos](https://www.webrtc-experiment.com/#DataChannel) | +| `RTCall.js` | A library for voice (i.e. audio-only) calls | [Documentation](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCall) | [Demos](https://www.webrtc-experiment.com/RTCall/) | +| `meeting.js` | A library for audio/video conferencing | [Documentation](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/meeting) | [Demos](https://www.webrtc-experiment.com/meeting/) | = @@ -23,11 +23,11 @@ | Experiment Name | Short Description | Source Code | Demo | | ------------- |-------------|-------------|-------------| -| `Pre-recorded Media Streaming` | Stream video files in realtime; same like webcam streaming! | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/Pre-recorded-Media-Streaming) | [Demo](https://webrtc-experiment.appspot.com/Pre-recorded-Media-Streaming/) | -| `Part of Screen Sharing` | Share a region of the screen; not the entire screen! | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/part-of-screen-sharing) | [Demo](https://webrtc-experiment.appspot.com/part-of-screen-sharing/) | -| `Plugin-free Screen Sharing` | Share the entire screen | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/Pluginfree-Screen-Sharinghttps://github.com/muaz-khan/WebRTC-Experiment/tree/master/Pluginfree-Screen-Sharing) | [Demo](https://webrtc-experiment.appspot.com/Pluginfree-Screen-Sharing/) | -| `One-Way Broadcasting` | Same like radio stations; transmit audio/video/screen streams in one-way direction. Though, it is browser-to-browser streaming! | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/webrtc-broadcasting) | [Demo](https://webrtc-experiment.appspot.com/webrtc-broadcasting/) | -| `Audio-only Calls` | Realtime, plugin-free, voice-only calls | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/realtime-pluginfree-calls) | [Demo](https://webrtc-experiment.appspot.com/calls/) | +| `Pre-recorded Media Streaming` | Stream video files in realtime; same like webcam streaming! | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/Pre-recorded-Media-Streaming) | [Demo](https://www.webrtc-experiment.com/Pre-recorded-Media-Streaming/) | +| `Part of Screen Sharing` | Share a region of the screen; not the entire screen! | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/part-of-screen-sharing) | [Demo](https://www.webrtc-experiment.com/part-of-screen-sharing/) | +| `Plugin-free Screen Sharing` | Share the entire screen | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/Pluginfree-Screen-Sharinghttps://github.com/muaz-khan/WebRTC-Experiment/tree/master/Pluginfree-Screen-Sharing) | [Demo](https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/) | +| `One-Way Broadcasting` | Same like radio stations; transmit audio/video/screen streams in one-way direction. Though, it is browser-to-browser streaming! | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/webrtc-broadcasting) | [Demo](https://www.webrtc-experiment.com/webrtc-broadcasting/) | +| `Audio-only Calls` | Realtime, plugin-free, voice-only calls | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/realtime-pluginfree-calls) | [Demo](https://www.webrtc-experiment.com/calls/) | = @@ -35,9 +35,9 @@ | Experiment Name | Previous Demos | New Demos | | ------------- |-------------|-------------| -| **video-conferencing** / multi-user (group) video sharing | [Demo](https://webrtc-experiment.appspot.com/video-conferencing/) / [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/video-conferencing) | [Demo](https://webrtc-experiment.appspot.com/meeting/) / [Source Code](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/meeting) | -| **file sharing** / multi-user (group) files hangout | [Demo](https://webrtc-experiment.appspot.com/file-hangout/) / [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/file-hangout) | [Demo](https://webrtc-experiment.appspot.com/file-sharing/) / [Source Code](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/file-sharing) | -| **text chat** / multi-user (group) text chat | [Demo](https://webrtc-experiment.appspot.com/chat-hangout/) / [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/chat-hangout) | [Demo](https://webrtc-experiment.appspot.com/text-chat/) / [Source Code](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/text-chat) | +| **video-conferencing** / multi-user (group) video sharing | [Demo](https://www.webrtc-experiment.com/video-conferencing/) / [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/video-conferencing) | [Demo](https://www.webrtc-experiment.com/meeting/) / [Source Code](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/meeting) | +| **file sharing** / multi-user (group) files hangout | [Demo](https://www.webrtc-experiment.com/file-hangout/) / [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/file-hangout) | [Demo](https://www.webrtc-experiment.com/file-sharing/) / [Source Code](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/file-sharing) | +| **text chat** / multi-user (group) text chat | [Demo](https://www.webrtc-experiment.com/chat-hangout/) / [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/chat-hangout) | [Demo](https://www.webrtc-experiment.com/text-chat/) / [Source Code](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/text-chat) | = @@ -45,8 +45,8 @@ | Experiment Name | Previous Demos | New Demos | | ------------- |-------------|-------------| -| **video-broadcasting** | [Demo](https://webrtc-experiment.appspot.com/broadcast/) / [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/broadcast) | [Demo](https://webrtc-experiment.appspot.com/one-to-many-video-broadcasting/) / [Source Code](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/one-to-many-video-broadcasting) | -| **audio-broadcasting** | [Demo](https://webrtc-experiment.appspot.com/audio-broadcast/) / [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/audio-broadcast) | [Demo](https://webrtc-experiment.appspot.com/one-to-many-audio-broadcasting/) / [Source Code](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/one-to-many-audio-broadcasting) | +| **video-broadcasting** | [Demo](https://www.webrtc-experiment.com/broadcast/) / [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/broadcast) | [Demo](https://www.webrtc-experiment.com/one-to-many-video-broadcasting/) / [Source Code](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/one-to-many-video-broadcasting) | +| **audio-broadcasting** | [Demo](https://www.webrtc-experiment.com/audio-broadcast/) / [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/audio-broadcast) | [Demo](https://www.webrtc-experiment.com/one-to-many-audio-broadcasting/) / [Source Code](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/one-to-many-audio-broadcasting) | = @@ -54,8 +54,8 @@ | Experiment Name | Demo | Source Code | | ------------- |-------------|-------------| -| **One-to-one WebRTC video chat using WebSocket** | [Demo](https://webrtc-experiment.appspot.com/websocket/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/websocket) | -| **One-to-one WebRTC video chat using socket.io** | [Demo](https://webrtc-experiment.appspot.com/socket.io/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/socket.io) | +| **One-to-one WebRTC video chat using WebSocket** | [Demo](https://www.webrtc-experiment.com/websocket/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/websocket) | +| **One-to-one WebRTC video chat using socket.io** | [Demo](https://www.webrtc-experiment.com/socket.io/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/socket.io) | = @@ -63,11 +63,11 @@ | Experiment Name | Demo | Source Code | | ------------- |-------------|-------------| -| **Share screen and audio/video from single peer connection!** | [Demo](https://webrtc-experiment.appspot.com/demos/screen-and-video-from-single-peer.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/demos/screen-and-video-from-single-peer.html) | -| **Text chat using RTCDataChannel APIs** | [Demo](https://webrtc-experiment.appspot.com/demos/client-side-datachannel.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/demos/) |client-side-datachannel.html -| **Simple video chat** | [Demo](https://webrtc-experiment.appspot.com/demos/client-side.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/demos/client-side.html) | -| **Sharing video - using socket.io for signaling** |[Demo](https://webrtc-experiment.appspot.com/demos/client-side-socket-io.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/demos/client-side-socket-io.html) | -| **Sharing video - using WebSockets for signaling** | [Demo](https://webrtc-experiment.appspot.com/demos/client-side-websocket.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/demos/client-side-websocket.html) | +| **Share screen and audio/video from single peer connection!** | [Demo](https://www.webrtc-experiment.com/demos/screen-and-video-from-single-peer.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/demos/screen-and-video-from-single-peer.html) | +| **Text chat using RTCDataChannel APIs** | [Demo](https://www.webrtc-experiment.com/demos/client-side-datachannel.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/demos/) |client-side-datachannel.html +| **Simple video chat** | [Demo](https://www.webrtc-experiment.com/demos/client-side.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/demos/client-side.html) | +| **Sharing video - using socket.io for signaling** |[Demo](https://www.webrtc-experiment.com/demos/client-side-socket-io.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/demos/client-side-socket-io.html) | +| **Sharing video - using WebSockets for signaling** | [Demo](https://www.webrtc-experiment.com/demos/client-side-websocket.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/demos/client-side-websocket.html) | | **Audio Only Streaming** | ---- | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/demos/audio-only-streaming.html) | = @@ -76,8 +76,8 @@ | Experiment Name | Previous Demos | New Demos | | ------------- |-------------|-------------| -| **Plugin-free screen sharing** / share the entire screen | [Demo](https://webrtc-experiment.appspot.com/Pluginfree-Screen-Sharing/) / [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/Pluginfree-Screen-Sharing) | [Demo](https://webrtc-experiment.appspot.com/screen-sharing/) / [Source Code](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/screen-sharing) | -| **Tab sharing** / using `tabCapture` APIs | [Demo](https://webrtc-experiment.appspot.com/screen-broadcast/) / [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/screen-broadcast) | ---- | +| **Plugin-free screen sharing** / share the entire screen | [Demo](https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/) / [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/Pluginfree-Screen-Sharing) | [Demo](https://www.webrtc-experiment.com/screen-sharing/) / [Source Code](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/screen-sharing) | +| **Tab sharing** / using `tabCapture` APIs | [Demo](https://www.webrtc-experiment.com/screen-broadcast/) / [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/screen-broadcast) | ---- | = @@ -85,8 +85,8 @@ | Experiment Name | Demo | Source Code | | ------------- |-------------|-------------| -| Share part-of-screen **using RTCDataChannel APIs** | [Demo](https://webrtc-experiment.appspot.com/part-of-screen-sharing/webrtc-data-channel/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/part-of-screen-sharing/webrtc-and-part-of-screen-sharing) | -| Share part-of-screen **using Firebase** | [Demo](https://webrtc-experiment.appspot.com/part-of-screen-sharing/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/part-of-screen-sharing) | +| Share part-of-screen **using RTCDataChannel APIs** | [Demo](https://www.webrtc-experiment.com/part-of-screen-sharing/webrtc-data-channel/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/part-of-screen-sharing/webrtc-and-part-of-screen-sharing) | +| Share part-of-screen **using Firebase** | [Demo](https://www.webrtc-experiment.com/part-of-screen-sharing/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/part-of-screen-sharing) | | **A realtime chat using RTCDataChannel** | [Demo](https://googledrive.com/host/0B6GWd_dUUTT8RzVSRVU2MlIxcm8/realtime-chat/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/part-of-screen-sharing/realtime-chat/RTCDataChannel) | | **A realtime chat using Firebase** | [Demo](https://googledrive.com/host/0B6GWd_dUUTT8RzVSRVU2MlIxcm8/realtime-chat/No-WebRTC-Chat.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/part-of-screen-sharing/realtime-chat) | @@ -96,8 +96,9 @@ | Experiment Name | Demo | Source Code | | ------------- |-------------|-------------| -| **DataChannel basic demo** | [Demo](https://webrtc-experiment.appspot.com/DataChannel/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/DataChannel/index.html) | -| **Auto Session Establishment** | [Demo](https://webrtc-experiment.appspot.com/DataChannel/auto-session-establishment/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/DataChannel/auto-session-establishment.html) | +| **DataChannel basic demo** | [Demo](https://www.webrtc-experiment.com/DataChannel/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/DataChannel/index.html) | +| **Auto Session Establishment** | [Demo](https://www.webrtc-experiment.com/DataChannel/auto-session-establishment/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/DataChannel/auto-session-establishment.html) | +| Share part-of-screen **using DataChannel.js** | [Demo](https://www.webrtc-experiment.com/part-of-screen-sharing/webrtc-data-channel/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/part-of-screen-sharing/webrtc-and-part-of-screen-sharing) | | **Private Chat** | [Demo](https://muazkh.appspot.com/privatechat/) | ---- | = @@ -106,9 +107,9 @@ | Experiment Name | Demo | Source Code | | ------------- |-------------|-------------| -| **Attaching Remote Media Streams** | [Demo](https://webrtc-experiment.appspot.com/remote-media-stream-attachment/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/experimental/remote-media-stream-attachment) | -| **mozCaptureStreamUntilEnded for pre-recorded media streaming** | [Demo](https://webrtc-experiment.appspot.com/mozCaptureStreamUntilEnded/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/experimental/mozCaptureStreamUntilEnded) | -| **Remote audio stream recording** | [Demo](https://webrtc-experiment.appspot.com/demos/remote-stream-recording.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/experimental/remote-stream-recording.html) | +| **Attaching Remote Media Streams** | [Demo](https://www.webrtc-experiment.com/remote-media-stream-attachment/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/experimental/remote-media-stream-attachment) | +| **mozCaptureStreamUntilEnded for pre-recorded media streaming** | [Demo](https://www.webrtc-experiment.com/mozCaptureStreamUntilEnded/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/experimental/mozCaptureStreamUntilEnded) | +| **Remote audio stream recording** | [Demo](https://www.webrtc-experiment.com/demos/remote-stream-recording.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/experimental/remote-stream-recording.html) | = @@ -116,20 +117,20 @@ | Experiment Name | Demo | Source Code | | ------------- |-------------|-------------| -| **All-in-One test** | [Demo](https://webrtc-experiment.appspot.com/RTCMultiConnection/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/all-in-one.html) | -| **Video Conferencing** | [Demo](https://webrtc-experiment.appspot.com/RTCMultiConnection/video-conferencing/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/videoconferencing.html) | -| **Multi-Session Establishment** | [Demo](https://webrtc-experiment.appspot.com/RTCMultiConnection/multi-session-establishment/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/multi-session-establishment.html) | -| **RTCMultiConnection-v1.3 testing demo** | [Demo](https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.3/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/RTCMultiConnection-v1.3-demo.html) | -| **Video Broadcasting** | [Demo](https://webrtc-experiment.appspot.com/RTCMultiConnection/video-broadcasting/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/video-broadcasting.html) | -| **File Sharing + Text Chat** | [Demo](https://webrtc-experiment.appspot.com/RTCMultiConnection/group-file-sharing-plus-text-chat/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/group-file-sharing-plus-text-chat.html) | -| **Audio Conferencing** | [Demo](https://webrtc-experiment.appspot.com/RTCMultiConnection/audio-conferencing/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/audioconferencing.html) | -| **Join with/without camera** | [Demo](https://webrtc-experiment.appspot.com/RTCMultiConnection/join-with-or-without-camera/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/join-with-or-without-camera.html) | -| **Screen Sharing** | [Demo](https://webrtc-experiment.appspot.com/RTCMultiConnection/screen-sharing/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/screen-sharing.html) | -| **One-to-One file sharing** | [Demo](https://webrtc-experiment.appspot.com/RTCMultiConnection/one-to-one-filesharing/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/one-to-one-filesharing.html) | -| **Manual session establishment + extra data transmission** | [Demo](https://webrtc-experiment.appspot.com/RTCMultiConnection/manual-session-establishment-plus-extra-data-transmission/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/manual-session-establishment-plus-extra-data-transmission.htmlhttps://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/manual-session-establishment-plus-extra-data-transmission.html) | -| **Manual session establishment + extra data transmission + video conferencing** | [Demo](https://webrtc-experiment.appspot.com/RTCMultiConnection/manual-session-establishment-plus-extra-data-transmission-plus-videoconferencing/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/manual-session-establishment-plus-extra-data-transmission-plus-videoconferencing.html) | -| **Customizing Bandwidth** | [Demo](https://webrtc-experiment.appspot.com/RTCMultiConnection/bandwidth/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/bandwidth.html) | -| **Users ejection and presence detection** | [Demo](https://webrtc-experiment.appspot.com/RTCMultiConnection/users-ejection/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/users-ejection.html) | +| **All-in-One test** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/all-in-one.html) | +| **Video Conferencing** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/videoconferencing.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/videoconferencing.html) | +| **Multi-Session Establishment** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/multi-session-establishment.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/multi-session-establishment.html) | +| **RTCMultiConnection-v1.3 testing demo** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/RTCMultiConnection-v1.3-demo.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/RTCMultiConnection-v1.3-demo.html) | +| **Video Broadcasting** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/video-broadcasting.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/video-broadcasting.html) | +| **File Sharing + Text Chat** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/group-file-sharing-plus-text-chat/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/group-file-sharing-plus-text-chat.html) | +| **Audio Conferencing** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/audioconferencing.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/audioconferencing.html) | +| **Join with/without camera** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/join-with-or-without-camera.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/join-with-or-without-camera.html) | +| **Screen Sharing** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/screen-sharing.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/screen-sharing.html) | +| **One-to-One file sharing** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/one-to-one-filesharing.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/one-to-one-filesharing.html) | +| **Manual session establishment + extra data transmission** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/manual-session-establishment-plus-extra-data-transmission.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/manual-session-establishment-plus-extra-data-transmission.htmlhttps://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/manual-session-establishment-plus-extra-data-transmission.html) | +| **Manual session establishment + extra data transmission + video conferencing** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/manual-session-establishment-plus-extra-data-transmission-plus-videoconferencing.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/manual-session-establishment-plus-extra-data-transmission-plus-videoconferencing.html) | +| **Customizing Bandwidth** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/bandwidth.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/bandwidth.html) | +| **Users ejection and presence detection** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/users-ejection.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/users-ejection.html) | | **RTCMultiConnection-v1.3 and socket.io** | ---- | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/RTCMultiConnection-v1.3-and-socket.io.html) | = @@ -138,10 +139,10 @@ | Experiment Name | Demo | Source Code | | ------------- |-------------|-------------| -| **All-in-One test** | [Demo](https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.4-Demos/All-in-One.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-v1.4-Demos/All-in-One.html) | -| **Renegotiation & Mute/UnMute/Stop** | [Demo](https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.4-Demos/Renegotiation.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-v1.4-Demos/Renegotiation.html) | -| **Video-Conferencing** | [Demo](https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.4-Demos/Video-Conferencing.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-v1.4-Demos/Video-Conferencing.html) | -| **Multi-streams attachment** | [Demo](https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.4-Demos/multi-streams-attachment.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-v1.4-Demos/multi-streams-attachment.html) | +| **All-in-One test** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection-v1.4-Demos/All-in-One.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-v1.4-Demos/All-in-One.html) | +| **Renegotiation & Mute/UnMute/Stop** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection-v1.4-Demos/Renegotiation.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-v1.4-Demos/Renegotiation.html) | +| **Video-Conferencing** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection-v1.4-Demos/Video-Conferencing.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-v1.4-Demos/Video-Conferencing.html) | +| **Multi-streams attachment** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection-v1.4-Demos/multi-streams-attachment.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-v1.4-Demos/multi-streams-attachment.html) | = @@ -152,18 +153,18 @@ | [RTCMultiConnection Documentation](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCMultiConnection) | | [DataChannel Documentation](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/DataChannel) | | [RTCPeerConnection Documentation](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCPeerConnection) | -| [How to use RTCPeerConnection.js?](https://webrtc-experiment.appspot.com/docs/how-to-use-rtcpeerconnection-js-v1.1.html) | -| [RTCDataChannel for Beginners](https://webrtc-experiment.appspot.com/docs/rtc-datachannel-for-beginners.html) | -| [How to use RTCDataChannel?](https://webrtc-experiment.appspot.com/docs/how-to-use-rtcdatachannel.html) - single code for both canary and nightly | -| [WebRTC for Beginners: A getting stared guide!](https://webrtc-experiment.appspot.com/docs/webrtc-for-beginners.html) | -| [WebRTC for Newbies ](https://webrtc-experiment.appspot.com/docs/webrtc-for-newbies.html) | +| [How to use RTCPeerConnection.js?](https://www.webrtc-experiment.com/docs/how-to-use-rtcpeerconnection-js-v1.1.html) | +| [RTCDataChannel for Beginners](https://www.webrtc-experiment.com/docs/rtc-datachannel-for-beginners.html) | +| [How to use RTCDataChannel?](https://www.webrtc-experiment.com/docs/how-to-use-rtcdatachannel.html) - single code for both canary and nightly | +| [WebRTC for Beginners: A getting stared guide!](https://www.webrtc-experiment.com/docs/webrtc-for-beginners.html) | +| [WebRTC for Newbies ](https://www.webrtc-experiment.com/docs/webrtc-for-newbies.html) | = ##### [DataChannel.js](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/DataChannel) / A library for RTCDataChannel APIs ```html - + ``` ```javascript @@ -185,51 +186,36 @@ channel.channels['muazkh'].send(file || data || 'text'); ##### [RTCMultiConnection.js](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCMultiConnection) / A library for all WebRTC APIs ```html - -``` + + -```javascript -var connection = new RTCMultiConnection(); - -// session is included in v1.3 and higher releases -connection.session = { - audio: true, - video: true, - screen: true, - oneway: true -}; +
-// bandwidth is included in v1.3 and higher releases -connection.bandwidth = { - audio: 50, - video: 256, - data: 1638400 -}; + ``` = @@ -237,7 +223,7 @@ connection.peers['user-id'].addStream({ ##### [RTCall.js](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCall) / A library for audio-only calling ```html - + ``` ```javascript @@ -311,15 +297,15 @@ Want to use XHR, WebSockets, SIP, XMPP, etc. for signaling? Read [this post](htt = -##### How to use [RecordRTC](https://webrtc-experiment.appspot.com/RecordRTC/)? +##### How to use [RecordRTC](https://www.webrtc-experiment.com/RecordRTC/)? ```html - + ``` = -##### How to record video using [RecordRTC](https://webrtc-experiment.appspot.com/RecordRTC/)? +##### How to record video using [RecordRTC](https://www.webrtc-experiment.com/RecordRTC/)? ```javascript var recorder = RecordRTC({ @@ -337,10 +323,10 @@ recorder.stopVideo(function(recordedFileURL) { = -##### How to record GIF using [RecordRTC](https://webrtc-experiment.appspot.com/RecordRTC/)? +##### How to record GIF using [RecordRTC](https://www.webrtc-experiment.com/RecordRTC/)? ```html - + ``` ```javascript @@ -359,7 +345,7 @@ recorder.stopGIF(function(gifURL) { = -##### How to record audio using [RecordRTC](https://webrtc-experiment.appspot.com/RecordRTC/)? +##### How to record audio using [RecordRTC](https://www.webrtc-experiment.com/RecordRTC/)? ```javascript var recorder = RecordRTC({ @@ -381,7 +367,7 @@ recorder.stopAudio(function(recordedFileURL) { = -##### How to record audio using [AudioVideoRecorder](https://webrtc-experiment.appspot.com/AudioVideoRecorder/)? +##### How to record audio using [AudioVideoRecorder](https://www.webrtc-experiment.com/AudioVideoRecorder/)? ```javascript AudioVideoRecorder({ @@ -418,7 +404,7 @@ AudioVideoRecorder({ ##### Browser Support -[WebRTC Experiments](https://webrtc-experiment.appspot.com) works fine on following web-browsers: +[WebRTC Experiments](https://www.webrtc-experiment.com/) works fine on following web-browsers: | Browser | Support | | ------------- |-------------| @@ -430,4 +416,4 @@ AudioVideoRecorder({ ##### License -[WebRTC Experiments](https://webrtc-experiment.appspot.com/) are released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[WebRTC Experiments](https://www.webrtc-experiment.com/) are released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/RTCDataConnection/README.md b/RTCDataConnection/README.md index ef0ee0d0..62a2b1ae 100644 --- a/RTCDataConnection/README.md +++ b/RTCDataConnection/README.md @@ -37,14 +37,19 @@ rtcDataConnection.initDataConnection(); rtcDataConnection.send( file || data || 'text' ); ``` += + #### Features 1. Share files of any size directly 2. Share text messages of any length 3. Share any kind of data directly += + #### Read [RTCDataConnection Documentation](http://bit.ly/RTCDataConnection) += #### Browser Support [RTCDataConnection](http://bit.ly/RTCDataConnection) works fine on following web-browsers: @@ -53,9 +58,9 @@ rtcDataConnection.send( file || data || 'text' ); | ------------- |:-------------:| | Firefox | [Stable](http://www.mozilla.org/en-US/firefox/new/) / [Aurora](http://www.mozilla.org/en-US/firefox/aurora/) / [Nightly](http://nightly.mozilla.org/) | | Google Chrome | [Stable](https://www.google.com/intl/en_uk/chrome/browser/) / [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) / [Beta](https://www.google.com/intl/en/chrome/browser/beta.html) / [Dev](https://www.google.com/intl/en/chrome/browser/index.html?extra=devchannel#eula) | -| Internet Explorer / IE | [Chrome Frame](http://www.google.com/chromeframe) | += #### License -[RTCDataConnection](http://bit.ly/RTCDataConnection) is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[RTCDataConnection](http://bit.ly/RTCDataConnection) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/RTCDataConnection/RTCDataConnection-Manual-Test.html b/RTCDataConnection/RTCDataConnection-Manual-Test.html index e8a691df..711bddf3 100644 --- a/RTCDataConnection/RTCDataConnection-Manual-Test.html +++ b/RTCDataConnection/RTCDataConnection-Manual-Test.html @@ -149,7 +149,7 @@

Copyright © 2013 Muaz Khan<@muazkh>.

-
+
@@ -269,7 +269,7 @@

How to use RTCDataConnection?

- WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @muazkh» diff --git a/RTCDataConnection/RTCDataConnection-Simple-Test.html b/RTCDataConnection/RTCDataConnection-Simple-Test.html index 7166dcdd..25c21368 100644 --- a/RTCDataConnection/RTCDataConnection-Simple-Test.html +++ b/RTCDataConnection/RTCDataConnection-Simple-Test.html @@ -150,7 +150,7 @@

-
+
@@ -247,7 +247,7 @@

How to use RTCDataConnection?

- WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @muazkh» diff --git a/RTCDataConnection/RTCDataConnection-Test.html b/RTCDataConnection/RTCDataConnection-Test.html index 96ee555f..da188f6b 100644 --- a/RTCDataConnection/RTCDataConnection-Test.html +++ b/RTCDataConnection/RTCDataConnection-Test.html @@ -149,7 +149,7 @@

Copyright © 2013 Muaz Khan<@muazkh>.

-
+
@@ -249,7 +249,7 @@

How to use RTCDataConnection?

- WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @muazkh» diff --git a/RTCMultiConnection/README.md b/RTCMultiConnection/README.md index 8f6b794c..c8b6a32c 100644 --- a/RTCMultiConnection/README.md +++ b/RTCMultiConnection/README.md @@ -1,4 +1,4 @@ -# [RTCMultiConnection-v1.4](https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.4.js) Documentation +# [RTCMultiConnection-v1.4](https://www.webrtc-experiment.com/RTCMultiConnection-v1.4.js) Documentation ##### Features @@ -19,8 +19,8 @@ and much more! ##### A Quick Demo using Firebase for Signaling ```html - - + + - - + +

@@ -107,7 +107,7 @@

Muaz Khan<@muazkh>.

-
+

Open new session:

@@ -176,12 +176,12 @@

Send Message

- + \ No newline at end of file diff --git a/RTCMultiConnection/RTCMultiConnection-v1.2-and-earlier.md b/RTCMultiConnection/RTCMultiConnection-v1.2-and-earlier.md index 6e7f70ed..e52eb41b 100644 --- a/RTCMultiConnection/RTCMultiConnection-v1.2-and-earlier.md +++ b/RTCMultiConnection/RTCMultiConnection-v1.2-and-earlier.md @@ -1,4 +1,4 @@ -#### [RTCMultiConnection-v1.2](https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.3.js) Documentation +#### [RTCMultiConnection-v1.2](https://www.webrtc-experiment.com/RTCMultiConnection-v1.3.js) Documentation RTCMultiConnection.js a javascript library supports features like audio/video conferencing; (one-way and one-to-many) broadcasting; screen sharing; data/text/file sharing (of any size); multi-and-manual sessions establishment; users ejection, rejection and presence detection; and more. It automatically keeps session "active" all the time; even if initiator leaves. @@ -25,7 +25,7 @@ RTCMultiConnection.js a javascript library supports features like audio/video co #### First Step: Link the library ```html - + ``` #### Second Step: Start using it! @@ -573,20 +573,25 @@ There are **many other** use-cases of multi-sessions. ---- -#### [RTCMultiConnection Demos](https://webrtc-experiment.appspot.com/#RTCMultiConnection) - -1. [Multi-Session Establishment](https://webrtc-experiment.appspot.com/RTCMultiConnection/multi-session-establishment/) -2. [File Sharing + Text Chat](https://webrtc-experiment.appspot.com/RTCMultiConnection/group-file-sharing-plus-text-chat/) -3. [All-in-One test](https://webrtc-experiment.appspot.com/RTCMultiConnection/) -4. [Video Conferencing](https://webrtc-experiment.appspot.com/RTCMultiConnection/video-conferencing/) -5. [Video Broadcasting](https://webrtc-experiment.appspot.com/RTCMultiConnection/video-broadcasting/) -6. [Audio Conferencing](https://webrtc-experiment.appspot.com/RTCMultiConnection/audio-conferencing/) -7. [Join with/without camera](https://webrtc-experiment.appspot.com/RTCMultiConnection/join-with-or-without-camera/) -8. [Screen Sharing](https://webrtc-experiment.appspot.com/RTCMultiConnection/screen-sharing/) -9. [One-to-One file sharing](https://webrtc-experiment.appspot.com/RTCMultiConnection/one-to-one-filesharing/) -10. [Manual session establishment + extra data transmission](https://webrtc-experiment.appspot.com/RTCMultiConnection/manual-session-establishment-plus-extra-data-transmission/) -11. [Manual session establishment + extra data transmission + video conferencing](https://webrtc-experiment.appspot.com/RTCMultiConnection/manual-session-establishment-plus-extra-data-transmission-plus-videoconferencing/) -12. [Users ejection and presence detection](https://webrtc-experiment.appspot.com/RTCMultiConnection/users-ejection/) +#### [RTCMultiConnection Demos](https://www.webrtc-experiment.com/#RTCMultiConnection) + +| Experiment Name | Demo | Source Code | +| ------------- |-------------|-------------| +| **All-in-One test** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/all-in-one.html) | +| **Video Conferencing** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/videoconferencing.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/videoconferencing.html) | +| **Multi-Session Establishment** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/multi-session-establishment.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/multi-session-establishment.html) | +| **RTCMultiConnection-v1.3 testing demo** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/RTCMultiConnection-v1.3-demo.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/RTCMultiConnection-v1.3-demo.html) | +| **Video Broadcasting** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/video-broadcasting.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/video-broadcasting.html) | +| **File Sharing + Text Chat** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/group-file-sharing-plus-text-chat/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/group-file-sharing-plus-text-chat.html) | +| **Audio Conferencing** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/audioconferencing.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/audioconferencing.html) | +| **Join with/without camera** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/join-with-or-without-camera.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/join-with-or-without-camera.html) | +| **Screen Sharing** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/screen-sharing.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/screen-sharing.html) | +| **One-to-One file sharing** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/one-to-one-filesharing.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/one-to-one-filesharing.html) | +| **Manual session establishment + extra data transmission** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/manual-session-establishment-plus-extra-data-transmission.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/manual-session-establishment-plus-extra-data-transmission.htmlhttps://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/manual-session-establishment-plus-extra-data-transmission.html) | +| **Manual session establishment + extra data transmission + video conferencing** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/manual-session-establishment-plus-extra-data-transmission-plus-videoconferencing.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/manual-session-establishment-plus-extra-data-transmission-plus-videoconferencing.html) | +| **Customizing Bandwidth** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/bandwidth.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/bandwidth.html) | +| **Users ejection and presence detection** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/users-ejection.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/users-ejection.html) | +| **RTCMultiConnection-v1.3 and socket.io** | ---- | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/RTCMultiConnection-v1.3-and-socket.io.html) | ---- @@ -606,4 +611,4 @@ if(stream.direction === RTCDirection.OneWay) {} #### License -[RTCMultiConnection.js](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCMultiConnection) is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[RTCMultiConnection.js](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCMultiConnection) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/RTCMultiConnection/RTCMultiConnection-v1.3.md b/RTCMultiConnection/RTCMultiConnection-v1.3.md index c3867678..25d423c9 100644 --- a/RTCMultiConnection/RTCMultiConnection-v1.3.md +++ b/RTCMultiConnection/RTCMultiConnection-v1.3.md @@ -1,4 +1,4 @@ -#### [RTCMultiConnection-v1.3](https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.3.js) Documentation +#### [RTCMultiConnection-v1.3](https://www.webrtc-experiment.com/RTCMultiConnection-v1.3.js) Documentation Supports features like @@ -24,7 +24,7 @@ and much more. #### First Step: Link the library ```html - + ``` #### Second Step: Start using it! @@ -502,28 +502,31 @@ io.sockets.on('connection', function (socket) { ---- -#### [RTCMultiConnection Demos](https://webrtc-experiment.appspot.com/#RTCMultiConnection) - -1. [Multi-Session Establishment](https://webrtc-experiment.appspot.com/RTCMultiConnection/multi-session-establishment/) -2. [File Sharing + Text Chat](https://webrtc-experiment.appspot.com/RTCMultiConnection/group-file-sharing-plus-text-chat/) -3. [All-in-One test](https://webrtc-experiment.appspot.com/RTCMultiConnection/) -4. [Video Conferencing](https://webrtc-experiment.appspot.com/RTCMultiConnection/video-conferencing/) -5. [Video Broadcasting](https://webrtc-experiment.appspot.com/RTCMultiConnection/video-broadcasting/) -6. [Audio Conferencing](https://webrtc-experiment.appspot.com/RTCMultiConnection/audio-conferencing/) -7. [Join with/without camera](https://webrtc-experiment.appspot.com/RTCMultiConnection/join-with-or-without-camera/) -8. [Screen Sharing](https://webrtc-experiment.appspot.com/RTCMultiConnection/screen-sharing/) -9. [One-to-One file sharing](https://webrtc-experiment.appspot.com/RTCMultiConnection/one-to-one-filesharing/) -10. [Manual session establishment + extra data transmission](https://webrtc-experiment.appspot.com/RTCMultiConnection/manual-session-establishment-plus-extra-data-transmission/) -11. [Manual session establishment + extra data transmission + video conferencing](https://webrtc-experiment.appspot.com/RTCMultiConnection/manual-session-establishment-plus-extra-data-transmission-plus-videoconferencing/) -12. [Users ejection and presence detection](https://webrtc-experiment.appspot.com/RTCMultiConnection/users-ejection/) -13. [Customizing Bandwidth](https://webrtc-experiment.appspot.com/RTCMultiConnection/bandwidth/) -14. [RTCMultiConnection-v1.3 testing demo](https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.3/) +#### [RTCMultiConnection Demos](https://www.webrtc-experiment.com/#RTCMultiConnection) + +| Experiment Name | Demo | Source Code | +| ------------- |-------------|-------------| +| **All-in-One test** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/all-in-one.html) | +| **Video Conferencing** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/videoconferencing.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/videoconferencing.html) | +| **Multi-Session Establishment** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/multi-session-establishment.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/multi-session-establishment.html) | +| **RTCMultiConnection-v1.3 testing demo** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/RTCMultiConnection-v1.3-demo.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/RTCMultiConnection-v1.3-demo.html) | +| **Video Broadcasting** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/video-broadcasting.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/video-broadcasting.html) | +| **File Sharing + Text Chat** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/group-file-sharing-plus-text-chat/) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/group-file-sharing-plus-text-chat.html) | +| **Audio Conferencing** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/audioconferencing.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/audioconferencing.html) | +| **Join with/without camera** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/join-with-or-without-camera.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/join-with-or-without-camera.html) | +| **Screen Sharing** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/screen-sharing.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/screen-sharing.html) | +| **One-to-One file sharing** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/one-to-one-filesharing.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/one-to-one-filesharing.html) | +| **Manual session establishment + extra data transmission** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/manual-session-establishment-plus-extra-data-transmission.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/manual-session-establishment-plus-extra-data-transmission.htmlhttps://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/manual-session-establishment-plus-extra-data-transmission.html) | +| **Manual session establishment + extra data transmission + video conferencing** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/manual-session-establishment-plus-extra-data-transmission-plus-videoconferencing.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/manual-session-establishment-plus-extra-data-transmission-plus-videoconferencing.html) | +| **Customizing Bandwidth** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/bandwidth.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/bandwidth.html) | +| **Users ejection and presence detection** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/users-ejection.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/users-ejection.html) | +| **RTCMultiConnection-v1.3 and socket.io** | ---- | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/RTCMultiConnection-v1.3-and-socket.io.html) | ---- #### Browser Support -[RTCMultiConnection-v1.3.js](https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.3.js) supports following browsers: +[RTCMultiConnection-v1.3.js](https://www.webrtc-experiment.com/RTCMultiConnection-v1.3.js) supports following browsers: | Browser | Support | | ------------- |:-------------| @@ -535,4 +538,4 @@ io.sockets.on('connection', function (socket) { #### License -[RTCMultiConnection-v1.3.js](https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.3.js) is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[RTCMultiConnection-v1.3.js](https://www.webrtc-experiment.com/RTCMultiConnection-v1.3.js) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/RTCMultiConnection/RTCMultiConnection-v1.4-Demos/All-in-One.html b/RTCMultiConnection/RTCMultiConnection-v1.4-Demos/All-in-One.html index 1de17a10..355944d6 100644 --- a/RTCMultiConnection/RTCMultiConnection-v1.4-Demos/All-in-One.html +++ b/RTCMultiConnection/RTCMultiConnection-v1.4-Demos/All-in-One.html @@ -190,7 +190,7 @@ } .eject { - background-image: url('https://webrtc-experiment.appspot.com/images/eject.png') !important; + background-image: url('https://www.webrtc-experiment.com/images/eject.png') !important; background-position: center center !important; background-repeat: no-repeat !important; border-color: white; @@ -208,11 +208,11 @@ document.createElement('footer'); - - + + -

- + diff --git a/RTCMultiConnection/RTCMultiConnection-v1.4-Demos/Renegotiation.html b/RTCMultiConnection/RTCMultiConnection-v1.4-Demos/Renegotiation.html index 344f072f..3b1c45bb 100644 --- a/RTCMultiConnection/RTCMultiConnection-v1.4-Demos/Renegotiation.html +++ b/RTCMultiConnection/RTCMultiConnection-v1.4-Demos/Renegotiation.html @@ -122,8 +122,8 @@ padding: .4em .8em; } - - + + - + diff --git a/RTCMultiConnection/RTCMultiConnection-v1.4-Demos/multi-streams-attachment.html b/RTCMultiConnection/RTCMultiConnection-v1.4-Demos/multi-streams-attachment.html index 8d5d17dd..92084280 100644 --- a/RTCMultiConnection/RTCMultiConnection-v1.4-Demos/multi-streams-attachment.html +++ b/RTCMultiConnection/RTCMultiConnection-v1.4-Demos/multi-streams-attachment.html @@ -1,7 +1,7 @@ -

Multi-streams attachment using RTCMultiConnection / Home

+

Multi-streams attachment using RTCMultiConnection / Home

- - + +

diff --git a/RTCMultiConnection/RTCMultiConnection-v1.5-Demos/All-in-One.html b/RTCMultiConnection/RTCMultiConnection-v1.5-Demos/All-in-One.html index ca304d07..7934d996 100644 --- a/RTCMultiConnection/RTCMultiConnection-v1.5-Demos/All-in-One.html +++ b/RTCMultiConnection/RTCMultiConnection-v1.5-Demos/All-in-One.html @@ -190,7 +190,7 @@ } .eject { - background-image: url('https://webrtc-experiment.appspot.com/images/eject.png') !important; + background-image: url('https://www.webrtc-experiment.com/images/eject.png') !important; background-position: center center !important; background-repeat: no-repeat !important; border-color: white; @@ -207,11 +207,11 @@ document.createElement('article'); document.createElement('footer'); - - + + -
- + diff --git a/RTCMultiConnection/RTCMultiConnection-v1.5-Demos/Renegotiation.html b/RTCMultiConnection/RTCMultiConnection-v1.5-Demos/Renegotiation.html index f84198dd..0653202c 100644 --- a/RTCMultiConnection/RTCMultiConnection-v1.5-Demos/Renegotiation.html +++ b/RTCMultiConnection/RTCMultiConnection-v1.5-Demos/Renegotiation.html @@ -122,8 +122,8 @@ padding: .4em .8em; } - - + + - + diff --git a/RTCMultiConnection/RTCMultiConnection-v1.5-experimental.md b/RTCMultiConnection/RTCMultiConnection-v1.5-experimental.md index 81855188..f672d374 100644 --- a/RTCMultiConnection/RTCMultiConnection-v1.5-experimental.md +++ b/RTCMultiConnection/RTCMultiConnection-v1.5-experimental.md @@ -1,4 +1,4 @@ -##### [RTCMultiConnection-v1.5.js](https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.5.js) Documentation (Experimental Release) +##### [RTCMultiConnection-v1.5.js](https://www.webrtc-experiment.com/RTCMultiConnection-v1.5.js) Documentation (Experimental Release) Supports features like @@ -25,7 +25,7 @@ and much more. ##### First Step: Link the library ```html - + ``` ##### Second Step: Start using it! @@ -566,19 +566,19 @@ io.sockets.on('connection', function (socket) { = -##### Demos using [RTCMultiConnection-v1.5](https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.5.js) library +##### Demos using [RTCMultiConnection-v1.5](https://www.webrtc-experiment.com/RTCMultiConnection-v1.5.js) library | Experiment Name | Demo | Source Code | | ------------- |-------------|-------------| -| **All-in-One test** | [Demo](https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.5-Demos/All-in-One.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-v1.5-Demos/All-in-One.html) | -| **Renegotiation & Mute/UnMute/Stop** | [Demo](https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.5-Demos/Renegotiation.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-v1.5-Demos/Renegotiation.html) | -| **Video-Conferencing** | [Demo](https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.5-Demos/Video-Conferencing.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-v1.5-Demos/Video-Conferencing.html) | +| **All-in-One test** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection-v1.5-Demos/All-in-One.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-v1.5-Demos/All-in-One.html) | +| **Renegotiation & Mute/UnMute/Stop** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection-v1.5-Demos/Renegotiation.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-v1.5-Demos/Renegotiation.html) | +| **Video-Conferencing** | [Demo](https://www.webrtc-experiment.com/RTCMultiConnection-v1.5-Demos/Video-Conferencing.html) | [Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-v1.5-Demos/Video-Conferencing.html) | = ##### Browser Support -[RTCMultiConnection-v1.5.js](https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.5.js) supports following browsers: +[RTCMultiConnection-v1.5.js](https://www.webrtc-experiment.com/RTCMultiConnection-v1.5.js) supports following browsers: | Browser | Support | | ------------- |:-------------| @@ -590,4 +590,4 @@ io.sockets.on('connection', function (socket) { ##### License -[RTCMultiConnection-v1.5.js](https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.5.js) is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[RTCMultiConnection-v1.5.js](https://www.webrtc-experiment.com/RTCMultiConnection-v1.5.js) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/RTCMultiConnection/index.html b/RTCMultiConnection/index.html index 9aeeabd3..355944d6 100644 --- a/RTCMultiConnection/index.html +++ b/RTCMultiConnection/index.html @@ -1,8 +1,7 @@  - - RTCMultiConnection All-in-One Test ® Muaz Khan + RTCMultiConnection-v1.4 All-in-One Test ® Muaz Khan @@ -12,84 +11,84 @@ @@ -202,38 +207,43 @@ document.createElement('article'); document.createElement('footer'); - - + + + - -
↑ WEBRTC EXPERIMENTS +
↑ WEBRTC EXPERIMENTS -

- RTCMultiConnection - all-in-one test -

+

+ RTCMultiConnection-v1.4 + all-in-one test +

Copyright © 2013 Muaz - Khan<@muazkh>. + Khan<@muazkh>.

-
+
-

Open New Session:

+

Open New Session:

- +
- @@ -271,64 +281,85 @@

Remote Media Streams

-

Local Media Stream

+

Local Media Stream

-

Share Files

+
+

Share Files


-

Text Chat

+

Text Chat

@@ -263,7 +273,7 @@

Text Chat

-

Remote Media Streams

+

Remote Media Streams



-

Getting started with RTCMultiConnection

-
-<script src="https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.2.js"></script>
-<script>
-    var connection = new RTCMultiConnection();
-    connection.open('session-id');    // open a new session
-    connection.connect('session-id'); // connect a pre-created session
-
-    connection.eject('user-id');                // eject a specific user
-    connection.leave();                         // leave the session
-    connection.onleave = function(userid) { }   // if someone leaves
-</script>
-
- -
-
-

RTCMultiConnection - features:

- -
    -
  1. Users ejection, rejection and presence detection support
  2. -
  3. Multi-sessions establishment as well as manual-sessions establishment
  4. -
  5. Sessions will be active all the time; even if initiator leaves!
  6. -
  7. Data i.e. Text/File sharing (of any size)
  8. -
  9. Screen sharing, audio-video conferencing; file sharing and one-way broadcasting
  10. -
-
-
-

What is RTCMultiConnection?

- -
-
RTCMultiConnection.js a javascript library supports features like audio/video conferencing; (one-way and one-to-many) broadcasting; screen sharing; data/text/file sharing (of any size); multi-and-manual sessions establishment; users ejection, rejection - and presence detection; and more. It automatically keeps session "active" all the time; even if initiator leaves. -
-
-

- Source code - and Documentation on Github! -

- -
-
-
-

Feedback

+ +
+

Feedback

- +
- + - - \ No newline at end of file + diff --git a/RTCPeerConnection/README.md b/RTCPeerConnection/README.md index e205be51..f70d53bd 100644 --- a/RTCPeerConnection/README.md +++ b/RTCPeerConnection/README.md @@ -1,115 +1,166 @@ ##### RTCPeerConnection Documentation -**RTCPeerConnection.js** is a JavaScript wrapper library for **RTCWeb PeerConnection APIs**. +**RTCPeerConnection.js** is a js-wrapper library for **RTCWeb APIs**. -It not only simplifies coding but also handles complex cross browser implementations. - -= - -##### Getting started with RTCPeerConnection library - -First of all; library to be linked! +It not only simplifies coding but also handles complex cross browser implementations. ```html - + ``` **RTCPeerConnection** object's structure looks like this: ```javascript -var peer = RTCPeerConnection({ - attachStream: localMediaStream, - offerSDP: RTCSessionDescription, +var peer = RTCPeerConnection(configuration); +``` + +Actually you're calling a method; and passing some data over it; and that's it! + +`configuration` is an object contains a few properties and methods: + +```javascript +var configuration = { + attachStream: MediaStream, + attachStreams: [MediaStream_1, MediaStream_2, MediaStream_3], + + offerSDP: offerSDP_sent_from_offerer, - onRemmoteSteam: function (stream) {}, + onICE: function (candidate) {}, + onRemoteStream: function (stream) {}, + onRemoteStreamEnded: function (stream) {}, onOfferSDP: function (offerSDP) {}, onAnswerSDP: function (answerSDP) {}, onChannelMessage: function (event) {}, onChannelOpened: function (_RTCDataChannel) {} -}); +}; ``` = -##### Exploring RTCPeerConnection object +#### attachStream -You're passing a configuration object that contains a few methods and objects. +The `MediaStream` you want to attach. To understand it better; `RTCPeerConnection` will use it like this: -= +```javascript +var configuration = { + attachStream: MediaStream +}; +``` -##### `attachStream` += -This object must contain `LocalMediaStream` object that will be attached to share your audio/video stream. You can skip it if you want to implement one-way streaming. +#### attachStreams -Behind the scene, **RTCPeerConnection** is calling `addStream` method: +You can attach multiple streams too; see [this demo](https://www.webrtc-experiment.com/demos/screen-and-video-from-single-peer.html). ```javascript -peerConnection.addStream(attachStream); +var configuration = { + attachStreams: [screenStream, audioStream, videoStream] +}; ``` = -##### `offerSDP` +#### offerSDP -In one-to-one media session; this object will be used by **answerer** as soon as he will get **offer sdp** sent from **offerer**. Actually you're adding **offer sdp** here: +This object is only useful for `answerer`. As soon as you'll receive `offer sdp` sent by `offerer`; use that `offer sdp` like this: ```javascript -offerSDP = { - type: 'offer', - sdp: '------' +configuration.offerSDP = offerSDP_sent_by_offerer; +``` + +Where `offerSDP_sent_by_offerer` MUST be an `object` and MUST look like this: + +```javascript +{ + type: 'offer', + sdp: '.........offerer sdp.........' } ``` = -##### `onRemmoteSteam` +#### onICE + +`RTCPeerConnection` will call this method on each new ICE candidate. `RTCPeerConnection` will pass `RTCIceCandidate` object over this method: + +```javascript +onICE: function (_RTCIceCandidate) { + // _RTCIceCandidate.candidate + // _RTCIceCandidate.sdpMLineIndex + // etc. +}; +``` + +You can use SIP or any other signaling method to send these ICE candidates on the other end. + += + +#### onRemoteStream -This method is invoked as soon as **remote media stream** is added in peer connection object. +`RTCPeerConnection` will call this method as soon as `peer.onaddstream` event will fire. `RTCPeerConnection` will pass `RemoteStream` object over this method: ```javascript onRemmoteSteam: function (remoteMediaStream) { - // if(firefox) remoteVideo.mozSrcObject = remoteMediaStream; - // if(firefox) remoteVideo.src = window.URL.createObjectURL(remoteMediaStream); - - // if(chrome) remoteVideo.src = window.webkitURL.createObjectURL(remoteMediaStream); + // if(moz) remoteVideo.mozSrcObject = remoteMediaStream; + // if(!moz) remoteVideo.src = window.webkitURL.createObjectURL(remoteMediaStream); } ``` = -##### `onOfferSDP` +#### onRemoteStreamEnded -Use this method on the **offerer**'s side to get access to the **offer-sdp** generated using `peerConnection.createOffer` method: +It is fired when remote stream stops flowing. + +```javascript +onRemoteStreamEnded: function (remoteMediaStream) { + // var video = document.getElementById(remoteMediaStream.id); + // if(video) video.parentNode.removeChild(video); +} +``` + += + +#### onOfferSDP + +RTCPeerConnection will call this method after successfully creating offer SDP. An object of type `RTCSessionDescription` will be passed over this method: ```javascript onOfferSDP: function (offerSDP) { // offerSDP.type === 'offer' // offerSDP.sdp + // to POST using XHR: JSON.stringify(offerSDP) } ``` +Pass offer sdp on the answerer's side using your own preferred signaling method. + = -##### `onAnswerSDP` +#### onAnswerSDP -As soon as offerer sends you **offer-sdp** using his preferred signaling method; you should initiate peer connection for **answerer**. That peer connection object will create **answer-sdp** accordingly. To get access to that **answer-sdp**, use `onAnswerSDP` method: +RTCPeerConnection will call this method after successfully creating answer SDP. An object of type `RTCSessionDescription` will be passed over this method: ```javascript onAnswerSDP: function (answerSDP) { // answerSDP.type === 'answer' // answerSDP.sdp + // to POST using XHR: JSON.stringify(answerSDP) } ``` -**RTCPeerConnection** library also allows you establish data connection between peers. +Pass `answer sdp` on the `offerer's` side using your own preferred signaling method. = -##### `onChannelMessage` +#### onChannelMessage -Use this method to get access to all text messages or data transferred over WebRTC data channels. +Pass this method only if you want to create/open (cross browser RTC) data channels to share data/text or files. + +`RTCPeerConnection` object will call this method as soon as new data-message will be received over SCTP or RTP data ports. ```javascript onChannelMessage: function (event) { @@ -120,9 +171,9 @@ onChannelMessage: function (event) { = -##### `onChannelOpened` +#### onChannelOpened -Use this method if you want to be alerted when data ports get open. +RTCPeerConnection object will call this method as soon as SCTP/RTP data ports will successfully get open. ```javascript onChannelOpened: function (channel) { @@ -132,44 +183,60 @@ onChannelOpened: function (channel) { = -##### Public instance methods - -**RTCPeerConnection** library has a few instance methods to be called later at appropriate time. +#### Public instance methods -Here is how to get access to those instance methods: +RTCPeerConnection object has some public methods/objects that can be used/called later. ```javascript var peer = RTCPeerConnection(configuration); +``` + +You can use `peer` object to call/use those instance methods. -// using "peer" object; you can call those instance methods -peer.addAnswerSDP(...); += + +#### Add ICE candidates + +As soon as you'll receive ICE candidate sent by other peer; add it like this: + +```javascript +peer.addICE({ + sdpMLineIndex: websocketMessage.sdpMLineIndex, + candidate: websocketMessage.candidate +}); ``` = -##### `addAnswerSDP` +#### Add Answer SDP -Use `addAnswerSDP` instance method to add **answer-sdp** sent by answerer. This method should only be used in offerer's side. +Whenever offerer will receive `answer sdp` sent by answerer; add that `answer sdp` like this: ```javascript peer.addAnswerSDP(answerSDP); +``` -// answer-sdp looks like this: +Where `answerSDP` must look like this: + +```javascript { type: 'answer', - sdp: '-----' + sdp: '' } ``` = -##### How to send data over WebRTC Data Channels? +#### Send data/text/file over RTCDataChannel + +On **Firefox**, you can send files directly; because Firefox supports `binaryType` for `RTCDataChannel`. + +On Chrome, `binaryType` will be supported soon. -`peer` object has another instance method named `sendData` that allows you send only text-messages on chrome and blobs, buffers, and objects on firefox. +You can send text message like this: ```javascript peer.sendData('hi there, I am a text message'); -peer.channel.send('hi there, I am a text message'); /* to send an object */ var object = { @@ -180,50 +247,75 @@ var object = { _function: function() {} }; var stringified = JSON.stringify(object); - peer.sendData(stringified); -peer.channel.send(stringified); +``` -// because firefox accepts blobs too, send file directly -peer.sendData(file); +You can send same text message like this too: + +```javascript +peer.channel.send(hi there, I am a text message'); ``` -= +Where `channel` is `RTCDataChannel` object. + +On Firefox, you can send file directly like this: -##### `onChannelClosed` +```javascript +peer.sendData(file); +// or otherwise: +// peer.channel.send(file); +``` -Use this method to be alerted when data ports get close. +You can access `[webkit|moz]RTCPeerConnection` object too to add additional events or do extra stuff: ```javascript -onChannelClosed: function (event) { } +var rtcPeerConnection = peer.peer; +// rtcPeerConnection.getLocalStreams()[0].stop() +// rtcPeerConnection.getAudioTracks() +// rtcPeerConnection.getVideoTracks() ``` = -##### `onChannelError` +#### Catching RTCDataChannel Errors -Use this method to catch errors expected to be occur in data channels. +To get alerted whenever a data port closes or throws an error message: ```javascript -onChannelError: function (event) { } +var configuration = { + onChannelClosed: function (event) {}, + onChannelError: function (event) {} +}; ``` = -##### `getUserMedia` +#### getUserMedia -Use cross-browser `getUserMedia` function to get access to camera/microphone. +This [js-wrapper for RTCWeb API](https://bit.ly/RTCPeerConnection-v1-4) file also contains a **cross-browser** `getUserMedia` function. ```javascript -getUserMedia({ +getUserMedia(mediaConfiguration); +``` + +Where `mediaConfiguration` object looks like this: + +```javascript +var mediaConfiguration = { video: HTMLAudioElement || HTMLVideoElement, constraints: {}, onsuccess: function (localMediaStream) {}, onerror: function (event) {} -}); +}; ``` -Use **constraints** to pass custom constraints like `chromeMediaSource` etc. +Only `onsuccess` is mandatory. All other three are optional. + +You can pass `video` element to play it as soon as `navigator.getUserMedia` API will give access to `LocalMediaStream`. + +`constraints` object is very useful when applying custom constraints. + +For example to capture screen in Google Chrome Canary: ```javascript var screen_constraints = { @@ -233,28 +325,81 @@ var screen_constraints = { optional: [] }; -getUserMedia({ +var mediaConfiguration = { constraints: { - audio: false, + audio: false, /* MUST be false! */ video: screen_constraints } -}); +}; +``` + += + +#### STUN/TURN servers and customization + +RTCPeerConnection object uses `STUN` by default. + +To understand it better; see how it is using `STUN` server: + +```javascript +var STUN = { + iceServers: [{ + url: !moz ? 'stun:stun.l.google.com:19302' : 'stun:23.21.150.121' + }] +}; ``` +On chrome; it is using: `stun:stun.l.google.com:19302` + +And on Firefox; it is using: `stun:23.21.150.121` + + +`RTCPeerConnection` object will use this `TURN` server: + +```javascript +var TURN = { + iceServers: [{ + url: 'turn:webrtc%40live.com@numb.viagenie.ca', + credential: 'muazkh' + }] +}; +``` + += + +#### You MUST keep in mind that... + +1. `TURN` is not yet implemented in **Firefox**. +2. `RTCDataChannel` is not yet interoperable +3. Old Firefox sometimes fails on `non-DNS STUN` servers + += + +#### How to use RTCPeerConnection? + +[Here is a simple, step-by-step guide](https://www.webrtc-experiment.com/docs/how-to-use-rtcpeerconnection-js-v1.1.html) that not only explains how to exchange SDP/ICE but also explains "How to write a realtime one-to-one WebRTC video chatting app using socket.io or WebSockets". + +In each WebRTC session; there are two circumstances: + +1. One party creates offer +2. One party creates answer + +You just need to exchange offer and answer between them using your preferable signaling method like XHR/socket.io/WebSockets/etc. + = ##### History -1. [RTCPeerConnection-v1.6.js](https://webrtc-experiment.appspot.com/RTCPeerConnection-v1.6.js) -2. [RTCPeerConnection-v1.5.js](https://webrtc-experiment.appspot.com/RTCPeerConnection-v1.5.js) -3. [RTCPeerConnection-v1.4.js](https://webrtc-experiment.appspot.com/lib/RTCPeerConnection-v1.4.js) -4. [RTCPeerConnection-v1.3.js](https://webrtc-experiment.appspot.com/lib/RTCPeerConnection-v1.3.js) -5. [RTCPeerConnection-v1.2.js](https://webrtc-experiment.appspot.com/lib/RTCPeerConnection-v1.2.js) -6. [RTCPeerConnection-v1.1.js](https://webrtc-experiment.appspot.com/lib/RTCPeerConnection-v1.1.js) -7. [RTCPeerConnection.js](https://webrtc-experiment.appspot.com/RTCPeerConnection.js) +1. [RTCPeerConnection-v1.6.js](https://www.webrtc-experiment.com/RTCPeerConnection-v1.6.js) +2. [RTCPeerConnection-v1.5.js](https://www.webrtc-experiment.com/RTCPeerConnection-v1.5.js) +3. [RTCPeerConnection-v1.4.js](https://www.webrtc-experiment.com/lib/RTCPeerConnection-v1.4.js) +4. [RTCPeerConnection-v1.3.js](https://www.webrtc-experiment.com/lib/RTCPeerConnection-v1.3.js) +5. [RTCPeerConnection-v1.2.js](https://www.webrtc-experiment.com/lib/RTCPeerConnection-v1.2.js) +6. [RTCPeerConnection-v1.1.js](https://www.webrtc-experiment.com/lib/RTCPeerConnection-v1.1.js) +7. [RTCPeerConnection.js](https://www.webrtc-experiment.com/RTCPeerConnection.js) = ##### License -**RTCPeerConnection.js** is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +**RTCPeerConnection.js** is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/RTCPeerConnection/RTCPeerConnection-v1.5.js b/RTCPeerConnection/RTCPeerConnection-v1.5.js index c4ca5796..41f0ba82 100644 --- a/RTCPeerConnection/RTCPeerConnection-v1.5.js +++ b/RTCPeerConnection/RTCPeerConnection-v1.5.js @@ -1,11 +1,10 @@ -/* - 2013, @muazkh - github.com/muaz-khan - MIT License - https://webrtc-experiment.appspot.com/licence/ - Documentation - https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCPeerConnection -*/ - -window.moz = !! navigator.mozGetUserMedia; -var RTCPeerConnection = function (options) { +// 2013, @muazkh - github.com/muaz-khan +// MIT License - https://webrtc-experiment.appspot.com/licence/ +// Documentation - https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCPeerConnection + +window.moz = !!navigator.mozGetUserMedia; + +function RTCPeerConnection(options) { var w = window, PeerConnection = w.mozRTCPeerConnection || w.webkitRTCPeerConnection, SessionDescription = w.mozRTCSessionDescription || w.RTCSessionDescription, @@ -25,7 +24,7 @@ var RTCPeerConnection = function (options) { }; if (!moz && !options.iceServers) { - if (parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 28) + if (parseInt(navigator.userAgent.match( /Chrom(e|ium)\/([0-9]+)\./ )[2]) >= 28) TURN = { url: 'turn:turn.bistri.com:80', credential: 'homeo', @@ -50,27 +49,41 @@ var RTCPeerConnection = function (options) { }]; } - var peerConnection = new PeerConnection(iceServers, optional); + var peer = new PeerConnection(iceServers, optional); openOffererChannel(); - peerConnection.onicecandidate = onicecandidate; - if (options.attachStream) peerConnection.addStream(options.attachStream); - peerConnection.onaddstream = onaddstream; + peer.onicecandidate = function(event) { + if (event.candidate) + options.onICE(event.candidate); + }; + + // attachStream = MediaStream; + if (options.attachStream) peer.addStream(options.attachStream); - function onicecandidate(event) { - if (!event.candidate || !peerConnection) return; - if (options.onICE) options.onICE(event.candidate); + // attachStreams[0] = audio-stream; + // attachStreams[1] = video-stream; + // attachStreams[2] = screen-capturing-stream; + if (options.attachStreams && options.attachStream.length) { + var streams = options.attachStreams; + for (var i = 0; i < streams.length; i++) { + peer.addStream(streams[i]); + } } - var remoteStreamEventFired = false; + peer.onaddstream = function(event) { + var remoteMediaStream = event.stream; - function onaddstream(event) { - info('------------onaddstream'); - if (remoteStreamEventFired || !event || !options.onRemoteStream) return; - remoteStreamEventFired = true; - options.onRemoteStream(event.stream); - } + // onRemoteStreamEnded(MediaStream) + remoteMediaStream.onended = function() { + if (options.onRemoteStreamEnded) options.onRemoteStreamEnded(remoteMediaStream); + }; + + // onRemoteStream(MediaStream) + if (options.onRemoteStream) options.onRemoteStream(remoteMediaStream); + + console.debug('on:add:stream', remoteMediaStream); + }; var constraints = options.constraints || { optional: [], @@ -80,182 +93,175 @@ var RTCPeerConnection = function (options) { } }; - var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''), - extractedChars = ''; - - function getChars() { - extractedChars += chars[parseInt(Math.random() * 40)] || ''; - if (extractedChars.length < 40) getChars(); - - return extractedChars; - } - - function getInteropSDP(sdp) { - // for audio-only streaming: multiple-crypto lines are not allowed - if (options.onAnswerSDP) - sdp = sdp.replace(/(a=crypto:0 AES_CM_128_HMAC_SHA1_32)(.*?)(\r\n)/g, ''); - - - var inline = getChars() + '\r\n' + (extractedChars = ''); - sdp = sdp.indexOf('a=crypto') == -1 ? sdp.replace(/c=IN/g, - 'a=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:' + inline + - 'c=IN') : sdp; - - sdp = setBandwidth(sdp); - - if (options.offerSDP) { - info('\n--------offer sdp provided by offerer\n'); - info(options.offerSDP.sdp); - } - - info(options.onOfferSDP ? '\n--------offer\n' : '\n--------answer\n'); - info('sdp: ' + sdp); - - return sdp; - } + // onOfferSDP(RTCSessionDescription) function createOffer() { if (!options.onOfferSDP) return; - peerConnection.createOffer(function (sessionDescription) { - sessionDescription.sdp = getInteropSDP(sessionDescription.sdp); - peerConnection.setLocalDescription(sessionDescription); + peer.createOffer(function(sessionDescription) { + sessionDescription.sdp = serializeSdp(sessionDescription.sdp); + peer.setLocalDescription(sessionDescription); options.onOfferSDP(sessionDescription); }, null, constraints); } + // onAnswerSDP(RTCSessionDescription) + function createAnswer() { if (!options.onAnswerSDP) return; - options.offerSDP = new SessionDescription(options.offerSDP); - peerConnection.setRemoteDescription(options.offerSDP); - - peerConnection.createAnswer(function (sessionDescription) { - sessionDescription.sdp = getInteropSDP(sessionDescription.sdp); - peerConnection.setLocalDescription(sessionDescription); + peer.setRemoteDescription(new SessionDescription(options.offerSDP)); + peer.createAnswer(function(sessionDescription) { + sessionDescription.sdp = serializeSdp(sessionDescription.sdp); + peer.setLocalDescription(sessionDescription); options.onAnswerSDP(sessionDescription); }, null, constraints); } - function setBandwidth(sdp) { - // Firefox has no support of "b=AS" - if (moz) return sdp; + // if Mozilla Firefox & DataChannel; offer/answer will be created later + if ((options.onChannelMessage && !moz) || !options.onChannelMessage) { + createOffer(); + createAnswer(); + } + + // DataChannel Bandwidth + + function setBandwidth(sdp) { // remove existing bandwidth lines - sdp = sdp.replace(/b=AS([^\r\n]+\r\n)/g, ''); + sdp = sdp.replace( /b=AS([^\r\n]+\r\n)/g , ''); + sdp = sdp.replace( /a=mid:data\r\n/g , 'a=mid:data\r\nb=AS:1638400\r\n'); + + return sdp; + } + + // old: FF<>Chrome interoperability management + + function getInteropSDP(sdp) { + var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''), + extractedChars = ''; + + function getChars() { + extractedChars += chars[parseInt(Math.random() * 40)] || ''; + if (extractedChars.length < 40) + getChars(); + + return extractedChars; + } + + // for audio-only streaming: multiple-crypto lines are not allowed + if (options.onAnswerSDP) + sdp = sdp.replace( /(a=crypto:0 AES_CM_128_HMAC_SHA1_32)(.*?)(\r\n)/g , ''); - sdp = sdp.replace(/a=mid:audio\r\n/g, 'a=mid:audio\r\nb=AS:50\r\n'); - sdp = sdp.replace(/a=mid:video\r\n/g, 'a=mid:video\r\nb=AS:256\r\n'); - sdp = sdp.replace(/a=mid:data\r\n/g, 'a=mid:data\r\nb=AS:1638400\r\n'); + var inline = getChars() + '\r\n' + (extractedChars = ''); + sdp = sdp.indexOf('a=crypto') == -1 ? sdp.replace( /c=IN/g , + 'a=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:' + inline + + 'c=IN') : sdp; return sdp; } - if ((options.onChannelMessage && !moz) || !options.onChannelMessage) { - createOffer(); - createAnswer(); + function serializeSdp(sdp) { + if (!moz) sdp = setBandwidth(sdp); + sdp = getInteropSDP(sdp); + console.debug(sdp); + return sdp; } + // DataChannel management var channel; function openOffererChannel() { - if (!options.onChannelMessage || (moz && !options.onOfferSDP)) return; + if (!options.onChannelMessage || (moz && !options.onOfferSDP)) + return; _openOffererChannel(); - if (moz && !options.attachStream) { + if (moz) { navigator.mozGetUserMedia({ - audio: true, - fake: true - }, function (stream) { - peerConnection.addStream(stream); - createOffer(); - }, useless); + audio: true, + fake: true + }, function(stream) { + peer.addStream(stream); + createOffer(); + }, useless); } } function _openOffererChannel() { - channel = peerConnection.createDataChannel( - options.channel || 'RTCDataChannel', - moz ? {} : { - reliable: false - }); + channel = peer.createDataChannel(options.channel || 'RTCDataChannel', moz ? { } : { + reliable: false + }); - if (moz) channel.binaryType = 'blob'; + if (moz) + channel.binaryType = 'blob'; setChannelEvents(); } function setChannelEvents() { - channel.onmessage = function (event) { + channel.onmessage = function(event) { if (options.onChannelMessage) options.onChannelMessage(event); }; - channel.onopen = function () { + channel.onopen = function() { if (options.onChannelOpened) options.onChannelOpened(channel); }; - channel.onclose = function (event) { + channel.onclose = function(event) { if (options.onChannelClosed) options.onChannelClosed(event); console.warn('WebRTC DataChannel closed', event); }; - channel.onerror = function (event) { - console.error(event); + channel.onerror = function(event) { if (options.onChannelError) options.onChannelError(event); }; } - if (options.onAnswerSDP && moz) openAnswererChannel(); + if (options.onAnswerSDP && moz && options.onChannelMessage) + openAnswererChannel(); function openAnswererChannel() { - peerConnection.ondatachannel = function (_channel) { - channel = _channel; + peer.ondatachannel = function(event) { + channel = event.channel; channel.binaryType = 'blob'; setChannelEvents(); }; - if (moz && !options.attachStream) { + if (moz) { navigator.mozGetUserMedia({ - audio: true, - fake: true - }, function (stream) { - peerConnection.addStream(stream); - createAnswer(); - }, useless); + audio: true, + fake: true + }, function(stream) { + peer.addStream(stream); + createAnswer(); + }, useless); } } - function useless() {} - - function info(information) { - console.log(information); + function useless() { } return { - addAnswerSDP: function (sdp) { - info('--------adding answer sdp:'); - info(sdp.sdp); - - sdp = new SessionDescription(sdp); - peerConnection.setRemoteDescription(sdp); + addAnswerSDP: function(sdp) { + peer.setRemoteDescription(new SessionDescription(sdp)); }, - addICE: function (candidate) { - info(candidate.candidate); - peerConnection.addIceCandidate(new IceCandidate({ + addICE: function(candidate) { + peer.addIceCandidate(new IceCandidate({ sdpMLineIndex: candidate.sdpMLineIndex, candidate: candidate.candidate })); }, - peer: peerConnection, + peer: peer, channel: channel, - sendData: function (message) { + sendData: function(message) { channel && channel.send(message); } }; -}; +} +// getUserMedia var video_constraints = { - mandatory: {}, + mandatory: { }, optional: [] }; @@ -264,11 +270,11 @@ function getUserMedia(options) { media; n.getMedia = n.webkitGetUserMedia || n.mozGetUserMedia; n.getMedia(options.constraints || { - audio: true, - video: video_constraints - }, streaming, options.onerror || function (e) { - console.error(e); - }); + audio: true, + video: video_constraints + }, streaming, options.onerror || function(e) { + console.error(e); + }); function streaming(stream) { var video = options.video; diff --git a/RTCall/README.md b/RTCall/README.md index 2de5624a..d1f6e3e4 100644 --- a/RTCall/README.md +++ b/RTCall/README.md @@ -1,4 +1,4 @@ -#### [RTCall.js](https://webrtc-experiment.appspot.com/RTCall/) — A library for Browser-to-Browser audio-only calling +#### [RTCall.js](https://www.webrtc-experiment.com/RTCall/) — A library for Browser-to-Browser audio-only calling Why RTCall.js? @@ -7,14 +7,16 @@ Why RTCall.js? The entire process is browser to browser. ----- += #### First Step: Link the library ```html - + ``` += + #### Second Step: Start using it! Remember: All lines are optional! @@ -23,6 +25,8 @@ Remember: All lines are optional! call = new RTCall(); ``` += + #### `onincomingcall` `onincomingcall` fires each time if someone calls you: @@ -33,6 +37,8 @@ call.onincomingcall = function(caller) { }; ``` += + #### `oncustomer` `oncustomer` is fired only for `admin`: @@ -43,6 +49,8 @@ call.oncustomer = function(customer) { }; ``` += + #### `onstream` `onstream` returns remote media stream: @@ -58,6 +66,8 @@ call.onstream = function(e) { }; ``` += + #### `init` initializing `RTCall` object: @@ -66,6 +76,8 @@ initializing `RTCall` object: call.init(); ``` += + #### call Admin can call customers using their caller-ids. Remeber, customers caller-ids are always passed over `oncustomer` method: @@ -82,6 +94,8 @@ Customers can call the admin too; using admin's `caller-id`: call.call('admin-caller-id'); ``` += + #### `receive` `receiver-id` is always passed over `onincomingcall`: @@ -92,6 +106,8 @@ call.onincomingcall = function(caller) { }; ``` += + #### `admin` By default: `admin` is `false`: @@ -100,27 +116,26 @@ By default: `admin` is `false`: call.admin = true; ``` ----- += #### Demo -1. https://webrtc-experiment.appspot.com/RTCall/ +1. https://www.webrtc-experiment.com/RTCall/ ----- += #### Browser Support -[RTCall.js](https://webrtc-experiment.appspot.com/RTCall/) supports following browsers: +[RTCall.js](https://www.webrtc-experiment.com/RTCall/) supports following browsers: | Browser | Support | | ------------- |:-------------| | Firefox | [Stable](http://www.mozilla.org/en-US/firefox/new/) / [Aurora](http://www.mozilla.org/en-US/firefox/aurora/) / [Nightly](http://nightly.mozilla.org/) | | Google Chrome | [Stable](https://www.google.com/intl/en_uk/chrome/browser/) / [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) / [Beta](https://www.google.com/intl/en/chrome/browser/beta.html) / [Dev](https://www.google.com/intl/en/chrome/browser/index.html?extra=devchannel#eula) | -| Internet Explorer / IE | [Chrome Frame](http://www.google.com/chromeframe) | | Android | [Chrome Beta](https://play.google.com/store/apps/details?id=com.chrome.beta&hl=en) | ----- += #### License -[RTCall.js](https://webrtc-experiment.appspot.com/RTCall/) is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[RTCall.js](https://www.webrtc-experiment.com/RTCall/) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/RTCall/index.html b/RTCall/index.html index 478a77c0..e11df9ff 100644 --- a/RTCall/index.html +++ b/RTCall/index.html @@ -113,7 +113,7 @@ padding-left: 4em; background-position: center left; color: white; - background-image: url(https://webrtc-experiment.appspot.com/images/call.png); + background-image: url(https://www.webrtc-experiment.com/images/call.png); } button:hover { @@ -164,12 +164,12 @@ document.createElement('footer'); - - + + - ↑ WEBRTC EXPERIMENTS + ↑ WEBRTC EXPERIMENTS
@@ -180,7 +180,7 @@

Copyright © 2013 Muaz Khan<@muazkh>.
-
+
@@ -352,7 +352,7 @@

Want to call admin?

How to make audio-only calls using RTCall?

-<script src="https://webrtc-experiment.appspot.com/RTCall.js"></script>
+<script src="https://www.webrtc-experiment.com/RTCall.js"></script>
 
@@ -404,7 +404,7 @@ 

WebRTC Experiments! © + WebRTC Experiments! © , 2013 » Email» @muazkh» @@ -412,6 +412,6 @@

+ \ No newline at end of file diff --git a/RecordRTC/README.md b/RecordRTC/README.md index 517a43b5..d604d59a 100644 --- a/RecordRTC/README.md +++ b/RecordRTC/README.md @@ -1,6 +1,6 @@ -#### RecordRTC: WebRTC audio/video recording / [Demo](https://webrtc-experiment.appspot.com/RecordRTC/) +#### RecordRTC: WebRTC audio/video recording / [Demo](https://www.webrtc-experiment.com/RecordRTC/) -[RecordRTC](https://webrtc-experiment.appspot.com/RecordRTC.js) allows you record audio and/or video streams. +[RecordRTC](https://www.webrtc-experiment.com/RecordRTC.js) allows you record audio and/or video streams. Note: For Mozilla Firefox; you can try [AudioVideoRecorder.js](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/AudioVideoRecorder). @@ -22,7 +22,7 @@ Other features are: ##### How to use RecordRTC? ```html - + ``` = @@ -48,7 +48,7 @@ recorder.stopVideo(function(videoURL) { ##### How to record animated GIF image? ```html - + ``` ```javascript @@ -82,7 +82,7 @@ recorder.stopGIF(function(gifURL) { ##### How to record audio? ```html - + ``` ```javascript @@ -236,7 +236,7 @@ Stereo audio is only supported for WAV files. ##### Browser Support -[RecordRTC Demo](https://webrtc-experiment.appspot.com/RecordRTC/) works fine on following web-browsers: +[RecordRTC Demo](https://www.webrtc-experiment.com/RecordRTC/) works fine on following web-browsers: | Browser | Support | | ------------- |-------------| @@ -259,4 +259,4 @@ Stereo audio is only supported for WAV files. ##### License -[RecordRTC](https://webrtc-experiment.appspot.com/RecordRTC/) is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[RecordRTC](https://www.webrtc-experiment.com/RecordRTC/) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/RecordRTC/index.html b/RecordRTC/index.html index e01c4cb0..7bd14ef7 100644 --- a/RecordRTC/index.html +++ b/RecordRTC/index.html @@ -122,14 +122,14 @@ ::-moz-selection { background: #ccc; } - - - + + +

- RecordRTC: WebRTC + RecordRTC: WebRTC audio/video recording / Source Code

@@ -137,7 +137,7 @@

Copyright © 2013 Muaz Khan<@muazkh>.

-
+

@@ -311,7 +311,7 @@

How to use RecordRTC?

-<script src="https://webrtc-experiment.appspot.com/RecordRTC.js"></script>
+<script src="https://www.webrtc-experiment.com/RecordRTC.js"></script>
 

How to record video using RecordRTC?

@@ -331,7 +331,7 @@

How to record audio using RecordRTC?

-<script src="https://webrtc-experiment.appspot.com/audio-recorder.js"></script>
+<script src="https://www.webrtc-experiment.com/audio-recorder.js"></script>
 var recorder = RecordRTC({
    stream: MediaStream || LocalMediaStream
 });
@@ -347,7 +347,7 @@ 

How to record animated GIF using RecordRTC?

-<script src="https://webrtc-experiment.appspot.com/gif-recorder.js"></script>
+<script src="https://www.webrtc-experiment.com/gif-recorder.js"></script>
 var recorder = RecordRTC({
    video: HTMLVideoElement
 });
@@ -408,12 +408,12 @@ 

WebRTC Experiments! © , 2013 » Email» +

WebRTC Experiments! © , 2013 » Email» @muazkh» Github

- + \ No newline at end of file diff --git a/audio-broadcast/README.md b/audio-broadcast/README.md index a129a82f..e056c3b0 100644 --- a/audio-broadcast/README.md +++ b/audio-broadcast/README.md @@ -1,11 +1,11 @@ -#### WebRTC One-to-Many audio sharing/broadcasting / [Demo](https://webrtc-experiment.appspot.com/audio-broadcast/) +#### WebRTC One-to-Many audio sharing/broadcasting / [Demo](https://www.webrtc-experiment.com/audio-broadcast/) If 10 users join your broadcasted room, **20 RTP ports** will be opened on your browser: 1. 10 RTP ports for **outgoing** audio streams 2. 10 RTP ports for **incoming** audio streams ----- += #### Difference between one-way broadcasting and one-to-many broadcasting @@ -15,11 +15,11 @@ On each participant's side; only one **incoming** RTP port will be opened. Unlike one-way broadcasting; one-to-many broadcasting experiment opens both outgoing as well as incoming RTP ports for each participant. ----- += #### Browser Support -This [WebRTC Audio Broadcasting Experiment](https://webrtc-experiment.appspot.com/audio-broadcast/) works fine on following web-browsers: +This [WebRTC Audio Broadcasting Experiment](https://www.webrtc-experiment.com/audio-broadcast/) works fine on following web-browsers: | Browser | Support | | ------------- |-------------| @@ -27,8 +27,8 @@ This [WebRTC Audio Broadcasting Experiment](https://webrtc-experiment.appspot.co | Google Chrome | [Stable](https://www.google.com/intl/en_uk/chrome/browser/) / [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) / [Beta](https://www.google.com/intl/en/chrome/browser/beta.html) / [Dev](https://www.google.com/intl/en/chrome/browser/index.html?extra=devchannel#eula) | | Android | [Chrome Beta](https://play.google.com/store/apps/details?id=com.chrome.beta&hl=en) | ----- += #### License -WebRTC [Audio Broadcasting Experiment](https://webrtc-experiment.appspot.com/audio-broadcast/) is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +WebRTC [Audio Broadcasting Experiment](https://www.webrtc-experiment.com/audio-broadcast/) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/audio-broadcast/index.html b/audio-broadcast/index.html index 5fac1d17..687268ef 100644 --- a/audio-broadcast/index.html +++ b/audio-broadcast/index.html @@ -168,7 +168,7 @@
- ↑ WEBRTC EXPERIMENTS + ↑ WEBRTC EXPERIMENTS

WebRTC one-to-many audio broadcasting / Source Code

@@ -177,7 +177,7 @@

WebRTC one-to-many audio broadcasting / -
+
@@ -204,10 +204,10 @@

- - - - + + + +
@@ -235,13 +235,13 @@

WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @muazkh» Github

- + diff --git a/broadcast/README.md b/broadcast/README.md index 617f4af2..f64b2f8e 100644 --- a/broadcast/README.md +++ b/broadcast/README.md @@ -1,6 +1,6 @@ -#### WebRTC One-to-Many video sharing/broadcasting / [Demo](https://webrtc-experiment.appspot.com/broadcast/) +#### WebRTC One-to-Many video sharing/broadcasting / [Demo](https://www.webrtc-experiment.com/broadcast/) ----- += If 10 users join your broadcasted room, **40 RTP ports** will be opened on your browser: @@ -9,7 +9,7 @@ If 10 users join your broadcasted room, **40 RTP ports** will be opened on your 3. 10 RTP ports for **incoming** audio streams 4. 10 RTP ports for **incoming** video streams ----- += #### Difference between one-way broadcasting and one-to-many broadcasting @@ -24,11 +24,11 @@ On each participant's side; only 2 **incoming** RTP ports will be opened. Unlike one-way broadcasting; one-to-many broadcasting experiment opens both outgoing as well as incoming RTP ports for each participant. ----- += #### Browser Support -This [WebRTC Video Broadcasting Experiment](https://webrtc-experiment.appspot.com/broadcast/) works fine on following web-browsers: +This [WebRTC Video Broadcasting Experiment](https://www.webrtc-experiment.com/broadcast/) works fine on following web-browsers: | Browser | Support | | ------------- |-------------| @@ -36,8 +36,8 @@ This [WebRTC Video Broadcasting Experiment](https://webrtc-experiment.appspot.co | Google Chrome | [Stable](https://www.google.com/intl/en_uk/chrome/browser/) / [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) / [Beta](https://www.google.com/intl/en/chrome/browser/beta.html) / [Dev](https://www.google.com/intl/en/chrome/browser/index.html?extra=devchannel#eula) | | Android | [Chrome Beta](https://play.google.com/store/apps/details?id=com.chrome.beta&hl=en) | ----- += #### License -WebRTC [Video Broadcasting Experiment](https://webrtc-experiment.appspot.com/broadcast/) is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +WebRTC [Video Broadcasting Experiment](https://www.webrtc-experiment.com/broadcast/) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/broadcast/index.html b/broadcast/index.html index fee8c57c..d07ecf21 100644 --- a/broadcast/index.html +++ b/broadcast/index.html @@ -172,7 +172,7 @@

@@ -208,10 +208,10 @@

- - - - + + + +

Features

@@ -245,13 +245,13 @@

WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @muazkh» Github

- + diff --git a/chat-hangout/README.md b/chat-hangout/README.md index 377c17f6..457ef041 100644 --- a/chat-hangout/README.md +++ b/chat-hangout/README.md @@ -1,4 +1,4 @@ -#### WebRTC P2P Group Text Chat / [Demo](https://webrtc-experiment.appspot.com/chat-hangout/) +#### WebRTC P2P Group Text Chat / [Demo](https://www.webrtc-experiment.com/chat-hangout/) This WebRTC Experiment allows you share text messages among group of people. @@ -15,7 +15,7 @@ So, `20` RTP data ports will be opened in `10` users data session. **Embarrassin On Firefox, by default 16 SCTP data ports will be opened for single peer. So, about 160 SCTP data ports will be opened in 10 users data session. Too awkward! ----- += #### Multiple peer connections.....is it a solution? @@ -23,7 +23,7 @@ No, not at all. It is just a **temporary** workaround. You're strongly suggested to use **peer-to-server** model instead of opening multi-peers. ----- += #### How peer-to-server model works? @@ -35,11 +35,11 @@ Remember, WebRTC peer object will send **DTLS/SRTP** packets maybe as **ByteStre Server can manipulate messages or data coming from 10 or more unique data ports and transfer over single data port! ----- += #### Browser Support -WebRTC [Group Text Chat](https://webrtc-experiment.appspot.com/chat-hangout/) experiment works fine on following web-browsers: +WebRTC [Group Text Chat](https://www.webrtc-experiment.com/chat-hangout/) experiment works fine on following web-browsers: | Browser | Support | | ------------- |-------------| @@ -47,8 +47,8 @@ WebRTC [Group Text Chat](https://webrtc-experiment.appspot.com/chat-hangout/) ex | Google Chrome | [Stable](https://www.google.com/intl/en_uk/chrome/browser/) / [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) / [Beta](https://www.google.com/intl/en/chrome/browser/beta.html) / [Dev](https://www.google.com/intl/en/chrome/browser/index.html?extra=devchannel#eula) | | Android | [Chrome Beta](https://play.google.com/store/apps/details?id=com.chrome.beta&hl=en) | ----- += #### License -WebRTC [Group Text Chat](https://webrtc-experiment.appspot.com/chat-hangout/) experiment is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +WebRTC [Group Text Chat](https://www.webrtc-experiment.com/chat-hangout/) experiment is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/chat-hangout/hangout-ui.js b/chat-hangout/hangout-ui.js index 5f4a67ca..8f7ab6f9 100644 --- a/chat-hangout/hangout-ui.js +++ b/chat-hangout/hangout-ui.js @@ -1,25 +1,36 @@ -/* - 2013, @muazkh » github.com/muaz-khan - MIT License » https://webrtc-experiment.appspot.com/licence/ - Documentation » https://github.com/muaz-khan/WebRTC-Experiment/tree/master/DataChannel -*/ +// 2013, @muazkh » github.com/muaz-khan +// MIT License » https://webrtc-experiment.appspot.com/licence/ +// Documentation » https://github.com/muaz-khan/WebRTC-Experiment/tree/master/chat-hangout var config = { - openSocket: function (config) { - var channel = config.channel || location.hash.replace('#', '') || 'chat-hangout'; - var socket = new Firebase('https://rtcweb.firebaseIO.com/' + channel); + openSocket: function(config) { + var SIGNALING_SERVER = 'https://www.webrtc-experiment.com:8553/', + defaultChannel = location.hash.substr(1) || 'group-text-chat-hangout'; + + var channel = config.channel || defaultChannel; + var sender = Math.round(Math.random() * 999999999) + 999999999; + + io.connect(SIGNALING_SERVER).emit('new-channel', { + channel: channel, + sender: sender + }); + + var socket = io.connect(SIGNALING_SERVER + channel); socket.channel = channel; - socket.on('child_added', function (data) { - config.onmessage(data.val()); + socket.on('connect', function() { + if (config.callback) config.callback(socket); }); - socket.send = function (data) { - this.push(data); - } - config.onopen && setTimeout(config.onopen, 1); - socket.onDisconnect().remove(); - return socket; + + socket.send = function(message) { + socket.emit('message', { + sender: sender, + data: message + }); + }; + + socket.on('message', config.onmessage); }, - onRoomFound: function (room) { + onRoomFound: function(room) { var alreadyExist = document.getElementById(room.broadcaster); if (alreadyExist) return; @@ -28,11 +39,11 @@ var config = { var tr = document.createElement('tr'); tr.setAttribute('id', room.broadcaster); tr.innerHTML = '

' + - ''; + ''; roomsList.insertBefore(tr, roomsList.firstChild); - tr.onclick = function () { + tr.onclick = function() { var tr = this; hangoutUI.joinRoom({ roomToken: tr.querySelector('.join').id, @@ -42,11 +53,10 @@ var config = { hideUnnecessaryStuff(); }; }, - onChannelOpened: function (/* channel */) { + onChannelOpened: function(/* channel */) { hideUnnecessaryStuff(); }, - onChannelMessage: function (data) { - console.log(data); + onChannelMessage: function(data) { if (!chatOutput) return; var tr = document.createElement('tr'); @@ -61,7 +71,7 @@ var config = { function createButtonClickHandler() { hangoutUI.createRoom({ userName: prompt('Enter your name', 'Anonymous'), - roomName: ((document.getElementById('conference-name') || { value: null }).value || 'Anonymous') + ' // shared via ' + (navigator.vendor ? 'Google Chrome (Stable/Canary)' : 'Mozilla Firefox (Aurora/Nightly)') + roomName: ((document.getElementById('conference-name') || { }).value || 'Anonymous') + ' // shared via ' + (!!navigator.webkitGetUserMedia ? 'Google Chrome (Stable/Canary)' : 'Mozilla Firefox (Aurora/Nightly)') }); hideUnnecessaryStuff(); } @@ -93,7 +103,7 @@ function hideUnnecessaryStuff() { var chatMessage = document.getElementById('chat-message'); if (chatMessage) - chatMessage.onchange = function () { + chatMessage.onchange = function() { hangoutUI.send(this.value); var tr = document.createElement('tr'); tr.innerHTML = @@ -105,8 +115,9 @@ if (chatMessage) }; -(function () { +(function() { var uniqueToken = document.getElementById('unique-token'); - if (uniqueToken) if (location.hash.length > 2) uniqueToken.parentNode.parentNode.parentNode.innerHTML = '

Share this link

'; - else uniqueToken.innerHTML = uniqueToken.parentNode.parentNode.href = '#' + (Math.random() * new Date().getTime()).toString(36).toUpperCase().replace(/\./g, '-'); -})(); \ No newline at end of file + if (uniqueToken) + if (location.hash.length > 2) uniqueToken.parentNode.parentNode.parentNode.innerHTML = '

Share this link

'; + else uniqueToken.innerHTML = uniqueToken.parentNode.parentNode.href = '#' + (Math.random() * new Date().getTime()).toString(36).toUpperCase().replace( /\./g , '-'); +})(); diff --git a/chat-hangout/hangout.js b/chat-hangout/hangout.js index a5c5e0b5..a807d5c5 100644 --- a/chat-hangout/hangout.js +++ b/chat-hangout/hangout.js @@ -1,6 +1,8 @@ -/* MIT License: https://webrtc-experiment.appspot.com/licence/ */ +// 2013, @muazkh » github.com/muaz-khan +// MIT License » https://webrtc-experiment.appspot.com/licence/ +// Documentation » https://github.com/muaz-khan/WebRTC-Experiment/tree/master/chat-hangout -var hangout = function (config) { +var hangout = function(config) { var self = { userToken: uniqueToken(), userName: 'Anonymous' @@ -9,15 +11,15 @@ var hangout = function (config) { isbroadcaster, isGetNewRoom = true, sockets = [], - defaultSocket = {}, RTCDataChannels = []; + defaultSocket = { }, RTCDataChannels = []; function openDefaultSocket() { defaultSocket = config.openSocket({ - onmessage: onDefaultSocketResponse, - callback: function (socket) { - defaultSocket = socket; - } - }); + onmessage: onDefaultSocketResponse, + callback: function(socket) { + defaultSocket = socket; + } + }); } function onDefaultSocketResponse(response) { @@ -30,10 +32,10 @@ var hangout = function (config) { if (response.userToken && response.joinUser == self.userToken && response.participant && channels.indexOf(response.userToken) == -1) { channels += response.userToken + '--'; openSubSocket({ - isofferer: true, - channel: response.channel || response.userToken, - closeSocket: true - }); + isofferer: true, + channel: response.channel || response.userToken, + closeSocket: true + }); } } @@ -42,13 +44,13 @@ var hangout = function (config) { var socketConfig = { channel: _config.channel, onmessage: socketResponse, - onopen: function () { + onopen: function() { if (isofferer && !peer) initPeer(); sockets[sockets.length] = socket; } }; - socketConfig.callback = function (_socket) { + socketConfig.callback = function(_socket) { socket = _socket; this.onopen(); }; @@ -56,21 +58,21 @@ var hangout = function (config) { var socket = config.openSocket(socketConfig), isofferer = _config.isofferer, gotstream, - inner = {}, + inner = { }, peer; var peerConfig = { - onICE: function (candidate) { + onICE: function(candidate) { socket.send({ - userToken: self.userToken, - candidate: { - sdpMLineIndex: candidate.sdpMLineIndex, - candidate: JSON.stringify(candidate.candidate) - } - }); + userToken: self.userToken, + candidate: { + sdpMLineIndex: candidate.sdpMLineIndex, + candidate: JSON.stringify(candidate.candidate) + } + }); }, onChannelOpened: onChannelOpened, - onChannelMessage: function (event) { + onChannelMessage: function(event) { config.onChannelMessage(JSON.parse(event.data)); } }; @@ -89,76 +91,43 @@ var hangout = function (config) { function onChannelOpened(channel) { RTCDataChannels[RTCDataChannels.length] = channel; channel.send(JSON.stringify({ - message: 'Hi, I\'m ' + self.userName + '!', - sender: self.userName - })); + message: 'Hi, I\'m ' + self.userName + '!', + sender: self.userName + })); if (config.onChannelOpened) config.onChannelOpened(channel); if (isbroadcaster && channels.split('--').length > 3) { /* broadcasting newly connected participant for video-conferencing! */ defaultSocket.send({ - newParticipant: socket.channel, - userToken: self.userToken - }); + newParticipant: socket.channel, + userToken: self.userToken + }); } gotstream = true; } function sendsdp(sdp) { - sdp = JSON.stringify(sdp); - var part = parseInt(sdp.length / 3); - - var firstPart = sdp.slice(0, part), - secondPart = sdp.slice(part, sdp.length - 1), - thirdPart = ''; - - if (sdp.length > part + part) { - secondPart = sdp.slice(part, part + part); - thirdPart = sdp.slice(part + part, sdp.length); - } - socket.send({ - userToken: self.userToken, - firstPart: firstPart - }); - - socket.send({ - userToken: self.userToken, - secondPart: secondPart - }); - - socket.send({ - userToken: self.userToken, - thirdPart: thirdPart - }); + userToken: self.userToken, + sdp: JSON.stringify(sdp) + }); } function socketResponse(response) { if (response.userToken == self.userToken) return; - if (response.firstPart || response.secondPart || response.thirdPart) { - if (response.firstPart) { - inner.firstPart = response.firstPart; - if (inner.secondPart && inner.thirdPart) selfInvoker(); - } - if (response.secondPart) { - inner.secondPart = response.secondPart; - if (inner.firstPart && inner.thirdPart) selfInvoker(); - } - - if (response.thirdPart) { - inner.thirdPart = response.thirdPart; - if (inner.firstPart && inner.secondPart) selfInvoker(); - } + if (response.sdp) { + inner.sdp = JSON.parse(response.sdp); + selfInvoker(); } if (response.candidate && !gotstream) { peer && peer.addICE({ - sdpMLineIndex: response.candidate.sdpMLineIndex, - candidate: JSON.parse(response.candidate.candidate) - }); + sdpMLineIndex: response.candidate.sdpMLineIndex, + candidate: JSON.parse(response.candidate.candidate) + }); } if (response.left) { @@ -176,53 +145,39 @@ var hangout = function (config) { invokedOnce = true; - inner.sdp = JSON.parse(inner.firstPart + inner.secondPart + inner.thirdPart); - if (isofferer) peer.addAnswerSDP(inner.sdp); else initPeer(inner.sdp); } } function leave() { - length = sockets.length; + var length = sockets.length; for (var i = 0; i < length; i++) { - socket = sockets[i]; + var socket = sockets[i]; if (socket) { socket.send({ - left: true, - userToken: self.userToken - }); + left: true, + userToken: self.userToken + }); delete sockets[i]; } } } - window.onunload = function () { + window.onbeforeunload = function() { leave(); }; - window.onkeyup = function (e) { + window.onkeyup = function(e) { if (e.keyCode == 116) leave(); }; - (function () { - var anchors = document.querySelectorAll('a'), - length = anchors.length; - for (var i = 0; i < length; i++) { - a = anchors[i]; - if (a.href.indexOf('#') !== 0 && a.getAttribute('target') != '_blank') - a.onclick = function () { - leave(); - }; - } - })(); - function startBroadcasting() { defaultSocket && defaultSocket.send({ - roomToken: self.roomToken, - roomName: self.roomName, - broadcaster: self.userToken - }); + roomToken: self.roomToken, + roomName: self.roomName, + broadcaster: self.userToken + }); setTimeout(startBroadcasting, 3000); } @@ -232,20 +187,20 @@ var hangout = function (config) { var new_channel = uniqueToken(); openSubSocket({ - channel: new_channel, - closeSocket: true - }); + channel: new_channel, + closeSocket: true + }); defaultSocket.send({ - participant: true, - userToken: self.userToken, - joinUser: channel, - channel: new_channel - }); + participant: true, + userToken: self.userToken, + joinUser: channel, + channel: new_channel + }); } function uniqueToken() { - var s4 = function () { + var s4 = function() { return Math.floor(Math.random() * 0x10000).toString(16); }; return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4(); @@ -253,7 +208,7 @@ var hangout = function (config) { openDefaultSocket(); return { - createRoom: function (_config) { + createRoom: function(_config) { self.roomName = _config.roomName || 'Anonymous'; self.roomToken = uniqueToken(); if (_config.userName) self.userName = _config.userName; @@ -262,31 +217,33 @@ var hangout = function (config) { isGetNewRoom = false; startBroadcasting(); }, - joinRoom: function (_config) { + joinRoom: function(_config) { self.roomToken = _config.roomToken; if (_config.userName) self.userName = _config.userName; isGetNewRoom = false; openSubSocket({ - channel: self.userToken - }); + channel: self.userToken + }); defaultSocket.send({ - participant: true, - userToken: self.userToken, - joinUser: _config.joinUser - }); + participant: true, + userToken: self.userToken, + joinUser: _config.joinUser + }); }, - send: function (message) { - console.log('list of data channels', RTCDataChannels); + send: function(message) { var length = RTCDataChannels.length, data = JSON.stringify({ - message: message, - sender: self.userName - }); + message: message, + sender: self.userName + }); if (!length) return; for (var i = 0; i < length; i++) { - RTCDataChannels[i].send(data); + try { + RTCDataChannels[i].send(data); + } catch(e) { + } } } }; diff --git a/chat-hangout/index.html b/chat-hangout/index.html index 7acabf92..83ed72b2 100644 --- a/chat-hangout/index.html +++ b/chat-hangout/index.html @@ -178,7 +178,7 @@
' + room.roomName + '

© + WebRTC Experiments!© , 2013 » Email» @@ -264,6 +264,6 @@

Github

- + \ No newline at end of file diff --git a/chat/README.md b/chat/README.md index 65125a4b..ebb66e82 100644 --- a/chat/README.md +++ b/chat/README.md @@ -1,14 +1,18 @@ -#### WebRTC P2P Text Chat / [Demo](https://webrtc-experiment.appspot.com/chat-hangout/) +#### WebRTC P2P Text Chat / [Demo](https://www.webrtc-experiment.com/chat-hangout/) This WebRTC Experiment allows you share text messages among many peers. It opens multiple peer connections to support group data broadcasting. += + #### On room initiator's side 1. 10 peer connections will be opened 2. 10 sockets will be opened to exchange SDP/ICE += + #### On chrome, how many RTP data ports will be opened In 10 users data session; about 20 RTP data ports will be opened: @@ -20,10 +24,14 @@ Firefox opens 16 SCTP data ports for single data session. It means that about 160 SCTP data ports will be opened on room initiator's side in 10 users data session. += + #### On participants' side Only 2 RTP data ports will be opened because participants are not connected with each other. They're connected directly with room initiator. += + #### License -[WebRTC Experiments](https://webrtc-experiment.appspot.com/) are released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[WebRTC Experiments](https://www.webrtc-experiment.com/) are released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/demos/README.md b/demos/README.md index 9167e1df..ffcc1e98 100644 --- a/demos/README.md +++ b/demos/README.md @@ -2,6 +2,8 @@ Plug & play type of WebRTC Experiments. Nothing to install. No requirements. Just copy JavaScript code in your site and that's all you need to do! += + #### Chrome-to-Chrome WebRTC Data Connection It is a single-page demo. Copy/paste code in the console tab and you're done! @@ -85,6 +87,8 @@ offererDataChannel.send('text message'); answererDataChannel.send('text message'); ``` += + #### Firefox-to-Firefox WebRTC Data Connection From April 2013, Mozilla did [broken changes](https://github.com/muaz-khan/WebRTC-Experiment/wiki/WebRTC-DataChannel-and-Firefox#points) in Firefox data channel implementation. So, following code will work with upcoming releases. @@ -258,9 +262,11 @@ function setChannelEvents(channel, channelNameForConsoleOutput) { function useless() { } ``` += + #### Browser Support -[WebRTC Experiments & Demos](https://webrtc-experiment.appspot.com) works fine on following web-browsers: +[WebRTC Experiments & Demos](https://www.webrtc-experiment.com) works fine on following web-browsers: | Browser | Support | | ------------- |-------------| @@ -268,13 +274,15 @@ function useless() { } | Google Chrome | [Stable](https://www.google.com/intl/en_uk/chrome/browser/) / [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) / [Beta](https://www.google.com/intl/en/chrome/browser/beta.html) / [Dev](https://www.google.com/intl/en/chrome/browser/index.html?extra=devchannel#eula) | | Internet Explorer / IE | [Chrome Frame](http://www.google.com/chromeframe) | -| [WebRTC One-Page Demos](https://webrtc-experiment.appspot.com) | +| [WebRTC One-Page Demos](https://www.webrtc-experiment.com) | | ------------- | -| [One-Page text chat using RTCDataChannel APIs](https://webrtc-experiment.appspot.com/demos/client-side-datachannel.html) | -| [One-Page direct video chat](https://webrtc-experiment.appspot.com/demos/client-side.html) | -| [One-Page video chat using socket.io for signaling](https://webrtc-experiment.appspot.com/demos/client-side-socket-io.html) | -| [One-Page video chat using WebSockets for signaling](https://webrtc-experiment.appspot.com/demos/client-side-websocket.html) | +| [One-Page text chat using RTCDataChannel APIs](https://www.webrtc-experiment.com/demos/client-side-datachannel.html) | +| [One-Page direct video chat](https://www.webrtc-experiment.com/demos/client-side.html) | +| [One-Page video chat using socket.io for signaling](https://www.webrtc-experiment.com/demos/client-side-socket-io.html) | +| [One-Page video chat using WebSockets for signaling](https://www.webrtc-experiment.com/demos/client-side-websocket.html) | + += #### License -[WebRTC Experiments & Demos](https://github.com/muaz-khan/WebRTC-Experiment) are released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[WebRTC Experiments & Demos](https://github.com/muaz-khan/WebRTC-Experiment) are released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/demos/client-side-datachannel.html b/demos/client-side-datachannel.html index 30167c2c..94936c3f 100644 --- a/demos/client-side-datachannel.html +++ b/demos/client-side-datachannel.html @@ -178,7 +178,7 @@
- ←HOME + ←HOME

RTCDataChannel Simple Demo / Source Code on Github

@@ -188,7 +188,7 @@

RTCDataChannel Simple Demo

-
+
@@ -403,11 +403,11 @@

RTCDataChannel Simple Demo

- How to use RTCDataChannel? + How to use RTCDataChannel?

:

- RTCDataChannel for Beginners! + RTCDataChannel for Beginners!


@@ -422,13 +422,13 @@

WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @muazkh» Github

- + diff --git a/demos/client-side.html b/demos/client-side.html index a00a9f26..71973dd6 100644 --- a/demos/client-side.html +++ b/demos/client-side.html @@ -158,7 +158,7 @@ -
←HOME +
←HOME

RTCPeerConnection Simple Demo / Source Code on Github @@ -169,7 +169,7 @@

RTCPeerConnection Simple Demo

-
+
@@ -311,13 +311,13 @@

WebRTC Experiments!© , 2013 » Email» +

WebRTC Experiments!© , 2013 » Email» @muazkh» Github

- + \ No newline at end of file diff --git a/demos/remote-stream-recording.html b/demos/remote-stream-recording.html new file mode 100644 index 00000000..0791d132 --- /dev/null +++ b/demos/remote-stream-recording.html @@ -0,0 +1,171 @@ +Recording Remote Audio Streams / RecordRTC + + +

Recording Remote Audio Streams / RecordRTC

+ +

issue: unable to record remote audio streams using RecordRTC.

+
+"opus" is the default codec on chrome; +
+ +
+Chrome uses two modes for opus.... +
+ +
    +
  1. "voip" (i.e. voice mode) which is used if mono audio stream is provided by the sender
  2. +
  3. "audio" which is used if stereo audio stream is provided by the sender
  4. +
+
+There is no parameter in sdp allows us control voip/audio mode for outgoing/incoming audio streams. This job can be done by sender ( I don't know how, well, still experimenting ). +
+ +
+They're using code like this: +
+ +
+// Default to VoIP application for mono, and AUDIO for stereo.
+int application = (channels == 1) ? OPUS_APPLICATION_VOIP : OPUS_APPLICATION_AUDIO;
+
+state->encoder = opus_encoder_create(48000, channels, application, &error);
+
+ +
+You can see that if channels equals 1; i.e. if mono audio; they're using "voip" mode. Otherwise "audio" mode. +
+ +
+In the session description; you can see this line: +
+ +
+a=rtpmap:111 opus/48000/2
+
+ +
+It is mono section with 48000 Hz (i.e. highest) clock rate. +
+ +
+Bitrate is 48-64 kb/s .... i.e. FB mono music
+
+ +
+For stereo; we need: +
+ +
+64-128 kb/s .... i.e. FB stereo music
+
+ + + + + + + \ No newline at end of file diff --git a/demos/screen-and-video-from-single-peer.html b/demos/screen-and-video-from-single-peer.html index 89c69cb3..9a0a0b1a 100644 --- a/demos/screen-and-video-from-single-peer.html +++ b/demos/screen-and-video-from-single-peer.html @@ -166,7 +166,7 @@ -
←HOME +
←HOME

Share screen and audio/video from single peer connection!

@@ -175,7 +175,7 @@

Share screen and audio/video from single peer connection!

-
+
@@ -352,12 +352,12 @@

WebRTC Experiments!© , 2013 » Email» +

WebRTC Experiments!© , 2013 » Email» @muazkh» Github

- + \ No newline at end of file diff --git a/docs/How-to-Broadcast-Screen-using-WebRTC.html b/docs/How-to-Broadcast-Screen-using-WebRTC.html index e3edd280..70bc19da 100644 --- a/docs/How-to-Broadcast-Screen-using-WebRTC.html +++ b/docs/How-to-Broadcast-Screen-using-WebRTC.html @@ -166,7 +166,7 @@
- ←HOME + ←HOME

How to share tab using tabCapture APIs?

@@ -175,7 +175,7 @@

How to share tab using tabCapture APIs?

-
+
If you're newcomer, newbie or beginner; you're suggested to try RTCMultiConnection.js or DataChannel.js libraries. @@ -338,7 +338,7 @@

To use your own socket.io implementation...

- WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @muazkh» diff --git a/docs/README.md b/docs/README.md index 19edd707..b692bda6 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,18 +1,21 @@ | A few documents for newbies and beginners | | ------------- | | [RTCPeerConnection Documentation](https://github.com/muaz-khan/WebRTC-Experiment/wiki/RTCPeerConnection-Documentation) | -| [How to use RTCPeerConnection.js?](https://webrtc-experiment.appspot.com/docs/how-to-use-rtcpeerconnection-js-v1.1.html) | -| [RTCDataChannel for Beginners](https://webrtc-experiment.appspot.com/docs/rtc-datachannel-for-beginners.html) | -| [How to use RTCDataChannel?](https://webrtc-experiment.appspot.com/docs/how-to-use-rtcdatachannel.html) - single code for both canary and nightly | -| [WebRTC for Beginners: A getting stared guide!](https://webrtc-experiment.appspot.com/docs/webrtc-for-beginners.html) | -| [WebRTC for Newbies ](https://webrtc-experiment.appspot.com/docs/webrtc-for-newbies.html) | -| [How to broadcast video using RTCWeb APIs?](https://webrtc-experiment.appspot.com/docs/how-to-broadcast-video-using-RTCWeb-APIs.html) | -| [How to share audio-only streams?](https://webrtc-experiment.appspot.com/docs/how-to-share-audio-only-streams.html) | -| [How to broadcast files using RTCDataChannel APIs?](https://webrtc-experiment.appspot.com/docs/how-file-broadcast-works.html) | +| [How to use RTCPeerConnection.js?](https://www.webrtc-experiment.com/docs/how-to-use-rtcpeerconnection-js-v1.1.html) | +| [RTCDataChannel for Beginners](https://www.webrtc-experiment.com/docs/rtc-datachannel-for-beginners.html) | +| [How to use RTCDataChannel?](https://www.webrtc-experiment.com/docs/how-to-use-rtcdatachannel.html) - single code for both canary and nightly | +| [WebRTC for Beginners: A getting stared guide!](https://www.webrtc-experiment.com/docs/webrtc-for-beginners.html) | +| [WebRTC for Newbies ](https://www.webrtc-experiment.com/docs/webrtc-for-newbies.html) | +| [How to broadcast video using RTCWeb APIs?](https://www.webrtc-experiment.com/docs/how-to-broadcast-video-using-RTCWeb-APIs.html) | +| [How to share audio-only streams?](https://www.webrtc-experiment.com/docs/how-to-share-audio-only-streams.html) | +| [How to broadcast files using RTCDataChannel APIs?](https://www.webrtc-experiment.com/docs/how-file-broadcast-works.html) | -## Some other documents on [WebRTC Wiki Pages](https://github.com/muaz-khan/WebRTC-Experiment/wiki) += -==== -## License +##### Some other documents on [WebRTC Wiki Pages](https://github.com/muaz-khan/WebRTC-Experiment/wiki) -[WebRTC Experiments](https://github.com/muaz-khan/WebRTC-Experiment) are released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). += + +##### License + +[WebRTC Experiments](https://github.com/muaz-khan/WebRTC-Experiment) are released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/docs/how-file-broadcast-works.html b/docs/how-file-broadcast-works.html index 1ff61508..e073240e 100644 --- a/docs/how-file-broadcast-works.html +++ b/docs/how-file-broadcast-works.html @@ -151,9 +151,9 @@

- + diff --git a/docs/how-to-WebRTC-video-conferencing.html b/docs/how-to-WebRTC-video-conferencing.html index 6850b49f..4f0b4512 100644 --- a/docs/how-to-WebRTC-video-conferencing.html +++ b/docs/how-to-WebRTC-video-conferencing.html @@ -172,7 +172,7 @@
- ←HOME + ←HOME

How to write video-conferencing application using WebRTC?

@@ -181,7 +181,7 @@

How to write video-conferencing application using WebRTC?

-
+

@@ -412,13 +412,13 @@

WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @muazkh» Github

- + diff --git a/docs/how-to-broadcast-video-using-RTCWeb-APIs.html b/docs/how-to-broadcast-video-using-RTCWeb-APIs.html index 846eef45..94625b96 100644 --- a/docs/how-to-broadcast-video-using-RTCWeb-APIs.html +++ b/docs/how-to-broadcast-video-using-RTCWeb-APIs.html @@ -166,7 +166,7 @@

@@ -330,13 +330,13 @@

WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @muazkh» Github

- + diff --git a/docs/how-to-install-tabCapture-extension.html b/docs/how-to-install-tabCapture-extension.html index 2748c78c..3cfba770 100644 --- a/docs/how-to-install-tabCapture-extension.html +++ b/docs/how-to-install-tabCapture-extension.html @@ -183,7 +183,7 @@
- ←HOME + ←HOME

How to install tabCapture extension?

Copyright © 2013 @@ -191,7 +191,7 @@

How to install tabCapture extension?

-
+

@@ -216,13 +216,13 @@

How to install tabCapture extension?

-
After broadcasting, you can see your tab is listed here. + After broadcasting, you can see your tab is listed here.
- Tab Broadcasting using WebRTC! + Tab Broadcasting using WebRTC!
@@ -245,7 +245,7 @@

WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @muazkh» diff --git a/docs/how-to-share-audio-only-streams.html b/docs/how-to-share-audio-only-streams.html index ed5c5f7c..aac9befa 100644 --- a/docs/how-to-share-audio-only-streams.html +++ b/docs/how-to-share-audio-only-streams.html @@ -166,7 +166,7 @@
- ↑ WEBRTC EXPERIMENTS + ↑ WEBRTC EXPERIMENTS

How to share audio-only streams using RTCWeb APIs?

@@ -176,7 +176,7 @@

How to share audio-only streams using RTCWeb APIs?

-
+
@@ -235,13 +235,13 @@

WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @muazkh» Github

- + diff --git a/docs/how-to-use-plugin-free-calls.html b/docs/how-to-use-plugin-free-calls.html index 12d1979c..204a4961 100644 --- a/docs/how-to-use-plugin-free-calls.html +++ b/docs/how-to-use-plugin-free-calls.html @@ -224,7 +224,7 @@ -↑ WEBRTC EXPERIMENTS +↑ WEBRTC EXPERIMENTS

@@ -298,7 +298,7 @@

How to use Plugin-free calls?

-
+
- + diff --git a/docs/how-to-use-rtcdatachannel.html b/docs/how-to-use-rtcdatachannel.html index 3de397f6..ac07e31a 100644 --- a/docs/how-to-use-rtcdatachannel.html +++ b/docs/how-to-use-rtcdatachannel.html @@ -166,7 +166,7 @@
- ↑ WEBRTC EXPERIMENTS + ↑ WEBRTC EXPERIMENTS

How to use RTCDataChannel?

@@ -176,7 +176,7 @@

How to use RTCDataChannel?

-
+
@@ -419,13 +419,13 @@

WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @muazkh» Github

- + diff --git a/docs/how-to-use-rtcpeerconnection-js-v1.1.html b/docs/how-to-use-rtcpeerconnection-js-v1.1.html index 12c4cbf5..d052e56f 100644 --- a/docs/how-to-use-rtcpeerconnection-js-v1.1.html +++ b/docs/how-to-use-rtcpeerconnection-js-v1.1.html @@ -166,7 +166,7 @@

@@ -568,7 +568,7 @@

How to write same app in WebSocket?
-<script src="https://webrtc-experiment.appspot.com/dependencies/websocket.js"></script>
+<script src="https://www.webrtc-experiment.com/dependencies/websocket.js"></script>
 

@@ -606,13 +606,13 @@

WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @muazkh» Github

- + diff --git a/docs/rtc-datachannel-for-beginners.html b/docs/rtc-datachannel-for-beginners.html index 39854d92..d879bf08 100644 --- a/docs/rtc-datachannel-for-beginners.html +++ b/docs/rtc-datachannel-for-beginners.html @@ -166,7 +166,7 @@

@@ -624,20 +624,20 @@

A few tips:

- @@ -653,13 +653,13 @@

WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @muazkh» Github

- + diff --git a/docs/webrtc-for-beginners.html b/docs/webrtc-for-beginners.html index 49c7fb50..c61403f1 100644 --- a/docs/webrtc-for-beginners.html +++ b/docs/webrtc-for-beginners.html @@ -166,7 +166,7 @@

- Are you interested in a "more" simple full-fledged guide? Read this document. + Are you interested in a "more" simple full-fledged guide? Read this document.
- Are you interested in a "simple" guide about RTCDataChannel? Read this document. + Are you interested in a "simple" guide about RTCDataChannel? Read this document.
Are you interested to learn How to share files using RTCDataChannel APIs? + Are you interested to learn How to share files using RTCDataChannel APIs?
@@ -495,13 +495,13 @@

WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @muazkh» Github

- + diff --git a/docs/webrtc-for-newbies.html b/docs/webrtc-for-newbies.html index a26e3065..2e6e78d8 100644 --- a/docs/webrtc-for-newbies.html +++ b/docs/webrtc-for-newbies.html @@ -169,7 +169,7 @@

@@ -631,13 +631,13 @@

WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @muazkh» Github

- + diff --git a/experimental/README.md b/experimental/README.md index 6ab3c490..1c690e62 100644 --- a/experimental/README.md +++ b/experimental/README.md @@ -2,8 +2,8 @@ These experiments are earlier tests of expected updates and latest releases i.e. upcoming features. ----- += #### License -Released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +Released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/experimental/mozCaptureStreamUntilEnded/README.md b/experimental/mozCaptureStreamUntilEnded/README.md index 13a44cad..8aa8203c 100644 --- a/experimental/mozCaptureStreamUntilEnded/README.md +++ b/experimental/mozCaptureStreamUntilEnded/README.md @@ -6,14 +6,14 @@ On Firefox, these APIs seems failing to generate correct "ssrc" attributes. Still no progress. ----- += #### Reference https://github.com/muaz-khan/WebRTC-Experiment/tree/master/Pre-recorded-Media-Streaming ----- += #### License -Released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +Released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/experimental/mozCaptureStreamUntilEnded/index.html b/experimental/mozCaptureStreamUntilEnded/index.html index 0f848867..c93b38b4 100644 --- a/experimental/mozCaptureStreamUntilEnded/index.html +++ b/experimental/mozCaptureStreamUntilEnded/index.html @@ -158,13 +158,13 @@ -
←HOME +
←HOME

mozCaptureStreamUntilEnded

Copyright © 2013 Muaz Khan<@muazkh>.

-
+
@@ -310,13 +310,13 @@

WebRTC Experiments!© , 2013 » Email» +

WebRTC Experiments!© , 2013 » Email» @muazkh» Github

- + \ No newline at end of file diff --git a/experimental/remote-media-stream-attachment/README.md b/experimental/remote-media-stream-attachment/README.md index 75a1c007..88212ba9 100644 --- a/experimental/remote-media-stream-attachment/README.md +++ b/experimental/remote-media-stream-attachment/README.md @@ -6,14 +6,14 @@ If it is audio-only streaming; remote audio streams attachment works perfectly f Still no prgress to correctly forward "video stream". ----- += #### Reference https://github.com/muaz-khan/WebRTC-Experiment/issues/2 ----- += #### License -Released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +Released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/experimental/remote-media-stream-attachment/index.html b/experimental/remote-media-stream-attachment/index.html index 1a4b2fbd..07b9c21b 100644 --- a/experimental/remote-media-stream-attachment/index.html +++ b/experimental/remote-media-stream-attachment/index.html @@ -158,7 +158,7 @@ -
←HOME +
←HOME

Attaching Remote Media Streams @@ -169,7 +169,7 @@

-
+
+ \ No newline at end of file diff --git a/experimental/remote-stream-recording.html b/experimental/remote-stream-recording.html index 3c3d2a74..0791d132 100644 --- a/experimental/remote-stream-recording.html +++ b/experimental/remote-stream-recording.html @@ -1,4 +1,83 @@ - +Recording Remote Audio Streams / RecordRTC + + +

Recording Remote Audio Streams / RecordRTC

+ +

issue: unable to record remote audio streams using RecordRTC.

+
+"opus" is the default codec on chrome; +
+ +
+Chrome uses two modes for opus.... +
+ +
    +
  1. "voip" (i.e. voice mode) which is used if mono audio stream is provided by the sender
  2. +
  3. "audio" which is used if stereo audio stream is provided by the sender
  4. +
+
+There is no parameter in sdp allows us control voip/audio mode for outgoing/incoming audio streams. This job can be done by sender ( I don't know how, well, still experimenting ). +
+ +
+They're using code like this: +
+ +
+// Default to VoIP application for mono, and AUDIO for stereo.
+int application = (channels == 1) ? OPUS_APPLICATION_VOIP : OPUS_APPLICATION_AUDIO;
+
+state->encoder = opus_encoder_create(48000, channels, application, &error);
+
+ +
+You can see that if channels equals 1; i.e. if mono audio; they're using "voip" mode. Otherwise "audio" mode. +
+ +
+In the session description; you can see this line: +
+ +
+a=rtpmap:111 opus/48000/2
+
+ +
+It is mono section with 48000 Hz (i.e. highest) clock rate. +
+ +
+Bitrate is 48-64 kb/s .... i.e. FB mono music
+
+ +
+For stereo; we need: +
+ +
+64-128 kb/s .... i.e. FB stereo music
+
+ + \ No newline at end of file diff --git a/file-hangout/README.md b/file-hangout/README.md index bc07bfa0..12506738 100644 --- a/file-hangout/README.md +++ b/file-hangout/README.md @@ -1,4 +1,4 @@ -#### WebRTC P2P Group File Sharing / [Demo](https://webrtc-experiment.appspot.com/file-hangout/) +#### WebRTC P2P Group File Sharing / [Demo](https://www.webrtc-experiment.com/file-hangout/) This WebRTC Experiment allows you share file of any size among group of people. @@ -15,7 +15,7 @@ So, `20` RTP data ports will be opened in `10` users data session. **Embarrassin On Firefox, by default 16 SCTP data ports will be opened for single peer. So, about 160 SCTP data ports will be opened in 10 users data session. Too awkward! ----- += #### Multiple peer connections.....is it a solution? @@ -23,7 +23,7 @@ No, not at all. It is just a **temporary** workaround. You're strongly suggested to use **peer-to-server** model instead of opening multi-peers. ----- += #### How peer-to-server model works? @@ -35,7 +35,7 @@ Remember, WebRTC peer object will send **DTLS/SRTP** packets maybe as **ByteStre Server can manipulate messages or data coming from 10 or more unique data ports and transfer over single data port! ----- += #### ideas!!! @@ -77,11 +77,11 @@ So, we maybe able to send data/text and files over majority of mobile devices. Though, it seems not possible! Because their infrastructure is different. ----- += #### Browser Support -WebRTC [Group File Sharing](https://webrtc-experiment.appspot.com/file-hangout/) experiment works fine on following web-browsers: +WebRTC [Group File Sharing](https://www.webrtc-experiment.com/file-hangout/) experiment works fine on following web-browsers: | Browser | Support | | ------------- |-------------| @@ -89,8 +89,8 @@ WebRTC [Group File Sharing](https://webrtc-experiment.appspot.com/file-hangout/) | Google Chrome | [Stable](https://www.google.com/intl/en_uk/chrome/browser/) / [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) / [Beta](https://www.google.com/intl/en/chrome/browser/beta.html) / [Dev](https://www.google.com/intl/en/chrome/browser/index.html?extra=devchannel#eula) | | Android | [Chrome Beta](https://play.google.com/store/apps/details?id=com.chrome.beta&hl=en) | ----- += #### License -WebRTC [Group File Sharing](https://webrtc-experiment.appspot.com/file-hangout/) experiment is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +WebRTC [Group File Sharing](https://www.webrtc-experiment.com/file-hangout/) experiment is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/file-hangout/hangout-ui.js b/file-hangout/hangout-ui.js index bfda92c1..82ca10f7 100644 --- a/file-hangout/hangout-ui.js +++ b/file-hangout/hangout-ui.js @@ -1,25 +1,36 @@ -/* - 2013, @muazkh » github.com/muaz-khan - MIT License » https://webrtc-experiment.appspot.com/licence/ - Documentation » https://github.com/muaz-khan/WebRTC-Experiment/tree/master/DataChannel -*/ +// 2013, @muazkh » github.com/muaz-khan +// MIT License » https://webrtc-experiment.appspot.com/licence/ +// Documentation » https://github.com/muaz-khan/WebRTC-Experiment/tree/master/file-hangout var config = { - openSocket: function (config) { - var channel = config.channel || location.hash.replace('#', '') || 'file-hangout'; - var socket = new Firebase('https://rtcweb.firebaseIO.com/' + channel); + openSocket: function(config) { + var SIGNALING_SERVER = 'https://www.webrtc-experiment.com:8553/', + defaultChannel = location.hash.substr(1) || 'group-file-sharing-hangout'; + + var channel = config.channel || defaultChannel; + var sender = Math.round(Math.random() * 999999999) + 999999999; + + io.connect(SIGNALING_SERVER).emit('new-channel', { + channel: channel, + sender: sender + }); + + var socket = io.connect(SIGNALING_SERVER + channel); socket.channel = channel; - socket.on('child_added', function (data) { - config.onmessage(data.val()); + socket.on('connect', function() { + if (config.callback) config.callback(socket); }); - socket.send = function (data) { - this.push(data); - } - config.onopen && setTimeout(config.onopen, 1); - socket.onDisconnect().remove(); - return socket; + + socket.send = function(message) { + socket.emit('message', { + sender: sender, + data: message + }); + }; + + socket.on('message', config.onmessage); }, - onRoomFound: function (room) { + onRoomFound: function(room) { var alreadyExist = document.getElementById(room.broadcaster); if (alreadyExist) return; @@ -33,7 +44,7 @@ var config = { roomsList.insertBefore(tr, roomsList.firstChild); - tr.onclick = function () { + tr.onclick = function() { var tr = this; hangoutUI.joinRoom({ roomToken: tr.querySelector('.join').id, @@ -43,24 +54,23 @@ var config = { hideUnnecessaryStuff(); }; }, - onChannelOpened: function (/* channel */) { + onChannelOpened: function(/* channel */) { unnecessaryStuffVisible && hideUnnecessaryStuff(); if (fileElement) fileElement.removeAttribute('disabled'); }, - onChannelMessage: function (data) { + onChannelMessage: function(data) { if (data.sender && participants) { var tr = document.createElement('tr'); tr.innerHTML = '

'; participants.insertBefore(tr, participants.firstChild); - } - else onMessageCallback(data); + } else onMessageCallback(data); } }; function createButtonClickHandler() { hangoutUI.createRoom({ userName: prompt('Enter your name', 'Anonymous'), - roomName: ((document.getElementById('conference-name') || {}).value || 'Anonymous') + ' // shared via ' + (navigator.vendor ? 'Google Chrome (Stable/Canary)' : 'Mozilla Firefox (Aurora/Nightly)') + roomName: ((document.getElementById('conference-name') || { }).value || 'Anonymous') + ' // shared via ' + (!!navigator.webkitGetUserMedia ? 'Google Chrome (Stable/Canary)' : 'Mozilla Firefox (Aurora/Nightly)') }); hideUnnecessaryStuff(); } @@ -78,6 +88,7 @@ var roomsList = document.getElementById('rooms-list'); var chatOutput = document.getElementById('chat-output'); var unnecessaryStuffVisible = true; + function hideUnnecessaryStuff() { var visibleElements = document.getElementsByClassName('visible'), length = visibleElements.length; @@ -91,7 +102,7 @@ function hideUnnecessaryStuff() { var chatMessage = document.getElementById('chat-message'); if (chatMessage) - chatMessage.onchange = function () { + chatMessage.onchange = function() { hangoutUI.send(chatMessage.value); chatMessage.value = ''; }; @@ -111,7 +122,7 @@ function onMessageCallback(data) { if (data.size && moz) { var reader = new window.FileReader(); reader.readAsDataURL(data); - reader.onload = function (event) { + reader.onload = function(event) { saveToDisk(event.target.result, lastFileName); quickOutput(lastFileName, 'received successfully!'); disable(false); @@ -149,7 +160,7 @@ function onMessageCallback(data) { // getting file from user's system var file, fileElement = document.getElementById('file'); -fileElement.onchange = function () { +fileElement.onchange = function() { file = fileElement.files[0]; if (!file) return false; @@ -157,7 +168,7 @@ fileElement.onchange = function () { if (moz) { hangoutUI.send(JSON.stringify({ lastFileName: file.name })); quickOutput(file.name, 'shared successfully!'); - setTimeout(function () { + setTimeout(function() { if (fileElement) fileElement.value = ''; }, 0); return hangoutUI.send(file); @@ -170,8 +181,9 @@ fileElement.onchange = function () { }; var packetSize = 1000, textToTransfer = '', packets = 0; + function onReadAsDataURL(evt, text) { - var data = {}; + var data = { }; if (evt) { text = evt.target.result; @@ -190,7 +202,7 @@ function onReadAsDataURL(evt, text) { quickOutput(file.name, 'shared successfully!'); disable(false); - setTimeout(function () { + setTimeout(function() { if (fileElement) fileElement.value = ''; }, 0); } @@ -199,7 +211,7 @@ function onReadAsDataURL(evt, text) { textToTransfer = text.slice(data.message.length); if (textToTransfer.length) - setTimeout(function () { + setTimeout(function() { onReadAsDataURL(null, textToTransfer); }, 500); } @@ -220,6 +232,7 @@ function saveToDisk(fileUrl, fileName) { // UI var outputPanel = document.getElementById('output-panel'); + function quickOutput(message, message2) { if (!outputPanel) return; if (message2) message = '' + message + ' ' + message2; @@ -230,20 +243,22 @@ function quickOutput(message, message2) { } var statusDiv = document.getElementById('status'); + function updateStatus() { packets--; if (statusDiv) statusDiv.innerHTML = packets + ' items remaining.'; if (packets <= 0) statusDiv.innerHTML = ''; } -(function () { +(function() { var uniqueToken = document.getElementById('unique-token'); - if (uniqueToken) if (location.hash.length > 2) uniqueToken.parentNode.parentNode.parentNode.innerHTML = '

Share this link

'; - else uniqueToken.innerHTML = uniqueToken.parentNode.parentNode.href = '#' + (Math.random() * new Date().getTime()).toString(36).toUpperCase().replace(/\./g, '-'); + if (uniqueToken) + if (location.hash.length > 2) uniqueToken.parentNode.parentNode.parentNode.innerHTML = '

Share this link

'; + else uniqueToken.innerHTML = uniqueToken.parentNode.parentNode.href = '#' + (Math.random() * new Date().getTime()).toString(36).toUpperCase().replace( /\./g , '-'); })(); function disable(_disable) { if (!fileElement) return; if (!_disable) fileElement.removeAttribute('disabled'); else fileElement.setAttribute('disabled', true); -} \ No newline at end of file +} diff --git a/file-hangout/hangout.js b/file-hangout/hangout.js index a94f7a10..50d4398c 100644 --- a/file-hangout/hangout.js +++ b/file-hangout/hangout.js @@ -1,6 +1,8 @@ -/* MIT License: https://webrtc-experiment.appspot.com/licence/ */ +// 2013, @muazkh » github.com/muaz-khan +// MIT License » https://webrtc-experiment.appspot.com/licence/ +// Documentation » https://github.com/muaz-khan/WebRTC-Experiment/tree/master/file-hangout -var hangout = function (config) { +var hangout = function(config) { var self = { userToken: uniqueToken(), userName: 'Anonymous' @@ -10,222 +12,210 @@ var hangout = function (config) { sockets = [], isGetNewRoom = true; - var defaultSocket = {}, RTCDataChannels = [] + var defaultSocket = { }, RTCDataChannels = []; - function openDefaultSocket() { - defaultSocket = config.openSocket({ - onmessage: onDefaultSocketResponse, - callback: function (socket) { - defaultSocket = socket; - } - }); - } + function openDefaultSocket() { + defaultSocket = config.openSocket({ + onmessage: onDefaultSocketResponse, + callback: function(socket) { + defaultSocket = socket; + } + }); + } - function onDefaultSocketResponse(response) { - if (response.userToken == self.userToken) return; + function onDefaultSocketResponse(response) { + if (response.userToken == self.userToken) return; - if (isGetNewRoom && response.roomToken && response.broadcaster) config.onRoomFound(response); + if (isGetNewRoom && response.roomToken && response.broadcaster) config.onRoomFound(response); - if (response.newParticipant) onNewParticipant(response.newParticipant); + if (response.newParticipant) onNewParticipant(response.newParticipant); - if (response.userToken && response.joinUser == self.userToken && response.participant && channels.indexOf(response.userToken) == -1) { - channels += response.userToken + '--'; - openSubSocket({ - isofferer: true, - channel: response.channel || response.userToken, - closeSocket: true - }); - } + if (response.userToken && response.joinUser == self.userToken && response.participant && channels.indexOf(response.userToken) == -1) { + channels += response.userToken + '--'; + openSubSocket({ + isofferer: true, + channel: response.channel || response.userToken, + closeSocket: true + }); } + } - function openSubSocket(_config) { - if (!_config.channel) return; - var socketConfig = { - channel: _config.channel, - onmessage: socketResponse, - onopen: function () { - if (isofferer && !peer) initPeer(); - sockets[sockets.length] = socket; - } - }; - - socketConfig.callback = function (_socket) { - socket = _socket; - this.onopen(); - }; - - var socket = config.openSocket(socketConfig), - isofferer = _config.isofferer, - gotstream, - inner = {}, - peer; - - var peerConfig = { - onICE: function (candidate) { - socket.send({ - userToken: self.userToken, - candidate: { - sdpMLineIndex: candidate.sdpMLineIndex, - candidate: JSON.stringify(candidate.candidate) - } - }); - }, - onChannelOpened: onChannelOpened, - onChannelMessage: function (event) { - config.onChannelMessage(event.data.size ? event.data : JSON.parse(event.data)); - } - }; - - function initPeer(offerSDP) { - if (!offerSDP) { - peerConfig.onOfferSDP = sendsdp; - } else { - peerConfig.offerSDP = offerSDP; - peerConfig.onAnswerSDP = sendsdp; - } + function openSubSocket(_config) { + if (!_config.channel) return; + var socketConfig = { + channel: _config.channel, + onmessage: socketResponse, + onopen: function() { + if (isofferer && !peer) initPeer(); + sockets[sockets.length] = socket; + } + }; + + socketConfig.callback = function(_socket) { + socket = _socket; + this.onopen(); + }; - peer = RTCPeerConnection(peerConfig); + var socket = config.openSocket(socketConfig), + isofferer = _config.isofferer, + gotstream, + inner = { }, + peer; + + var peerConfig = { + onICE: function(candidate) { + socket.send({ + userToken: self.userToken, + candidate: { + sdpMLineIndex: candidate.sdpMLineIndex, + candidate: JSON.stringify(candidate.candidate) + } + }); + }, + onChannelOpened: onChannelOpened, + onChannelMessage: function(event) { + config.onChannelMessage(event.data.size ? event.data : JSON.parse(event.data)); } + }; - function onChannelOpened(channel) { - RTCDataChannels[RTCDataChannels.length] = channel; - channel.send(JSON.stringify({ - sender: self.userName - })); + function initPeer(offerSDP) { + if (!offerSDP) { + peerConfig.onOfferSDP = sendsdp; + } else { + peerConfig.offerSDP = offerSDP; + peerConfig.onAnswerSDP = sendsdp; + } - if (config.onChannelOpened) config.onChannelOpened(channel); + peer = RTCPeerConnection(peerConfig); + } - if (isbroadcaster && channels.split('--').length > 3) { - /* broadcasting newly connected participant for video-conferencing! */ - defaultSocket.send({ - newParticipant: socket.channel, - userToken: self.userToken - }); - } + function onChannelOpened(channel) { + RTCDataChannels[RTCDataChannels.length] = channel; + channel.send(JSON.stringify({ + sender: self.userName + })); - /* closing subsocket here on the offerer side */ - if (_config.closeSocket) socket = null; + if (config.onChannelOpened) config.onChannelOpened(channel); - gotstream = true; + if (isbroadcaster && channels.split('--').length > 3) { + /* broadcasting newly connected participant for video-conferencing! */ + defaultSocket.send({ + newParticipant: socket.channel, + userToken: self.userToken + }); } - function sendsdp(sdp) { - sdp = JSON.stringify(sdp); - var part = parseInt(sdp.length / 3); + /* closing subsocket here on the offerer side */ + if (_config.closeSocket) socket = null; - var firstPart = sdp.slice(0, part), - secondPart = sdp.slice(part, sdp.length - 1), - thirdPart = ''; - - if (sdp.length > part + part) { - secondPart = sdp.slice(part, part + part); - thirdPart = sdp.slice(part + part, sdp.length); - } + gotstream = true; + } - socket.send({ - userToken: self.userToken, - firstPart: firstPart - }); + function sendsdp(sdp) { + sdp = JSON.stringify(sdp); + var part = parseInt(sdp.length / 3); - socket.send({ - userToken: self.userToken, - secondPart: secondPart - }); + var firstPart = sdp.slice(0, part), + secondPart = sdp.slice(part, sdp.length - 1), + thirdPart = ''; - socket.send({ - userToken: self.userToken, - thirdPart: thirdPart - }); + if (sdp.length > part + part) { + secondPart = sdp.slice(part, part + part); + thirdPart = sdp.slice(part + part, sdp.length); } - function socketResponse(response) { - if (response.userToken == self.userToken) return; + socket.send({ + userToken: self.userToken, + firstPart: firstPart + }); - if (response.firstPart || response.secondPart || response.thirdPart) { - if (response.firstPart) { - inner.firstPart = response.firstPart; - if (inner.secondPart && inner.thirdPart) selfInvoker(); - } - if (response.secondPart) { - inner.secondPart = response.secondPart; - if (inner.firstPart && inner.thirdPart) selfInvoker(); - } + socket.send({ + userToken: self.userToken, + secondPart: secondPart + }); - if (response.thirdPart) { - inner.thirdPart = response.thirdPart; - if (inner.firstPart && inner.secondPart) selfInvoker(); - } + socket.send({ + userToken: self.userToken, + thirdPart: thirdPart + }); + } + + function socketResponse(response) { + if (response.userToken == self.userToken) return; + + if (response.firstPart || response.secondPart || response.thirdPart) { + if (response.firstPart) { + inner.firstPart = response.firstPart; + if (inner.secondPart && inner.thirdPart) selfInvoker(); + } + if (response.secondPart) { + inner.secondPart = response.secondPart; + if (inner.firstPart && inner.thirdPart) selfInvoker(); } - if (response.candidate && !gotstream) { - peer && peer.addICE({ - sdpMLineIndex: response.candidate.sdpMLineIndex, - candidate: JSON.parse(response.candidate.candidate) - }); + if (response.thirdPart) { + inner.thirdPart = response.thirdPart; + if (inner.firstPart && inner.secondPart) selfInvoker(); } + } - if (response.left) { - if (peer && peer.peer) { - peer.peer.close(); - peer.peer = null; - } + if (response.candidate && !gotstream) { + peer && peer.addICE({ + sdpMLineIndex: response.candidate.sdpMLineIndex, + candidate: JSON.parse(response.candidate.candidate) + }); + } + + if (response.left) { + if (peer && peer.peer) { + peer.peer.close(); + peer.peer = null; } } + } - var invokedOnce = false; + var invokedOnce = false; - function selfInvoker() { - if (invokedOnce) return; + function selfInvoker() { + if (invokedOnce) return; - invokedOnce = true; + invokedOnce = true; - inner.sdp = JSON.parse(inner.firstPart + inner.secondPart + inner.thirdPart); + inner.sdp = JSON.parse(inner.firstPart + inner.secondPart + inner.thirdPart); - if (isofferer) peer.addAnswerSDP(inner.sdp); - else initPeer(inner.sdp); - } + if (isofferer) peer.addAnswerSDP(inner.sdp); + else initPeer(inner.sdp); } + } - function leave() { - length = sockets.length; - for (var i = 0; i < length; i++) { - socket = sockets[i]; - if (socket) { - socket.send({ - left: true, - userToken: self.userToken - }); - delete sockets[i]; - } + function leave() { + var length = sockets.length; + for (var i = 0; i < length; i++) { + var socket = sockets[i]; + if (socket) { + socket.send({ + left: true, + userToken: self.userToken + }); + delete sockets[i]; } } + } - window.onunload = function () { + window.onunload = function() { leave(); }; - window.onkeyup = function (e) { + window.onkeyup = function(e) { if (e.keyCode == 116) leave(); }; - (function () { - var anchors = document.querySelectorAll('a'), - length = anchors.length; - for (var i = 0; i < length; i++) { - a = anchors[i]; - if (a.href.indexOf('#') !== 0 && a.getAttribute('target') != '_blank') - a.onclick = function () { - leave(); - }; - } - })(); - function startBroadcasting() { defaultSocket && defaultSocket.send({ - roomToken: self.roomToken, - roomName: self.roomName, - broadcaster: self.userToken - }); + roomToken: self.roomToken, + roomName: self.roomName, + broadcaster: self.userToken + }); setTimeout(startBroadcasting, 3000); } @@ -235,20 +225,20 @@ var hangout = function (config) { var new_channel = uniqueToken(); openSubSocket({ - channel: new_channel, - closeSocket: true - }); + channel: new_channel, + closeSocket: true + }); defaultSocket.send({ - participant: true, - userToken: self.userToken, - joinUser: channel, - channel: new_channel - }); + participant: true, + userToken: self.userToken, + joinUser: channel, + channel: new_channel + }); } function uniqueToken() { - var s4 = function () { + var s4 = function() { return Math.floor(Math.random() * 0x10000).toString(16); }; return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4(); @@ -256,7 +246,7 @@ var hangout = function (config) { openDefaultSocket(); return { - createRoom: function (_config) { + createRoom: function(_config) { self.roomName = _config.roomName || 'Anonymous'; self.roomToken = uniqueToken(); if (_config.userName) self.userName = _config.userName; @@ -265,26 +255,29 @@ var hangout = function (config) { isGetNewRoom = false; startBroadcasting(); }, - joinRoom: function (_config) { + joinRoom: function(_config) { self.roomToken = _config.roomToken; if (_config.userName) self.userName = _config.userName; isGetNewRoom = false; openSubSocket({ - channel: self.userToken - }); + channel: self.userToken + }); defaultSocket.send({ - participant: true, - userToken: self.userToken, - joinUser: _config.joinUser - }); + participant: true, + userToken: self.userToken, + joinUser: _config.joinUser + }); }, - send: function (data) { + send: function(data) { var length = RTCDataChannels.length; if (!length) return; for (var i = 0; i < length; i++) { - RTCDataChannels[i].send(data); + try { + RTCDataChannels[i].send(data); + } catch(e) { + } } } }; diff --git a/file-hangout/index.html b/file-hangout/index.html index 5c77e12a..0d18346a 100644 --- a/file-hangout/index.html +++ b/file-hangout/index.html @@ -178,7 +178,7 @@
' + data.sender + ' is ready to receive files!
@@ -219,10 +219,10 @@

- - + + + +

@@ -240,7 +240,7 @@

How it works?

  • in reality, it is peer-to-peer-to-peers....
  • -

    Interested to learn Interested to learn how to share files using RTCDataChannel APIs?

    @@ -259,7 +259,7 @@

    WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @@ -267,6 +267,6 @@

    Github

    - + \ No newline at end of file diff --git a/file-sharing/README.md b/file-sharing/README.md index ac0bbbe5..c161ebdc 100644 --- a/file-sharing/README.md +++ b/file-sharing/README.md @@ -1,4 +1,4 @@ -#### WebRTC File Sharing i.e. Data Sharing / [Demo](https://webrtc-experiment.appspot.com/file-sharing/) +#### WebRTC File Sharing i.e. Data Sharing / [Demo](https://www.webrtc-experiment.com/file-sharing/) `DataConnection.js` library lets you: @@ -6,15 +6,15 @@ 2. Share text message of any length 3. Text data regardless of the size and type ----- += #### First Step: Link the library ```html - + ``` ----- += #### Last Step: Start using it! @@ -29,7 +29,7 @@ document.getElementById('setup-new-connection').onclick = function() { }; ``` ----- += #### Text Chat i.e. Text Sharing @@ -43,7 +43,7 @@ You may want to share direct messages: connection.channels['user-id'].send('longest possible text message'); ``` ----- += #### File Sharing @@ -84,7 +84,7 @@ channel.onFileSent = function (e) { channel.onFileReceived = function (e) { /* e.fileName, e.userid */ }; ``` ----- += #### Errors Handling @@ -96,7 +96,7 @@ connection.onerror = function(e) {} connection.onclose = function(e) {} ``` ----- += #### Custom user-ids? @@ -104,7 +104,7 @@ connection.onclose = function(e) {} connection.userid = 'username'; ``` ----- += #### Custom signaling channel? @@ -143,7 +143,7 @@ connection.firebase = 'chat'; Want to use XHR, WebSockets, SIP, XMPP, etc. for signaling? Read [this post](https://github.com/muaz-khan/WebRTC-Experiment/issues/56#issuecomment-20090650). ----- += #### Want to manually join rooms? @@ -158,7 +158,7 @@ connection.onconnection = function(room) { `onconnection` is called for each new data connection; and `join` method allows you manually join previously created connections. ----- += #### If someone leaves... @@ -170,11 +170,11 @@ connection.onuserleft = function(userid) { }; ``` ----- += #### Browser Support -This [DataConnection.js](https://webrtc-experiment.appspot.com/data-connection.js) library is compatible to following web-browsers: +This [DataConnection.js](https://www.webrtc-experiment.com/data-connection.js) library is compatible to following web-browsers: | Browser | Support | | ------------- |-------------| @@ -182,8 +182,8 @@ This [DataConnection.js](https://webrtc-experiment.appspot.com/data-connection.j | Google Chrome | [Stable](https://www.google.com/intl/en_uk/chrome/browser/) / [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) / [Beta](https://www.google.com/intl/en/chrome/browser/beta.html) / [Dev](https://www.google.com/intl/en/chrome/browser/index.html?extra=devchannel#eula) | | Android | [Chrome Beta](https://play.google.com/store/apps/details?id=com.chrome.beta&hl=en) | ----- += #### License -[DataConnection.js](https://webrtc-experiment.appspot.com/data-connection.js) is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[DataConnection.js](https://www.webrtc-experiment.com/data-connection.js) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/file-sharing/index.html b/file-sharing/index.html index 4e5749f9..35e6ae7c 100644 --- a/file-sharing/index.html +++ b/file-sharing/index.html @@ -132,8 +132,8 @@ margin-left: 6em; } - - + +

    @@ -145,7 +145,7 @@

    Muaz Khan<@muazkh>.

    -
    +

    Setup a new connection:

    @@ -246,7 +246,7 @@



    -<script src="https://webrtc-experiment.appspot.com/data-connection.js"></script>
    +<script src="https://www.webrtc-experiment.com/data-connection.js"></script>
     
     var connection = new DataConnection();
    @@ -283,8 +283,8 @@ 

    Send Message

    - + diff --git a/meeting/README.md b/meeting/README.md index 0d758600..01b121ae 100644 --- a/meeting/README.md +++ b/meeting/README.md @@ -1,4 +1,4 @@ -#### WebRTC Meeting i.e. Video-Conferencing / [Demo](https://webrtc-experiment.appspot.com/meeting/) +#### WebRTC Meeting i.e. Video-Conferencing / [Demo](https://www.webrtc-experiment.com/meeting/) 1. Multiple peer-connections are opened to bring multi-users connectivity experience. 2. Maximum peers limit on chrome is temporarily 10. @@ -21,15 +21,15 @@ Possible issues: Solution? Obviously a media server. To overcome burden and to deliver HD stream over thousands of peers; we need a media server that should broadcast stream over number of peers. ----- += #### First Step: Link the library ```html - + ``` ----- += #### Last Step: Start using it! @@ -53,7 +53,7 @@ document.getElementById('setup-new-meeting').onclick = function() { }; ``` ----- += #### Custom user-ids? @@ -61,7 +61,7 @@ document.getElementById('setup-new-meeting').onclick = function() { meeting.userid = 'username'; ``` ----- += #### Custom signaling channel? @@ -98,7 +98,7 @@ Want to use `Firebase` for signaling? meeting.firebase = 'chat'; ``` ----- += #### Want to manually join rooms? @@ -119,7 +119,7 @@ meeting.onmeeting = function(room) { `onmeeting` is called for each new meeting; and `meet` method allows you manually join a meeting room. ----- += #### If someone leaves... @@ -133,7 +133,7 @@ meeting.onuserleft = function(userid) { }; ``` ----- += #### `onaddstream` @@ -152,11 +152,11 @@ meeting.onaddstream = function(e) { }; ``` ----- += #### Browser Support -This [WebRTC Meeting](https://webrtc-experiment.appspot.com/meeting/) experiment works fine on following web-browsers: +This [WebRTC Meeting](https://www.webrtc-experiment.com/meeting/) experiment works fine on following web-browsers: | Browser | Support | | ------------- |-------------| @@ -164,8 +164,8 @@ This [WebRTC Meeting](https://webrtc-experiment.appspot.com/meeting/) experiment | Google Chrome | [Stable](https://www.google.com/intl/en_uk/chrome/browser/) / [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) / [Beta](https://www.google.com/intl/en/chrome/browser/beta.html) / [Dev](https://www.google.com/intl/en/chrome/browser/index.html?extra=devchannel#eula) | | Android | [Chrome Beta](https://play.google.com/store/apps/details?id=com.chrome.beta&hl=en) | ----- += #### License -[WebRTC Meeting](https://webrtc-experiment.appspot.com/meeting/) is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[WebRTC Meeting](https://www.webrtc-experiment.com/meeting/) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/meeting/index.html b/meeting/index.html index 03e21755..aae6b553 100644 --- a/meeting/index.html +++ b/meeting/index.html @@ -108,8 +108,8 @@ padding-left: 1em; } - - + +

    @@ -121,7 +121,7 @@

    Muaz Khan<@muazkh>.

    -
    +

    Setup a new meeting:

    @@ -211,7 +211,7 @@



    -<script src="https://webrtc-experiment.appspot.com/meeting/meeting.js"></script>
    +<script src="https://www.webrtc-experiment.com/meeting/meeting.js"></script>
     
     var meeting = new Meeting('meeting-unique-id');
    @@ -258,8 +258,8 @@ 

    Send Message

    - + \ No newline at end of file diff --git a/one-to-many-audio-broadcasting/README.md b/one-to-many-audio-broadcasting/README.md index 8105abaf..07b534a2 100644 --- a/one-to-many-audio-broadcasting/README.md +++ b/one-to-many-audio-broadcasting/README.md @@ -1,11 +1,11 @@ -#### WebRTC One-to-Many audio-broadcasting / [Demo](https://webrtc-experiment.appspot.com/one-to-many-audio-broadcasting/) +#### WebRTC One-to-Many audio-broadcasting / [Demo](https://www.webrtc-experiment.com/one-to-many-audio-broadcasting/) If 10 users join your broadcasted room, **20 RTP ports** will be opened on your browser: 1. 10 RTP ports for **outgoing** audio streams 2. 10 RTP ports for **incoming** audio streams ----- += #### Difference between one-way broadcasting and one-to-many broadcasting @@ -15,15 +15,15 @@ On each participant's side; only one **incoming** RTP port will be opened. Unlike one-way broadcasting; one-to-many broadcasting experiment opens both outgoing as well as incoming RTP ports for each participant. ----- += #### First Step: Link the library ```html - + ``` ----- += #### Last Step: Start using it! @@ -47,7 +47,7 @@ document.getElementById('setup-new-meeting').onclick = function() { }; ``` ----- += #### Custom user-ids? @@ -55,7 +55,7 @@ document.getElementById('setup-new-meeting').onclick = function() { meeting.userid = 'username'; ``` ----- += #### Custom signaling channel? @@ -92,7 +92,7 @@ Want to use `Firebase` for signaling? meeting.firebase = 'chat'; ``` ----- += #### Want to manually join rooms? @@ -113,7 +113,7 @@ meeting.onmeeting = function(room) { `onmeeting` is called for each new meeting; and `meet` method allows you manually join a meeting room. ----- += #### If someone leaves... @@ -127,8 +127,7 @@ meeting.onuserleft = function(userid) { }; ``` ----- - += #### `onaddstream` It is called both for `local` and `remote` media streams. It returns: @@ -146,11 +145,11 @@ meeting.onaddstream = function(e) { }; ``` ----- += #### Browser Support -This [WebRTC One-to-Many audio-broadcasting](https://webrtc-experiment.appspot.com/one-to-many-audio-broadcasting/) experiment works fine on following web-browsers: +This [WebRTC One-to-Many audio-broadcasting](https://www.webrtc-experiment.com/one-to-many-audio-broadcasting/) experiment works fine on following web-browsers: | Browser | Support | | ------------- |-------------| @@ -158,8 +157,8 @@ This [WebRTC One-to-Many audio-broadcasting](https://webrtc-experiment.appspot.c | Google Chrome | [Stable](https://www.google.com/intl/en_uk/chrome/browser/) / [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) / [Beta](https://www.google.com/intl/en/chrome/browser/beta.html) / [Dev](https://www.google.com/intl/en/chrome/browser/index.html?extra=devchannel#eula) | | Android | [Chrome Beta](https://play.google.com/store/apps/details?id=com.chrome.beta&hl=en) | ----- += #### License -[WebRTC One-to-Many audio-broadcasting](https://webrtc-experiment.appspot.com/one-to-many-audio-broadcasting/) is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[WebRTC One-to-Many audio-broadcasting](https://www.webrtc-experiment.com/one-to-many-audio-broadcasting/) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/one-to-many-audio-broadcasting/index.html b/one-to-many-audio-broadcasting/index.html index d0466679..c862c160 100644 --- a/one-to-many-audio-broadcasting/index.html +++ b/one-to-many-audio-broadcasting/index.html @@ -108,8 +108,8 @@ padding-left: 1em; } - - + +

    @@ -120,7 +120,7 @@

    Muaz Khan<@muazkh>.

    -
    +

    Setup a new meeting:

    @@ -192,7 +192,7 @@

    Difference between one-way broadcasting and one-to-many broadcasting



    -<script src="https://webrtc-experiment.appspot.com/one-to-many-audio-broadcasting/meeting.js"></script>
    +<script src="https://www.webrtc-experiment.com/one-to-many-audio-broadcasting/meeting.js"></script>
     
     var meeting = new Meeting('meeting-unique-id');
    @@ -239,8 +239,8 @@ 

    Send Message

    - + \ No newline at end of file diff --git a/one-to-many-video-broadcasting/README.md b/one-to-many-video-broadcasting/README.md index c7444c73..4e88f27e 100644 --- a/one-to-many-video-broadcasting/README.md +++ b/one-to-many-video-broadcasting/README.md @@ -1,4 +1,4 @@ -#### WebRTC One-to-Many video-broadcasting / [Demo](https://webrtc-experiment.appspot.com/one-to-many-video-broadcasting/) +#### WebRTC One-to-Many video-broadcasting / [Demo](https://www.webrtc-experiment.com/one-to-many-video-broadcasting/) If 10 users join your broadcasted room, **40 RTP ports** will be opened on your browser: @@ -7,7 +7,7 @@ If 10 users join your broadcasted room, **40 RTP ports** will be opened on your 3. 10 RTP ports for **incoming** audio streams 4. 10 RTP ports for **incoming** video streams ----- += #### Difference between one-way broadcasting and one-to-many broadcasting @@ -22,15 +22,15 @@ On each participant's side; only 2 **incoming** RTP ports will be opened. Unlike one-way broadcasting; one-to-many broadcasting experiment opens both outgoing as well as incoming RTP ports for each participant. ----- += #### First Step: Link the library ```html - + ``` ----- += #### Last Step: Start using it! @@ -54,7 +54,7 @@ document.getElementById('setup-new-meeting').onclick = function() { }; ``` ----- += #### Custom user-ids? @@ -62,7 +62,7 @@ document.getElementById('setup-new-meeting').onclick = function() { meeting.userid = 'username'; ``` ----- += #### Custom signaling channel? @@ -99,7 +99,7 @@ Want to use `Firebase` for signaling? meeting.firebase = 'chat'; ``` ----- += #### Want to manually join rooms? @@ -120,7 +120,7 @@ meeting.onmeeting = function(room) { `onmeeting` is called for each new meeting; and `meet` method allows you manually join a meeting room. ----- += #### If someone leaves... @@ -134,7 +134,7 @@ meeting.onuserleft = function(userid) { }; ``` ----- += #### `onaddstream` @@ -153,11 +153,11 @@ meeting.onaddstream = function(e) { }; ``` ----- += #### Browser Support -This [WebRTC One-to-Many video-broadcasting](https://webrtc-experiment.appspot.com/one-to-many-video-broadcasting/) experiment works fine on following web-browsers: +This [WebRTC One-to-Many video-broadcasting](https://www.webrtc-experiment.com/one-to-many-video-broadcasting/) experiment works fine on following web-browsers: | Browser | Support | | ------------- |-------------| @@ -165,8 +165,8 @@ This [WebRTC One-to-Many video-broadcasting](https://webrtc-experiment.appspot.c | Google Chrome | [Stable](https://www.google.com/intl/en_uk/chrome/browser/) / [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) / [Beta](https://www.google.com/intl/en/chrome/browser/beta.html) / [Dev](https://www.google.com/intl/en/chrome/browser/index.html?extra=devchannel#eula) | | Android | [Chrome Beta](https://play.google.com/store/apps/details?id=com.chrome.beta&hl=en) | ----- += #### License -[WebRTC One-to-Many video-broadcasting](https://webrtc-experiment.appspot.com/one-to-many-video-broadcasting/) is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[WebRTC One-to-Many video-broadcasting](https://www.webrtc-experiment.com/one-to-many-video-broadcasting/) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/one-to-many-video-broadcasting/index.html b/one-to-many-video-broadcasting/index.html index 9ebab9df..eb1d06f2 100644 --- a/one-to-many-video-broadcasting/index.html +++ b/one-to-many-video-broadcasting/index.html @@ -108,8 +108,8 @@ padding-left: 1em; } - - + +

    @@ -120,7 +120,7 @@

    Muaz Khan<@muazkh>.

    -
    +

    Setup a new meeting:

    @@ -198,7 +198,7 @@

    Difference between one-way broadcasting and one-to-many broadcasting



    -<script src="https://webrtc-experiment.appspot.com/one-to-many-video-broadcasting/meeting.js"></script>
    +<script src="https://www.webrtc-experiment.com/one-to-many-video-broadcasting/meeting.js"></script>
     
     var meeting = new Meeting('meeting-unique-id');
    @@ -245,8 +245,8 @@ 

    Send Message

    - + \ No newline at end of file diff --git a/p2p-share/README.md b/p2p-share/README.md index 8b1b7df9..719132bb 100644 --- a/p2p-share/README.md +++ b/p2p-share/README.md @@ -5,6 +5,8 @@ that allows you: 1. Share files in a group (many-to-many) 2. Unlimited data connections on Firefox += + #### How WebRTC file sharing experiment works? 1. It shares the file directly over all connected data ports @@ -14,10 +16,14 @@ If 16 SCTP streams are used in one-to-one data connection. In 10 peers session; That's why it is strongly suggested to not open multiple peer connections on single page! += + #### Is this a P2P file distributing system? Well, maybe! += + #### Is this a torrent like file distributing/sharing system? This P2P file sharing experiment works like this: @@ -27,6 +33,8 @@ This P2P file sharing experiment works like this: 3. If `UserA` share file...file will be transferred asynchronously over all connected data ports. 4. All other users are connected directly to each other; like a hexagon or other many directional shape. += + #### Chrome and unreliable data connection...how it works? In a simple one-to-one data session; chrome opens two RTP ports: @@ -36,9 +44,7 @@ In a simple one-to-one data session; chrome opens two RTP ports: So many limitations in the moment; to resolve all those limitations; data/files are splitted in small chunks; and those chunks are transferred **step-by-step** after predefined time interval to make distribution consistent and reliable. -### How to use `One-to-Many File Sharing` in your own site? - -**Just copy HTML/JS code in your site and that's all you need to do. Nothing to install! No requirements!** += #### Browser Support @@ -48,8 +54,9 @@ WebRTC **File Broadcasting** (file sharing) experiment works fine on following w | ------------- |-------------| | Firefox | [Stable](http://www.mozilla.org/en-US/firefox/new/) / [Aurora](http://www.mozilla.org/en-US/firefox/aurora/) / [Nightly](http://nightly.mozilla.org/) | | Google Chrome | [Stable](https://www.google.com/intl/en_uk/chrome/browser/) / [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) / [Beta](https://www.google.com/intl/en/chrome/browser/beta.html) / [Dev](https://www.google.com/intl/en/chrome/browser/index.html?extra=devchannel#eula) | -| Internet Explorer / IE | [Chrome Frame](http://www.google.com/chromeframe) | + += #### License -WebRTC **File Broadcasting** experiment is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +WebRTC **File Broadcasting** experiment is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/part-of-screen-sharing/README.md b/part-of-screen-sharing/README.md index 5af31bc2..94cf9b93 100644 --- a/part-of-screen-sharing/README.md +++ b/part-of-screen-sharing/README.md @@ -1,14 +1,16 @@ -#### WebRTC [Part of Screen Sharing Demos](https://webrtc-experiment.appspot.com/#part-of-screen-sharing) +#### WebRTC [Part of Screen Sharing Demos](https://www.webrtc-experiment.com/#part-of-screen-sharing) -1. [Using RTCDataChannel](https://webrtc-experiment.appspot.com/part-of-screen-sharing/webrtc-data-channel/) -2. [Using Firebase](https://webrtc-experiment.appspot.com/part-of-screen-sharing/) +1. [Using RTCDataChannel](https://www.webrtc-experiment.com/part-of-screen-sharing/webrtc-data-channel/) +2. [Using Firebase](https://www.webrtc-experiment.com/part-of-screen-sharing/) 3. [A realtime chat using RTCDataChannel](https://googledrive.com/host/0B6GWd_dUUTT8RzVSRVU2MlIxcm8/realtime-chat/) 4. [A realtime chat using Firebase](https://googledrive.com/host/0B6GWd_dUUTT8RzVSRVU2MlIxcm8/realtime-chat/No-WebRTC-Chat.html) += + #### How to use in your own site? ```html - + ``` ```javascript @@ -37,6 +39,8 @@ html2canvas(divToShare, { */ ``` += + #### How.....why.....what.....? 1. Used `html2canvas` library to take screenshot of the entire webpage or part of webpage. @@ -50,7 +54,7 @@ html2canvas(divToShare, { ....and that's all you need to do! -**Just copy HTML/JS code in your site and that's all you need to do. Nothing to install! No requirements!** += #### Browser Support @@ -63,6 +67,8 @@ These WebRTC **Part of Screen Sharing** experiments works fine on following web- | Firefox | [Nightly](http://nightly.mozilla.org/) | | Google Chrome | [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) | += + #### License -These WebRTC **Part of Screen Sharing** experiments are released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +These WebRTC **Part of Screen Sharing** experiments are released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/part-of-screen-sharing/index.html b/part-of-screen-sharing/index.html index 1f78712e..be5b796b 100644 --- a/part-of-screen-sharing/index.html +++ b/part-of-screen-sharing/index.html @@ -4,7 +4,7 @@ Part of screen sharing ® Muaz Khan - + @@ -55,17 +55,17 @@ text-align: center; } - footer a { - color: #666; - text-shadow: 0 1px 1px #fff; - text-decoration: none; - font-size: inherit; - padding: 1em; - } + footer a { + color: #666; + text-shadow: 0 1px 1px #fff; + text-decoration: none; + font-size: inherit; + padding: 1em; + } - footer a:hover, footer a:focus { - color: #111; - } + footer a:hover, footer a:focus { + color: #111; + } h1, h2 { font-weight: normal; @@ -80,13 +80,13 @@ text-decoration: none; } - a:hover, a:focus { - color: #1B29A4; - } + a:hover, a:focus { + color: #1B29A4; + } - a:active { - color: #000; - } + a:active { + color: #000; + } :-moz-any-link:focus { color: #000; @@ -120,20 +120,20 @@ font-family: inherit; } - button:hover { - background: rgb(9, 147, 240); - } + button:hover { + background: rgb(9, 147, 240); + } - button:active { - background: rgb(10, 118, 190); - } + button:active { + background: rgb(10, 118, 190); + } - button[disabled] { - background: none; - border: 1px solid rgb(187, 181, 181); - color: gray; - text-shadow: none; - } + button[disabled] { + background: none; + border: 1px solid rgb(187, 181, 181); + color: gray; + text-shadow: none; + } strong { color: rgb(204, 14, 14); @@ -149,9 +149,9 @@ vertical-align: top; } - .share-me:hover { - background: rgb(211, 205, 205); - } + .share-me:hover { + background: rgb(211, 205, 205); + } #second-div { border: 2px solid red; @@ -170,207 +170,205 @@ document.createElement('article'); document.createElement('footer'); - - + + -
    -↑ WEBRTC EXPERIMENTS +
    + ↑ WEBRTC EXPERIMENTS -

    - Part of screen sharing +

    Part of screen sharing
    + style="color: red; border: 2px solid red; border-bottom: 0; display: inline-block; padding: .1em .4em;">
    - -

    - -

    - Copyright © 2013 Muaz Khan<@muazkh>. -

    -
    -
    -
    - - - - +

    + +

    + Copyright © 2013 Muaz Khan<@muazkh>. + @WebRTCWeb +

    +
    +
    +
    + + + + - - + + -
    -
    + +
    +
    -
    -
    -
    +
    +
    +
    -

    Shared DIVs will be visible here ↓

    +

    Shared DIVs will be visible here ↓

    -
    - - -
    -
    - -

    intro:

    - -
      -
    1. Sharing part of the screen or region of screen (i.e. a DIV, SECTION, ARTICLE or ASIDE)... not the entire screen!
    2. -
    3. Everything inside that DIV is synchronized in realtime.
    4. -
    5. Works fine on all modern web browsers supporting WebRTC Data Channels.
    6. -
    -

    how?

    - -
      -
    1. Share screenshots of the entire DIV, ASIDE or BODY element in realtime!
    2. -
    3. Using Firebase to transmit screenshots in realtime! (sharing screenshots after each 500 milliseconds)
    4. -
    5. It is better to "pause sharing" to scroll down and see others' shared regions.
    6. -
    7. It supports multi-user connectivity too! Hmm! i.e. you can share region of screen with many friends!
    8. -
    -

    - Try Part + function onFirebaseConnectionOpend() { + console.log('firebase connection is opened'); + } + +
    +
    + +

    intro:

    + +
      +
    1. Sharing part of the screen or region of screen (i.e. a DIV, SECTION, ARTICLE or ASIDE)... not the entire screen!
    2. +
    3. Everything inside that DIV is synchronized in realtime.
    4. +
    5. Works fine on all modern web browsers supporting WebRTC Data Channels.
    6. +
    +

    how?

    + +
      +
    1. Share screenshots of the entire DIV, ASIDE or BODY element in realtime!
    2. +
    3. Using Firebase to transmit screenshots in realtime! (sharing screenshots after each 500 milliseconds)
    4. +
    5. It is better to "pause sharing" to scroll down and see others' shared regions.
    6. +
    7. It supports multi-user connectivity too! Hmm! i.e. you can share region of screen with many friends!
    8. +
    +

    Try Part of Screen Sharing using WebRTC Data Channel / 100% realtime! -

    +

    -
    -<script src="https://webrtc-experiment.appspot.com/screenshot.js"></script>
    +        
    +<script src="https://www.webrtc-experiment.com/screenshot.js"></script>
     <script>
     var divToShare = document.querySelector('div');
     html2canvas(divToShare, {
    @@ -398,38 +396,34 @@ 

    What above code will do?

    </script>
    -
    -
    +
    +
    -

    Part of +

    Part of screen sharing is open-sourced on Github!

    -
    -
    -

    - - - -
    +
    +
    +
    +

    Feedback

    - +
    - -
    -

    - - + + +

    + + - - \ No newline at end of file + diff --git a/part-of-screen-sharing/realtime-chat/README.md b/part-of-screen-sharing/realtime-chat/README.md index 1d10d13d..5776b14d 100644 --- a/part-of-screen-sharing/realtime-chat/README.md +++ b/part-of-screen-sharing/realtime-chat/README.md @@ -1,13 +1,13 @@ -==== -## WebRTC Part of Screen Sharing Demos +#### WebRTC Part of Screen Sharing Demos 1. [Realtime Chat](https://googledrive.com/host/0B6GWd_dUUTT8RzVSRVU2MlIxcm8/realtime-chat/) 2. [No-WebRTC Realtime Chat](https://googledrive.com/host/0B6GWd_dUUTT8RzVSRVU2MlIxcm8/realtime-chat/No-WebRTC-Chat.html) 3. [Part of Screen Sharing](https://googledrive.com/host/0B6GWd_dUUTT8RzVSRVU2MlIxcm8/part-of-screen-sharing/) 4. [Part of Screen Sharing using RTCDataChannel](https://googledrive.com/host/0B6GWd_dUUTT8RzVSRVU2MlIxcm8/part-of-screen-sharing/RTCDataChannel/) -==== -## Browser Support += + +#### Browser Support WebRTC [Part of Screen Sharing using RTCDataChannel](https://googledrive.com/host/0B6GWd_dUUTT8RzVSRVU2MlIxcm8/part-of-screen-sharing/RTCDataChannel/) experiment works fine on following web-browsers: @@ -18,7 +18,8 @@ WebRTC [Part of Screen Sharing using RTCDataChannel](https://googledrive.com/hos | Firefox | [Nightly](http://nightly.mozilla.org/) | | Google Chrome | [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) | -==== -## License += + +#### License -These WebRTC **Part of Screen Sharing** experiments are released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +These WebRTC **Part of Screen Sharing** experiments are released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/part-of-screen-sharing/realtime-chat/how-this-work.html b/part-of-screen-sharing/realtime-chat/how-this-work.html index b68cd346..5ad17721 100644 --- a/part-of-screen-sharing/realtime-chat/how-this-work.html +++ b/part-of-screen-sharing/realtime-chat/how-this-work.html @@ -27,7 +27,7 @@

    -
    +
    1. Tick "Is Sync in Realtime" checkbox if you want to share text in realtime.
    2. diff --git a/part-of-screen-sharing/realtime-chat/index.html b/part-of-screen-sharing/realtime-chat/index.html index 9420ffc3..34e3113b 100644 --- a/part-of-screen-sharing/realtime-chat/index.html +++ b/part-of-screen-sharing/realtime-chat/index.html @@ -64,7 +64,7 @@

      -
      +
      / diff --git a/part-of-screen-sharing/webrtc-and-part-of-screen-sharing/README.md b/part-of-screen-sharing/webrtc-and-part-of-screen-sharing/README.md index 5af31bc2..94cf9b93 100644 --- a/part-of-screen-sharing/webrtc-and-part-of-screen-sharing/README.md +++ b/part-of-screen-sharing/webrtc-and-part-of-screen-sharing/README.md @@ -1,14 +1,16 @@ -#### WebRTC [Part of Screen Sharing Demos](https://webrtc-experiment.appspot.com/#part-of-screen-sharing) +#### WebRTC [Part of Screen Sharing Demos](https://www.webrtc-experiment.com/#part-of-screen-sharing) -1. [Using RTCDataChannel](https://webrtc-experiment.appspot.com/part-of-screen-sharing/webrtc-data-channel/) -2. [Using Firebase](https://webrtc-experiment.appspot.com/part-of-screen-sharing/) +1. [Using RTCDataChannel](https://www.webrtc-experiment.com/part-of-screen-sharing/webrtc-data-channel/) +2. [Using Firebase](https://www.webrtc-experiment.com/part-of-screen-sharing/) 3. [A realtime chat using RTCDataChannel](https://googledrive.com/host/0B6GWd_dUUTT8RzVSRVU2MlIxcm8/realtime-chat/) 4. [A realtime chat using Firebase](https://googledrive.com/host/0B6GWd_dUUTT8RzVSRVU2MlIxcm8/realtime-chat/No-WebRTC-Chat.html) += + #### How to use in your own site? ```html - + ``` ```javascript @@ -37,6 +39,8 @@ html2canvas(divToShare, { */ ``` += + #### How.....why.....what.....? 1. Used `html2canvas` library to take screenshot of the entire webpage or part of webpage. @@ -50,7 +54,7 @@ html2canvas(divToShare, { ....and that's all you need to do! -**Just copy HTML/JS code in your site and that's all you need to do. Nothing to install! No requirements!** += #### Browser Support @@ -63,6 +67,8 @@ These WebRTC **Part of Screen Sharing** experiments works fine on following web- | Firefox | [Nightly](http://nightly.mozilla.org/) | | Google Chrome | [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) | += + #### License -These WebRTC **Part of Screen Sharing** experiments are released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +These WebRTC **Part of Screen Sharing** experiments are released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/part-of-screen-sharing/webrtc-and-part-of-screen-sharing/index.html b/part-of-screen-sharing/webrtc-and-part-of-screen-sharing/index.html index 11fb4869..41ece8fc 100644 --- a/part-of-screen-sharing/webrtc-and-part-of-screen-sharing/index.html +++ b/part-of-screen-sharing/webrtc-and-part-of-screen-sharing/index.html @@ -9,6 +9,13 @@ + - - + +

      @@ -124,7 +124,7 @@

      Muaz Khan<@muazkh>.

      -
      +

      Share Your Screen:

      @@ -183,7 +183,7 @@



      -<script src="https://webrtc-experiment.appspot.com/screen-sharing/screen.js"></script>
      +<script src="https://www.webrtc-experiment.com/screen-sharing/screen.js"></script>
       
       var screen = new Screen('screen-unique-id');
      @@ -240,7 +240,7 @@ 

      mandatory: {chromeMediaSource: 'tab'} can only be useful in chrome extensions. See - Tab + Tab sharing using tabCapture APIs.



      @@ -263,8 +263,8 @@

      Send Message

      - + \ No newline at end of file diff --git a/socket.io/README.md b/socket.io/README.md index d2873ce2..edcf933c 100644 --- a/socket.io/README.md +++ b/socket.io/README.md @@ -1,8 +1,8 @@ -#### WebRTC One-to-One video sharing using Socket.io / [Demo](https://webrtc-experiment.appspot.com/socket.io/) +#### WebRTC One-to-One video sharing using Socket.io / [Demo](https://www.webrtc-experiment.com/socket.io/) This `WebRTC Experiment` is using [socket.io over node.js](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/socketio-over-nodejs) for signalig. ----- += #### Use your own socket.io implementation! @@ -38,11 +38,11 @@ openSignalingChannel: function(config) { } ``` ----- += #### Browser Support -This [One-to-one WebRTC video chat using socket.io](https://webrtc-experiment.appspot.com/socket.io/) experiment works fine on following web-browsers: +This [One-to-one WebRTC video chat using socket.io](https://www.webrtc-experiment.com/socket.io/) experiment works fine on following web-browsers: | Browser | Support | | ------------- |-------------| @@ -50,8 +50,8 @@ This [One-to-one WebRTC video chat using socket.io](https://webrtc-experiment.ap | Google Chrome | [Stable](https://www.google.com/intl/en_uk/chrome/browser/) / [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) / [Beta](https://www.google.com/intl/en/chrome/browser/beta.html) / [Dev](https://www.google.com/intl/en/chrome/browser/index.html?extra=devchannel#eula) | | Android | [Chrome Beta](https://play.google.com/store/apps/details?id=com.chrome.beta&hl=en) | ----- += #### License -[WebRTC one-to-one video sharing using socket.io](https://webrtc-experiment.appspot.com/socket.io/) is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[WebRTC one-to-one video sharing using socket.io](https://www.webrtc-experiment.com/socket.io/) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/socket.io/index.html b/socket.io/index.html index e4534264..a09f9ada 100644 --- a/socket.io/index.html +++ b/socket.io/index.html @@ -172,7 +172,7 @@
      - ↑ WEBRTC EXPERIMENTS + ↑ WEBRTC EXPERIMENTS

      Using socket.io for signaling / Source Code on Github

      @@ -181,7 +181,7 @@

      Using socket.io for signaling / -
      +
      @@ -208,10 +208,10 @@

      - - - - + + + +

      WebRTC one-to-one video sharing experiment where socket.io is used for signaling.

      @@ -236,13 +236,13 @@

      Use WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @muazkh» Github

      - + diff --git a/socket.io/rtclib.js b/socket.io/rtclib.js index 82eba9d7..4b00d3d4 100644 --- a/socket.io/rtclib.js +++ b/socket.io/rtclib.js @@ -1,21 +1,25 @@ -/* MIT License: https://webrtc-experiment.appspot.com/licence/ */ +// 2013, @muazkh » github.com/muaz-khan +// MIT License » https://webrtc-experiment.appspot.com/licence/ +// Documentation » https://github.com/muaz-khan/WebRTC-Experiment/tree/master/video-conferencing -var rtclib = function (config) { +var RTCLib = function(config) { var self = { userToken: uniqueToken() - }, - channels = '--', - isbroadcaster, + }; + + var isbroadcaster, isGetNewRoom = true, - defaultSocket = {}; + sockets = [], + isGotRemoteStream = false, + defaultSocket = { }; function openDefaultSocket() { defaultSocket = config.openSocket({ - onmessage: onDefaultSocketResponse, - callback: function (socket) { - defaultSocket = socket; - } - }); + onmessage: onDefaultSocketResponse, + callback: function(socket) { + defaultSocket = socket; + } + }); } function onDefaultSocketResponse(response) { @@ -25,13 +29,11 @@ var rtclib = function (config) { if (response.newParticipant) onNewParticipant(response.newParticipant); - if (response.userToken && response.joinUser == self.userToken && response.participant && channels.indexOf(response.userToken) == -1) { - channels += response.userToken + '--'; + if (response.userToken && response.joinUser == self.userToken && response.participant) { openSubSocket({ - isofferer: true, - channel: response.channel || response.userToken, - closeSocket: true - }); + isofferer: true, + channel: response.channel || response.userToken + }); } } @@ -40,35 +42,35 @@ var rtclib = function (config) { var socketConfig = { channel: _config.channel, onmessage: socketResponse, - onopen: function () { + onopen: function() { if (isofferer && !peer) initPeer(); + sockets[sockets.length] = socket; } }; - socketConfig.callback = function (_socket) { + socketConfig.callback = function(_socket) { socket = _socket; this.onopen(); }; var socket = config.openSocket(socketConfig), isofferer = _config.isofferer, - gotstream, video = document.createElement('video'), - inner = {}, + inner = { }, peer; var peerConfig = { attachStream: config.attachStream, - onICE: function (candidate) { + onICE: function(candidate) { socket.send({ - userToken: self.userToken, - candidate: { - sdpMLineIndex: candidate.sdpMLineIndex, - candidate: JSON.stringify(candidate.candidate) - } - }); + userToken: self.userToken, + candidate: { + sdpMLineIndex: candidate.sdpMLineIndex, + candidate: JSON.stringify(candidate.candidate) + } + }); }, - onRemoteStream: function (stream) { + onRemoteStream: function(stream) { if (!stream) return; video[moz ? 'mozSrcObject' : 'src'] = moz ? stream : webkitURL.createObjectURL(stream); @@ -76,6 +78,12 @@ var rtclib = function (config) { _config.stream = stream; onRemoteStreamStartsFlowing(); + }, + onRemoteStreamEnded: function(stream) { + if (config.onRemoteStreamEnded) + config.onRemoteStreamEnded(stream); + + isGotRemoteStream = false; } }; @@ -92,80 +100,45 @@ var rtclib = function (config) { function onRemoteStreamStartsFlowing() { if (!(video.readyState <= HTMLMediaElement.HAVE_CURRENT_DATA || video.paused || video.currentTime <= 0)) { - gotstream = true; + isGotRemoteStream = true; - config.onRemoteStream({ + if (config.onRemoteStream) + config.onRemoteStream({ video: video, stream: _config.stream }); - - if (isbroadcaster && channels.split('--').length > 3) { - /* broadcasting newly connected participant for video-conferencing! */ - defaultSocket.send({ - newParticipant: socket.channel, - userToken: self.userToken - }); - } - - /* closing subsocket here on the offerer side */ - if (_config.closeSocket) socket = null; - } else setTimeout(onRemoteStreamStartsFlowing, 50); } function sendsdp(sdp) { - sdp = JSON.stringify(sdp); - var part = parseInt(sdp.length / 3); - - var firstPart = sdp.slice(0, part), - secondPart = sdp.slice(part, sdp.length - 1), - thirdPart = ''; - - if (sdp.length > part + part) { - secondPart = sdp.slice(part, part + part); - thirdPart = sdp.slice(part + part, sdp.length); - } - - socket.send({ - userToken: self.userToken, - firstPart: firstPart - }); - - socket.send({ - userToken: self.userToken, - secondPart: secondPart - }); - socket.send({ - userToken: self.userToken, - thirdPart: thirdPart - }); + userToken: self.userToken, + sdp: JSON.stringify(sdp) + }); } function socketResponse(response) { if (response.userToken == self.userToken) return; - if (response.firstPart || response.secondPart || response.thirdPart) { - if (response.firstPart) { - inner.firstPart = response.firstPart; - if (inner.secondPart && inner.thirdPart) selfInvoker(); - } - if (response.secondPart) { - inner.secondPart = response.secondPart; - if (inner.firstPart && inner.thirdPart) selfInvoker(); - } - - if (response.thirdPart) { - inner.thirdPart = response.thirdPart; - if (inner.firstPart && inner.secondPart) selfInvoker(); - } + if (response.sdp) { + inner.sdp = JSON.parse(response.sdp); + selfInvoker(); } - if (response.candidate && !gotstream) { - peer && peer.addICE({ + if (response.candidate && !isGotRemoteStream) { + if (!peer) console.error('missed an ice', response.candidate); + else + peer.addICE({ sdpMLineIndex: response.candidate.sdpMLineIndex, candidate: JSON.parse(response.candidate.candidate) }); } + + if (response.left) { + if (peer && peer.peer) { + peer.peer.close(); + peer.peer = null; + } + } } var invokedOnce = false; @@ -175,41 +148,46 @@ var rtclib = function (config) { invokedOnce = true; - inner.sdp = JSON.parse(inner.firstPart + inner.secondPart + inner.thirdPart); if (isofferer) peer.addAnswerSDP(inner.sdp); else initPeer(inner.sdp); } } + function leave() { + var length = sockets.length; + for (var i = 0; i < length; i++) { + var socket = sockets[i]; + if (socket) { + socket.send({ + left: true, + userToken: self.userToken + }); + delete sockets[i]; + } + } + } + + window.onbeforeunload = function() { + leave(); + }; + + window.onkeyup = function(e) { + if (e.keyCode == 116) leave(); + }; + function startBroadcasting() { - defaultSocket && defaultSocket.send({ + if (!isGotRemoteStream && defaultSocket) { + defaultSocket.send({ roomToken: self.roomToken, roomName: self.roomName, broadcaster: self.userToken }); + } setTimeout(startBroadcasting, 3000); } - function onNewParticipant(channel) { - if (!channel || channels.indexOf(channel) != -1 || channel == self.userToken) return; - channels += channel + '--'; - - var new_channel = uniqueToken(); - openSubSocket({ - channel: new_channel, - closeSocket: true - }); - - defaultSocket.send({ - participant: true, - userToken: self.userToken, - joinUser: channel, - channel: new_channel - }); - } - function uniqueToken() { - var s4 = function () { + var s4 = function() { return Math.floor(Math.random() * 0x10000).toString(16); }; return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4(); @@ -217,7 +195,7 @@ var rtclib = function (config) { openDefaultSocket(); return { - createRoom: function (_config) { + createRoom: function(_config) { self.roomName = _config.roomName || 'Anonymous'; self.roomToken = uniqueToken(); @@ -225,19 +203,19 @@ var rtclib = function (config) { isGetNewRoom = false; startBroadcasting(); }, - joinRoom: function (_config) { + joinRoom: function(_config) { self.roomToken = _config.roomToken; isGetNewRoom = false; openSubSocket({ - channel: self.userToken - }); + channel: self.userToken + }); defaultSocket.send({ - participant: true, - userToken: self.userToken, - joinUser: _config.joinUser - }); + participant: true, + userToken: self.userToken, + joinUser: _config.joinUser + }); } }; }; diff --git a/socket.io/ui.js b/socket.io/ui.js index 7ff9ea54..b1361777 100644 --- a/socket.io/ui.js +++ b/socket.io/ui.js @@ -1,28 +1,51 @@ -// MIT License: https://webrtc-experiment.appspot.com/licence/ -// Use Socket.io over Node.js for signaling: https://github.com/muaz-khan/WebRTC-Experiment/tree/master/socketio-over-nodejs +// 2013, @muazkh » github.com/muaz-khan +// MIT License » https://webrtc-experiment.appspot.com/licence/ +// Documentation » https://github.com/muaz-khan/WebRTC-Experiment/tree/master/socket.io var config = { - openSocket: function (config) { - var socket = io.connect('https://pubsub.pubnub.com/webrtc-socketio', { - publish_key: 'pub-f986077a-73bd-4c28-8e50-2e44076a84e0', - subscribe_key: 'sub-b8f4c07a-352e-11e2-bb9d-c7df1d04ae4a', - channel: config.channel || 'webrtc-socketio', - ssl: true + openSocket: function(config) { + var SIGNALING_SERVER = 'https://www.webrtc-experiment.com:8553/', + defaultChannel = location.hash.substr(1) || 'socketio-one-to-one-chat'; + + var channel = config.channel || defaultChannel; + var sender = Math.round(Math.random() * 999999999) + 999999999; + + io.connect(SIGNALING_SERVER).emit('new-channel', { + channel: channel, + sender: sender + }); + + var socket = io.connect(SIGNALING_SERVER + channel); + socket.channel = channel; + socket.on('connect', function() { + if (config.callback) config.callback(socket); }); - if (config.onopen) socket.on('connect', config.onopen); + + socket.send = function(message) { + socket.emit('message', { + sender: sender, + data: message + }); + }; + socket.on('message', config.onmessage); - return socket; }, - onRemoteStream: function (media) { + onRemoteStream: function(media) { var video = media.video; + video.setAttribute('controls', true); + video.setAttribute('id', media.stream.id); participants.insertBefore(video, participants.firstChild); video.play(); rotateVideo(video); }, - onRoomFound: function (room) { + onRemoteStreamEnded: function(stream) { + var video = document.getElementById(stream.id); + if (video) video.parentNode.removeChild(video); + }, + onRoomFound: function(room) { var alreadyExist = document.getElementById(room.broadcaster); if (alreadyExist) return; @@ -31,13 +54,13 @@ var config = { var tr = document.createElement('tr'); tr.setAttribute('id', room.broadcaster); tr.innerHTML = '

      ' + - ''; + ''; roomsList.insertBefore(tr, roomsList.firstChild); - tr.onclick = function () { + tr.onclick = function() { var tr = this; - captureUserMedia(function () { - rtc.joinRoom({ + captureUserMedia(function() { + rtcLib.joinRoom({ roomToken: tr.querySelector('.join').id, joinUser: tr.id }); @@ -48,9 +71,9 @@ var config = { }; function createButtonClickHandler() { - captureUserMedia(function () { - rtc.createRoom({ - roomName: (document.getElementById('room-name') || {}).value || 'Anonymous' + captureUserMedia(function() { + rtcLib.createRoom({ + roomName: (document.getElementById('conference-name') || { }).value || 'Anonymous' }); }); hideUnnecessaryStuff(); @@ -60,27 +83,26 @@ function captureUserMedia(callback) { var video = document.createElement('video'); video.setAttribute('autoplay', true); video.setAttribute('controls', true); - participants.insertBefore(video, participants.firstChild); getUserMedia({ video: video, - onsuccess: function (stream) { + onsuccess: function(stream) { config.attachStream = stream; callback && callback(); - rotateVideo(video); video.setAttribute('muted', true); + rotateVideo(video); }, - onerror: function (error) { + onerror: function() { alert('unable to get access to your webcam'); callback && callback(); } }); } -/* on page load: get public rooms */ -var rtc = rtclib(config); +// You can use! window.onload = function() {} +var rtcLib = RTCLib(config); /* UI specific */ var participants = document.getElementById("participants") || document.body; @@ -99,13 +121,14 @@ function hideUnnecessaryStuff() { function rotateVideo(video) { video.style[navigator.mozGetUserMedia ? 'transform' : '-webkit-transform'] = 'rotate(0deg)'; - setTimeout(function () { + setTimeout(function() { video.style[navigator.mozGetUserMedia ? 'transform' : '-webkit-transform'] = 'rotate(360deg)'; }, 1000); } -(function () { +(function() { var uniqueToken = document.getElementById('unique-token'); - if (uniqueToken) if (location.hash.length > 2) uniqueToken.parentNode.parentNode.parentNode.innerHTML = '

      Share this link

      '; - else uniqueToken.innerHTML = uniqueToken.parentNode.parentNode.href = '#' + (Math.random() * new Date().getTime()).toString(36).toUpperCase().replace(/\./g, '-'); -})(); \ No newline at end of file + if (uniqueToken) + if (location.hash.length > 2) uniqueToken.parentNode.parentNode.parentNode.innerHTML = '

      Share this link

      '; + else uniqueToken.innerHTML = uniqueToken.parentNode.parentNode.href = '#' + (Math.random() * new Date().getTime()).toString(36).toUpperCase().replace( /\./g , '-'); +})(); diff --git a/socketio-over-nodejs/README.md b/socketio-over-nodejs/README.md index c1f15397..0274d5d2 100644 --- a/socketio-over-nodejs/README.md +++ b/socketio-over-nodejs/README.md @@ -12,7 +12,7 @@ This experiment is using **socket.io over node.js** for signaling. Follow these `http://localhost:8888/` will be auto-opened. ----- += #### If you want to deploy your application @@ -22,7 +22,7 @@ This experiment is using **socket.io over node.js** for signaling. Follow these and you're done! ----- += #### How to use? @@ -59,7 +59,7 @@ connection.openSignalingChannel = function(config) { `io.connect(URL).emit('new-channel')` starts a new namespace that is used privately or publicly to transmit appropriate stuff e.g. room-details, participation-requests, SDP, ICE, etc. ----- += #### Presence Detection @@ -81,7 +81,7 @@ testChannelPresence('default-channel'); ``` ----- += #### if fails to run.... @@ -102,19 +102,19 @@ childProcess.spawn(chromeURL, ['-incognito', openURL]); Actually, these lines are auto-opening chrome/firefox instances. ----- += #### What is `cd folder-location`? Using this command; you can open project's directory (i.e. folder). ----- += #### What is `node signaler`? This command runs the `signaler.js` file. That file handles socket.io server side stuff. ----- += #### What is `jitsu deploy`? @@ -126,7 +126,7 @@ http://username.jit.su/ See the demo URL: http://webrtc-signaling.jit.su/ ----- += #### Note @@ -144,7 +144,7 @@ It is strongly recommended to use absolute URL including port number: var SIGNALING_SERVER = 'http://domain.com:8888/'; ``` ----- += #### Are you beginner or totally novice? @@ -153,14 +153,20 @@ var SIGNALING_SERVER = 'http://domain.com:8888/'; 3. You can use same command prompt to run any `node.js` file; also you can write `nodejitsu` commands in the same place e.g. `jitsu deploy` or `jitsu login` etc. 4. Default port `8888` is used for this experiment. You can manually open this URL: `http://localhost:8888/` ----- += #### Signaling Concepts Interested to understand WebRTC Signaling Concepts? Read [this document](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/socketio-over-nodejs/Signaling-Concepts.md). ----- += + +#### SSL/TLS/HTTPS/Socket.io/Node.js ?? + +https://github.com/muaz-khan/WebRTC-Experiment/issues/62 + += #### License -[Socket.io over Node.js](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/socketio-over-nodejs) is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[Socket.io over Node.js](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/socketio-over-nodejs) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/socketio-over-nodejs/Signaling-Concepts.md b/socketio-over-nodejs/Signaling-Concepts.md index 9a12c436..fbc5a6ee 100644 --- a/socketio-over-nodejs/Signaling-Concepts.md +++ b/socketio-over-nodejs/Signaling-Concepts.md @@ -1,6 +1,8 @@ #### WebRTC Experiments Signaling Concepts -This document explains inner-parts of the signaling methods used in [WebRTC Experiments](https://webrtc-experiment.appspot.com/). +This document explains inner-parts of the signaling methods used in [WebRTC Experiments](https://www.webrtc-experiment.com/). + += #### Dynamic Channels @@ -13,6 +15,8 @@ Signaling method must have following features: Out of `multiplexing` requirement; simple WebSocket implementation can't be used as signaling method in any WebRTC Experiment. += + #### A sample socket.io implementation ```javascript @@ -33,6 +37,8 @@ Node.js server is expected to fire two events: Node.js must catch messages passed from client-side and broadcast/transmit that message over all other connected sockets. += + #### A full-fledge socket.io implementation / [Source Code](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/socketio-over-nodejs) Node.js server: @@ -68,6 +74,8 @@ function onNewNamespace(channel, sender) { } ``` += + Client side: ```javascript @@ -103,25 +111,33 @@ All WebRTC Experiments separated signaling portion; so you can define a single m `openSignalingChannel` or `openSocket` are kind of those "custom" reusable methods. += + #### What about Firebase? Firebase is an io-based service stores data in JSON format; considered most suitable solution for WebRTC signaling. Its APIs are easier to use and understand. += + #### What about PubNub or Pusher? PubNub or Pusher provides APIs for realtime connection. PubNub uses wider methods and techniques. += + #### Expectations All WebRTC Experiments expects that signaling channels must be able to send and receive messages over unique channels. += + #### Links 1. Demo: http://webrtc-signaling.jit.su/ 2. Source code: https://github.com/muaz-khan/WebRTC-Experiment/blob/master/socketio-over-nodejs ----- += #### License -[WebRTC Experiments](https://github.com/muaz-khan/WebRTC-Experiment) are released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[WebRTC Experiments](https://github.com/muaz-khan/WebRTC-Experiment) are released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/socketio-over-nodejs/webrtc-signaling/README.md b/socketio-over-nodejs/webrtc-signaling/README.md index c360f684..d23acf8f 100644 --- a/socketio-over-nodejs/webrtc-signaling/README.md +++ b/socketio-over-nodejs/webrtc-signaling/README.md @@ -2,7 +2,7 @@ This directory contains only one file: [signaler.js](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/socketio-over-nodejs/webrtc-signaling/signaler.js) / socket.io main script ----- += #### [signaler.js](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/socketio-over-nodejs/webrtc-signaling/signaler.js) @@ -41,8 +41,8 @@ function onNewNamespace(channel, sender) { } ``` ----- += #### License -[WebRTC Experiments](https://github.com/muaz-khan/WebRTC-Experiment) are released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[WebRTC Experiments](https://github.com/muaz-khan/WebRTC-Experiment) are released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/socketio-over-nodejs/webrtc-signaling/static/RTCMultiConnection-v1.4/index.html b/socketio-over-nodejs/webrtc-signaling/static/RTCMultiConnection-v1.4/index.html index 8d56a33d..ead9741d 100644 --- a/socketio-over-nodejs/webrtc-signaling/static/RTCMultiConnection-v1.4/index.html +++ b/socketio-over-nodejs/webrtc-signaling/static/RTCMultiConnection-v1.4/index.html @@ -1,5 +1,5 @@  - + diff --git a/socketio-over-nodejs/webrtc-signaling/static/RTCMultiConnection/index.html b/socketio-over-nodejs/webrtc-signaling/static/RTCMultiConnection/index.html index d115470a..d13bc6a9 100644 --- a/socketio-over-nodejs/webrtc-signaling/static/RTCMultiConnection/index.html +++ b/socketio-over-nodejs/webrtc-signaling/static/RTCMultiConnection/index.html @@ -173,7 +173,7 @@ .eject { background-position: center center !important; background-repeat: no-repeat !important; - background-image: url('https://webrtc-experiment.appspot.com/images/eject.png') !important; + background-image: url('https://www.webrtc-experiment.com/images/eject.png') !important; width: 30px; height: 30px; position: absolute; @@ -330,7 +330,7 @@

      Remote videos container

      diff --git a/socketio-over-nodejs/webrtc-signaling/static/text-chat.html b/socketio-over-nodejs/webrtc-signaling/static/text-chat.html index e506056a..06551142 100644 --- a/socketio-over-nodejs/webrtc-signaling/static/text-chat.html +++ b/socketio-over-nodejs/webrtc-signaling/static/text-chat.html @@ -122,7 +122,7 @@

      WebRTC Experiments! © , 2013 » Email » +
      WebRTC Experiments! © , 2013 » Email » @muazkh» Github » Video Conferencing : HOME diff --git a/socketio-over-nodejs/webrtc-signaling/static/video-conferencing/RTCPeerConnection-v1.5.js b/socketio-over-nodejs/webrtc-signaling/static/video-conferencing/RTCPeerConnection-v1.5.js index c4ca5796..41f0ba82 100644 --- a/socketio-over-nodejs/webrtc-signaling/static/video-conferencing/RTCPeerConnection-v1.5.js +++ b/socketio-over-nodejs/webrtc-signaling/static/video-conferencing/RTCPeerConnection-v1.5.js @@ -1,11 +1,10 @@ -/* - 2013, @muazkh - github.com/muaz-khan - MIT License - https://webrtc-experiment.appspot.com/licence/ - Documentation - https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCPeerConnection -*/ - -window.moz = !! navigator.mozGetUserMedia; -var RTCPeerConnection = function (options) { +// 2013, @muazkh - github.com/muaz-khan +// MIT License - https://webrtc-experiment.appspot.com/licence/ +// Documentation - https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCPeerConnection + +window.moz = !!navigator.mozGetUserMedia; + +function RTCPeerConnection(options) { var w = window, PeerConnection = w.mozRTCPeerConnection || w.webkitRTCPeerConnection, SessionDescription = w.mozRTCSessionDescription || w.RTCSessionDescription, @@ -25,7 +24,7 @@ var RTCPeerConnection = function (options) { }; if (!moz && !options.iceServers) { - if (parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 28) + if (parseInt(navigator.userAgent.match( /Chrom(e|ium)\/([0-9]+)\./ )[2]) >= 28) TURN = { url: 'turn:turn.bistri.com:80', credential: 'homeo', @@ -50,27 +49,41 @@ var RTCPeerConnection = function (options) { }]; } - var peerConnection = new PeerConnection(iceServers, optional); + var peer = new PeerConnection(iceServers, optional); openOffererChannel(); - peerConnection.onicecandidate = onicecandidate; - if (options.attachStream) peerConnection.addStream(options.attachStream); - peerConnection.onaddstream = onaddstream; + peer.onicecandidate = function(event) { + if (event.candidate) + options.onICE(event.candidate); + }; + + // attachStream = MediaStream; + if (options.attachStream) peer.addStream(options.attachStream); - function onicecandidate(event) { - if (!event.candidate || !peerConnection) return; - if (options.onICE) options.onICE(event.candidate); + // attachStreams[0] = audio-stream; + // attachStreams[1] = video-stream; + // attachStreams[2] = screen-capturing-stream; + if (options.attachStreams && options.attachStream.length) { + var streams = options.attachStreams; + for (var i = 0; i < streams.length; i++) { + peer.addStream(streams[i]); + } } - var remoteStreamEventFired = false; + peer.onaddstream = function(event) { + var remoteMediaStream = event.stream; - function onaddstream(event) { - info('------------onaddstream'); - if (remoteStreamEventFired || !event || !options.onRemoteStream) return; - remoteStreamEventFired = true; - options.onRemoteStream(event.stream); - } + // onRemoteStreamEnded(MediaStream) + remoteMediaStream.onended = function() { + if (options.onRemoteStreamEnded) options.onRemoteStreamEnded(remoteMediaStream); + }; + + // onRemoteStream(MediaStream) + if (options.onRemoteStream) options.onRemoteStream(remoteMediaStream); + + console.debug('on:add:stream', remoteMediaStream); + }; var constraints = options.constraints || { optional: [], @@ -80,182 +93,175 @@ var RTCPeerConnection = function (options) { } }; - var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''), - extractedChars = ''; - - function getChars() { - extractedChars += chars[parseInt(Math.random() * 40)] || ''; - if (extractedChars.length < 40) getChars(); - - return extractedChars; - } - - function getInteropSDP(sdp) { - // for audio-only streaming: multiple-crypto lines are not allowed - if (options.onAnswerSDP) - sdp = sdp.replace(/(a=crypto:0 AES_CM_128_HMAC_SHA1_32)(.*?)(\r\n)/g, ''); - - - var inline = getChars() + '\r\n' + (extractedChars = ''); - sdp = sdp.indexOf('a=crypto') == -1 ? sdp.replace(/c=IN/g, - 'a=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:' + inline + - 'c=IN') : sdp; - - sdp = setBandwidth(sdp); - - if (options.offerSDP) { - info('\n--------offer sdp provided by offerer\n'); - info(options.offerSDP.sdp); - } - - info(options.onOfferSDP ? '\n--------offer\n' : '\n--------answer\n'); - info('sdp: ' + sdp); - - return sdp; - } + // onOfferSDP(RTCSessionDescription) function createOffer() { if (!options.onOfferSDP) return; - peerConnection.createOffer(function (sessionDescription) { - sessionDescription.sdp = getInteropSDP(sessionDescription.sdp); - peerConnection.setLocalDescription(sessionDescription); + peer.createOffer(function(sessionDescription) { + sessionDescription.sdp = serializeSdp(sessionDescription.sdp); + peer.setLocalDescription(sessionDescription); options.onOfferSDP(sessionDescription); }, null, constraints); } + // onAnswerSDP(RTCSessionDescription) + function createAnswer() { if (!options.onAnswerSDP) return; - options.offerSDP = new SessionDescription(options.offerSDP); - peerConnection.setRemoteDescription(options.offerSDP); - - peerConnection.createAnswer(function (sessionDescription) { - sessionDescription.sdp = getInteropSDP(sessionDescription.sdp); - peerConnection.setLocalDescription(sessionDescription); + peer.setRemoteDescription(new SessionDescription(options.offerSDP)); + peer.createAnswer(function(sessionDescription) { + sessionDescription.sdp = serializeSdp(sessionDescription.sdp); + peer.setLocalDescription(sessionDescription); options.onAnswerSDP(sessionDescription); }, null, constraints); } - function setBandwidth(sdp) { - // Firefox has no support of "b=AS" - if (moz) return sdp; + // if Mozilla Firefox & DataChannel; offer/answer will be created later + if ((options.onChannelMessage && !moz) || !options.onChannelMessage) { + createOffer(); + createAnswer(); + } + + // DataChannel Bandwidth + + function setBandwidth(sdp) { // remove existing bandwidth lines - sdp = sdp.replace(/b=AS([^\r\n]+\r\n)/g, ''); + sdp = sdp.replace( /b=AS([^\r\n]+\r\n)/g , ''); + sdp = sdp.replace( /a=mid:data\r\n/g , 'a=mid:data\r\nb=AS:1638400\r\n'); + + return sdp; + } + + // old: FF<>Chrome interoperability management + + function getInteropSDP(sdp) { + var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''), + extractedChars = ''; + + function getChars() { + extractedChars += chars[parseInt(Math.random() * 40)] || ''; + if (extractedChars.length < 40) + getChars(); + + return extractedChars; + } + + // for audio-only streaming: multiple-crypto lines are not allowed + if (options.onAnswerSDP) + sdp = sdp.replace( /(a=crypto:0 AES_CM_128_HMAC_SHA1_32)(.*?)(\r\n)/g , ''); - sdp = sdp.replace(/a=mid:audio\r\n/g, 'a=mid:audio\r\nb=AS:50\r\n'); - sdp = sdp.replace(/a=mid:video\r\n/g, 'a=mid:video\r\nb=AS:256\r\n'); - sdp = sdp.replace(/a=mid:data\r\n/g, 'a=mid:data\r\nb=AS:1638400\r\n'); + var inline = getChars() + '\r\n' + (extractedChars = ''); + sdp = sdp.indexOf('a=crypto') == -1 ? sdp.replace( /c=IN/g , + 'a=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:' + inline + + 'c=IN') : sdp; return sdp; } - if ((options.onChannelMessage && !moz) || !options.onChannelMessage) { - createOffer(); - createAnswer(); + function serializeSdp(sdp) { + if (!moz) sdp = setBandwidth(sdp); + sdp = getInteropSDP(sdp); + console.debug(sdp); + return sdp; } + // DataChannel management var channel; function openOffererChannel() { - if (!options.onChannelMessage || (moz && !options.onOfferSDP)) return; + if (!options.onChannelMessage || (moz && !options.onOfferSDP)) + return; _openOffererChannel(); - if (moz && !options.attachStream) { + if (moz) { navigator.mozGetUserMedia({ - audio: true, - fake: true - }, function (stream) { - peerConnection.addStream(stream); - createOffer(); - }, useless); + audio: true, + fake: true + }, function(stream) { + peer.addStream(stream); + createOffer(); + }, useless); } } function _openOffererChannel() { - channel = peerConnection.createDataChannel( - options.channel || 'RTCDataChannel', - moz ? {} : { - reliable: false - }); + channel = peer.createDataChannel(options.channel || 'RTCDataChannel', moz ? { } : { + reliable: false + }); - if (moz) channel.binaryType = 'blob'; + if (moz) + channel.binaryType = 'blob'; setChannelEvents(); } function setChannelEvents() { - channel.onmessage = function (event) { + channel.onmessage = function(event) { if (options.onChannelMessage) options.onChannelMessage(event); }; - channel.onopen = function () { + channel.onopen = function() { if (options.onChannelOpened) options.onChannelOpened(channel); }; - channel.onclose = function (event) { + channel.onclose = function(event) { if (options.onChannelClosed) options.onChannelClosed(event); console.warn('WebRTC DataChannel closed', event); }; - channel.onerror = function (event) { - console.error(event); + channel.onerror = function(event) { if (options.onChannelError) options.onChannelError(event); }; } - if (options.onAnswerSDP && moz) openAnswererChannel(); + if (options.onAnswerSDP && moz && options.onChannelMessage) + openAnswererChannel(); function openAnswererChannel() { - peerConnection.ondatachannel = function (_channel) { - channel = _channel; + peer.ondatachannel = function(event) { + channel = event.channel; channel.binaryType = 'blob'; setChannelEvents(); }; - if (moz && !options.attachStream) { + if (moz) { navigator.mozGetUserMedia({ - audio: true, - fake: true - }, function (stream) { - peerConnection.addStream(stream); - createAnswer(); - }, useless); + audio: true, + fake: true + }, function(stream) { + peer.addStream(stream); + createAnswer(); + }, useless); } } - function useless() {} - - function info(information) { - console.log(information); + function useless() { } return { - addAnswerSDP: function (sdp) { - info('--------adding answer sdp:'); - info(sdp.sdp); - - sdp = new SessionDescription(sdp); - peerConnection.setRemoteDescription(sdp); + addAnswerSDP: function(sdp) { + peer.setRemoteDescription(new SessionDescription(sdp)); }, - addICE: function (candidate) { - info(candidate.candidate); - peerConnection.addIceCandidate(new IceCandidate({ + addICE: function(candidate) { + peer.addIceCandidate(new IceCandidate({ sdpMLineIndex: candidate.sdpMLineIndex, candidate: candidate.candidate })); }, - peer: peerConnection, + peer: peer, channel: channel, - sendData: function (message) { + sendData: function(message) { channel && channel.send(message); } }; -}; +} +// getUserMedia var video_constraints = { - mandatory: {}, + mandatory: { }, optional: [] }; @@ -264,11 +270,11 @@ function getUserMedia(options) { media; n.getMedia = n.webkitGetUserMedia || n.mozGetUserMedia; n.getMedia(options.constraints || { - audio: true, - video: video_constraints - }, streaming, options.onerror || function (e) { - console.error(e); - }); + audio: true, + video: video_constraints + }, streaming, options.onerror || function(e) { + console.error(e); + }); function streaming(stream) { var video = options.video; diff --git a/socketio-over-nodejs/webrtc-signaling/static/video-conferencing/conference-ui.js b/socketio-over-nodejs/webrtc-signaling/static/video-conferencing/conference-ui.js index b32c52f4..bce72877 100644 --- a/socketio-over-nodejs/webrtc-signaling/static/video-conferencing/conference-ui.js +++ b/socketio-over-nodejs/webrtc-signaling/static/video-conferencing/conference-ui.js @@ -1,41 +1,51 @@ -/* MIT License: https://webrtc-experiment.appspot.com/licence/ */ +// 2013, @muazkh » github.com/muaz-khan +// MIT License » https://webrtc-experiment.appspot.com/licence/ +// Documentation » https://github.com/muaz-khan/WebRTC-Experiment/tree/master/video-conferencing -config = { - openSocket : function (config) { - var SIGNALING_SERVER = '/'; - var channel = config.channel || location.hash.replace('#', '') || 'video-conferencing'; - var sender = Math.round(Math.random() * 60535) + 5000; +var config = { + openSocket: function(config) { + var SIGNALING_SERVER = '/', + defaultChannel = location.hash.substr(1) || 'video-conferencing-hangout'; + + var channel = config.channel || defaultChannel; + var sender = Math.round(Math.random() * 999999999) + 999999999; io.connect(SIGNALING_SERVER).emit('new-channel', { channel: channel, - sender : sender + sender: sender }); var socket = io.connect(SIGNALING_SERVER + channel); socket.channel = channel; - socket.on('connect', function () { + socket.on('connect', function() { if (config.callback) config.callback(socket); }); - socket.send = function (message) { + socket.send = function(message) { socket.emit('message', { sender: sender, - data : message + data: message }); }; socket.on('message', config.onmessage); }, - onRemoteStream: function (media) { + onRemoteStream: function(media) { var video = media.video; + video.setAttribute('controls', true); + video.setAttribute('id', media.stream.id); participants.insertBefore(video, participants.firstChild); video.play(); rotateVideo(video); }, - onRoomFound : function (room) { + onRemoteStreamEnded: function(stream) { + var video = document.getElementById(stream.id); + if (video) video.parentNode.removeChild(video); + }, + onRoomFound: function(room) { var alreadyExist = document.getElementById(room.broadcaster); if (alreadyExist) return; @@ -44,15 +54,15 @@ config = { var tr = document.createElement('tr'); tr.setAttribute('id', room.broadcaster); tr.innerHTML = '

      ' + - ''; + ''; roomsList.insertBefore(tr, roomsList.firstChild); - tr.onclick = function () { + tr.onclick = function() { var tr = this; - captureUserMedia(function () { + captureUserMedia(function() { conferenceUI.joinRoom({ roomToken: tr.querySelector('.join').id, - joinUser : tr.id + joinUser: tr.id }); }); hideUnnecessaryStuff(); @@ -61,7 +71,7 @@ config = { }; function createButtonClickHandler() { - captureUserMedia(function () { + captureUserMedia(function() { conferenceUI.createRoom({ roomName: (document.getElementById('conference-name') || { }).value || 'Anonymous' }); @@ -76,28 +86,28 @@ function captureUserMedia(callback) { participants.insertBefore(video, participants.firstChild); getUserMedia({ - video : video, - onsuccess: function (stream) { + video: video, + onsuccess: function(stream) { config.attachStream = stream; callback && callback(); video.setAttribute('muted', true); rotateVideo(video); }, - onerror : function () { + onerror: function() { alert('unable to get access to your webcam'); callback && callback(); } }); } -/* on page load: get public rooms */ -conferenceUI = conference(config); +// You can use! window.onload = function() {} +var conferenceUI = conference(config); /* UI specific */ -participants = document.getElementById("participants") || document.body; -startConferencing = document.getElementById('start-conferencing'); -roomsList = document.getElementById('rooms-list'); +var participants = document.getElementById("participants") || document.body; +var startConferencing = document.getElementById('start-conferencing'); +var roomsList = document.getElementById('rooms-list'); if (startConferencing) startConferencing.onclick = createButtonClickHandler; @@ -111,17 +121,14 @@ function hideUnnecessaryStuff() { function rotateVideo(video) { video.style[navigator.mozGetUserMedia ? 'transform' : '-webkit-transform'] = 'rotate(0deg)'; - setTimeout(function () { + setTimeout(function() { video.style[navigator.mozGetUserMedia ? 'transform' : '-webkit-transform'] = 'rotate(360deg)'; }, 1000); } -(function () { - uniqueToken = document.getElementById('unique-token'); - if (uniqueToken) if (location.hash.length > 2) uniqueToken.parentNode.parentNode.parentNode.innerHTML = '

      You can share this private link with your friends.

      '; - else uniqueToken.innerHTML = uniqueToken.parentNode.parentNode.href = (function () { - return "#private-" + ("" + 1e10).replace(/[018]/g, function (a) { - return (a ^ Math.random() * 16 >> a / 4).toString(16); - }); - })(); -})(); \ No newline at end of file +(function() { + var uniqueToken = document.getElementById('unique-token'); + if (uniqueToken) + if (location.hash.length > 2) uniqueToken.parentNode.parentNode.parentNode.innerHTML = '

      Share this link

      '; + else uniqueToken.innerHTML = uniqueToken.parentNode.parentNode.href = '#' + (Math.random() * new Date().getTime()).toString(36).toUpperCase().replace( /\./g , '-'); +})(); diff --git a/socketio-over-nodejs/webrtc-signaling/static/video-conferencing/conference.js b/socketio-over-nodejs/webrtc-signaling/static/video-conferencing/conference.js index 9be610f2..8607a54d 100644 --- a/socketio-over-nodejs/webrtc-signaling/static/video-conferencing/conference.js +++ b/socketio-over-nodejs/webrtc-signaling/static/video-conferencing/conference.js @@ -1,18 +1,21 @@ -/* MIT License: https://webrtc-experiment.appspot.com/licence/ - It is recommended to use RTCMultiConnection.js for audio/video/screen sharing: - */ +// 2013, @muazkh » github.com/muaz-khan +// MIT License » https://webrtc-experiment.appspot.com/licence/ +// Documentation » https://github.com/muaz-khan/WebRTC-Experiment/tree/master/video-conferencing -var conference = function (config) { - var self = { userToken: uniqueToken() }, - channels = '--', +var conference = function(config) { + var self = { + userToken: uniqueToken() + }; + var channels = '--', isbroadcaster, isGetNewRoom = true, - defaultSocket = {}; + sockets = [], + defaultSocket = { }; function openDefaultSocket() { defaultSocket = config.openSocket({ onmessage: onDefaultSocketResponse, - callback : function (socket) { + callback: function(socket) { defaultSocket = socket; } }); @@ -28,9 +31,8 @@ var conference = function (config) { if (response.userToken && response.joinUser == self.userToken && response.participant && channels.indexOf(response.userToken) == -1) { channels += response.userToken + '--'; openSubSocket({ - isofferer : true, - channel : response.channel || response.userToken, - closeSocket: true + isofferer: true, + channel: response.channel || response.userToken }); } } @@ -38,33 +40,38 @@ var conference = function (config) { function openSubSocket(_config) { if (!_config.channel) return; var socketConfig = { - channel : _config.channel, + channel: _config.channel, onmessage: socketResponse, - callback : function (_socket) { - socket = _socket; + onopen: function() { if (isofferer && !peer) initPeer(); + sockets[sockets.length] = socket; } }; + socketConfig.callback = function(_socket) { + socket = _socket; + this.onopen(); + }; + var socket = config.openSocket(socketConfig), isofferer = _config.isofferer, gotstream, video = document.createElement('video'), - inner = {}, + inner = { }, peer; var peerConfig = { - attachStream : config.attachStream, - onICE : function (candidate) { + attachStream: config.attachStream, + onICE: function(candidate) { socket.send({ userToken: self.userToken, candidate: { sdpMLineIndex: candidate.sdpMLineIndex, - candidate : JSON.stringify(candidate.candidate) + candidate: JSON.stringify(candidate.candidate) } }); }, - onRemoteStream: function (stream) { + onRemoteStream: function(stream) { if (!stream) return; video[moz ? 'mozSrcObject' : 'src'] = moz ? stream : webkitURL.createObjectURL(stream); @@ -72,6 +79,10 @@ var conference = function (config) { _config.stream = stream; onRemoteStreamStartsFlowing(); + }, + onRemoteStreamEnded: function(stream) { + if (config.onRemoteStreamEnded) + config.onRemoteStreamEnded(stream); } }; @@ -90,77 +101,51 @@ var conference = function (config) { if (!(video.readyState <= HTMLMediaElement.HAVE_CURRENT_DATA || video.paused || video.currentTime <= 0)) { gotstream = true; - config.onRemoteStream({ - video : video, - stream: _config.stream - }); + if (config.onRemoteStream) + config.onRemoteStream({ + video: video, + stream: _config.stream + }); if (isbroadcaster && channels.split('--').length > 3) { /* broadcasting newly connected participant for video-conferencing! */ defaultSocket.send({ newParticipant: socket.channel, - userToken : self.userToken + userToken: self.userToken }); } - /* closing subsocket here on the offerer side */ - if (_config.closeSocket) socket = null; - } else setTimeout(onRemoteStreamStartsFlowing, 50); } function sendsdp(sdp) { - sdp = JSON.stringify(sdp); - var part = parseInt(sdp.length / 3); - - var firstPart = sdp.slice(0, part), - secondPart = sdp.slice(part, sdp.length - 1), - thirdPart = ''; - - if (sdp.length > part + part) { - secondPart = sdp.slice(part, part + part); - thirdPart = sdp.slice(part + part, sdp.length); - } - socket.send({ userToken: self.userToken, - firstPart: firstPart - }); - - socket.send({ - userToken : self.userToken, - secondPart: secondPart - }); - - socket.send({ - userToken: self.userToken, - thirdPart: thirdPart + sdp: JSON.stringify(sdp) }); } function socketResponse(response) { if (response.userToken == self.userToken) return; - if (response.firstPart || response.secondPart || response.thirdPart) { - if (response.firstPart) { - inner.firstPart = response.firstPart; - if (inner.secondPart && inner.thirdPart) selfInvoker(); - } - if (response.secondPart) { - inner.secondPart = response.secondPart; - if (inner.firstPart && inner.thirdPart) selfInvoker(); - } - - if (response.thirdPart) { - inner.thirdPart = response.thirdPart; - if (inner.firstPart && inner.secondPart) selfInvoker(); - } + if (response.sdp) { + inner.sdp = JSON.parse(response.sdp); + selfInvoker(); } if (response.candidate && !gotstream) { - peer && peer.addICE({ - sdpMLineIndex: response.candidate.sdpMLineIndex, - candidate : JSON.parse(response.candidate.candidate) - }); + if (!peer) console.error('missed an ice', response.candidate); + else + peer.addICE({ + sdpMLineIndex: response.candidate.sdpMLineIndex, + candidate: JSON.parse(response.candidate.candidate) + }); + } + + if (response.left) { + if (peer && peer.peer) { + peer.peer.close(); + peer.peer = null; + } } } @@ -171,16 +156,37 @@ var conference = function (config) { invokedOnce = true; - inner.sdp = JSON.parse(inner.firstPart + inner.secondPart + inner.thirdPart); if (isofferer) peer.addAnswerSDP(inner.sdp); else initPeer(inner.sdp); } } + function leave() { + var length = sockets.length; + for (var i = 0; i < length; i++) { + var socket = sockets[i]; + if (socket) { + socket.send({ + left: true, + userToken: self.userToken + }); + delete sockets[i]; + } + } + } + + window.onbeforeunload = function() { + leave(); + }; + + window.onkeyup = function(e) { + if (e.keyCode == 116) leave(); + }; + function startBroadcasting() { defaultSocket && defaultSocket.send({ - roomToken : self.roomToken, - roomName : self.roomName, + roomToken: self.roomToken, + roomName: self.roomName, broadcaster: self.userToken }); setTimeout(startBroadcasting, 3000); @@ -192,20 +198,19 @@ var conference = function (config) { var new_channel = uniqueToken(); openSubSocket({ - channel : new_channel, - closeSocket: true + channel: new_channel }); defaultSocket.send({ participant: true, - userToken : self.userToken, - joinUser : channel, - channel : new_channel + userToken: self.userToken, + joinUser: channel, + channel: new_channel }); } function uniqueToken() { - var s4 = function () { + var s4 = function() { return Math.floor(Math.random() * 0x10000).toString(16); }; return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4(); @@ -213,7 +218,7 @@ var conference = function (config) { openDefaultSocket(); return { - createRoom: function (_config) { + createRoom: function(_config) { self.roomName = _config.roomName || 'Anonymous'; self.roomToken = uniqueToken(); @@ -221,7 +226,7 @@ var conference = function (config) { isGetNewRoom = false; startBroadcasting(); }, - joinRoom : function (_config) { + joinRoom: function(_config) { self.roomToken = _config.roomToken; isGetNewRoom = false; @@ -231,9 +236,9 @@ var conference = function (config) { defaultSocket.send({ participant: true, - userToken : self.userToken, - joinUser : _config.joinUser + userToken: self.userToken, + joinUser: _config.joinUser }); } }; -}; \ No newline at end of file +}; diff --git a/socketio-over-nodejs/webrtc-signaling/static/video-conferencing/index.html b/socketio-over-nodejs/webrtc-signaling/static/video-conferencing/index.html index 85e99577..a112951a 100644 --- a/socketio-over-nodejs/webrtc-signaling/static/video-conferencing/index.html +++ b/socketio-over-nodejs/webrtc-signaling/static/video-conferencing/index.html @@ -145,7 +145,7 @@ -
      ' + room.roomName + ' ' + room.roomName + '
      @@ -200,12 +200,12 @@

      WebRTC Experiments!© , 2013 » Email» +

      WebRTC Experiments!© , 2013 » Email» @muazkh» Github

      - + \ No newline at end of file diff --git a/text-chat/README.md b/text-chat/README.md index fbd8a9d3..f2593fb7 100644 --- a/text-chat/README.md +++ b/text-chat/README.md @@ -1,4 +1,4 @@ -#### WebRTC Text Chat i.e. Data Sharing / [Demo](https://webrtc-experiment.appspot.com/text-chat/) +#### WebRTC Text Chat i.e. Data Sharing / [Demo](https://www.webrtc-experiment.com/text-chat/) `DataConnection.js` library lets you: @@ -6,15 +6,15 @@ 2. Share text message of any length 3. Text data regardless of the size and type ----- += #### First Step: Link the library ```html - + ``` ----- += #### Last Step: Start using it! @@ -29,7 +29,7 @@ document.getElementById('setup-new-connection').onclick = function() { }; ``` ----- += #### Text Chat i.e. Text Sharing @@ -43,7 +43,7 @@ You may want to share direct messages: connection.channels['user-id'].send('longest possible text message'); ``` ----- += #### Errors Handling @@ -55,7 +55,7 @@ connection.onerror = function(event, userid) {} connection.onclose = function(event, userid) {} ``` ----- += #### Custom user-ids? @@ -63,7 +63,7 @@ connection.onclose = function(event, userid) {} connection.userid = 'username'; ``` ----- += #### Custom signaling channel? @@ -102,7 +102,7 @@ connection.firebase = 'chat'; Want to use XHR, WebSockets, SIP, XMPP, etc. for signaling? Read [this post](https://github.com/muaz-khan/WebRTC-Experiment/issues/56#issuecomment-20090650). ----- += #### Want to manually join rooms? @@ -117,7 +117,7 @@ connection.onconnection = function(room) { `onconnection` is called for each new data connection; and `join` method allows you manually join previously created connections. ----- += #### If someone leaves... @@ -129,11 +129,11 @@ connection.onuserleft = function(userid) { }; ``` ----- += #### Browser Support -This [DataConnection.js](https://webrtc-experiment.appspot.com/data-connection.js) library is compatible to following web-browsers: +This [DataConnection.js](https://www.webrtc-experiment.com/data-connection.js) library is compatible to following web-browsers: | Browser | Support | | ------------- |-------------| @@ -141,8 +141,8 @@ This [DataConnection.js](https://webrtc-experiment.appspot.com/data-connection.j | Google Chrome | [Stable](https://www.google.com/intl/en_uk/chrome/browser/) / [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) / [Beta](https://www.google.com/intl/en/chrome/browser/beta.html) / [Dev](https://www.google.com/intl/en/chrome/browser/index.html?extra=devchannel#eula) | | Android | [Chrome Beta](https://play.google.com/store/apps/details?id=com.chrome.beta&hl=en) | ----- += #### License -[DataConnection.js](https://webrtc-experiment.appspot.com/data-connection.js) is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[DataConnection.js](https://www.webrtc-experiment.com/data-connection.js) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/text-chat/index.html b/text-chat/index.html index 9867965c..59f360e8 100644 --- a/text-chat/index.html +++ b/text-chat/index.html @@ -132,8 +132,8 @@ margin-left: 6em; } - - + +

      @@ -145,7 +145,7 @@

      Muaz Khan<@muazkh>.

      -
      +

      Setup a new connection:

      @@ -256,7 +256,7 @@



      -<script src="https://webrtc-experiment.appspot.com/data-connection.js"></script>
      +<script src="https://www.webrtc-experiment.com/data-connection.js"></script>
       
       var connection = new DataConnection();
      @@ -293,8 +293,8 @@ 

      Send Message

      - + diff --git a/video-conferencing/README.md b/video-conferencing/README.md index 37be9fbd..b8f24b94 100644 --- a/video-conferencing/README.md +++ b/video-conferencing/README.md @@ -1,6 +1,6 @@ -#### WebRTC Group video sharing / [Demo](https://webrtc-experiment.appspot.com/video-conferencing/) +#### WebRTC Group video sharing / [Demo](https://www.webrtc-experiment.com/video-conferencing/) ----- += #### How `video conferencing` Works? @@ -11,6 +11,8 @@ For 10 people sharing videos in a group: 1. Creating 10 `unique` peer connections 2. Opening 10 unique `sockets` to exchange SDP/ICE += + For your information; in One-to-One video session; 4 RTP streams/ports get open: 1. One RTP port for **outgoing video** @@ -18,12 +20,16 @@ For your information; in One-to-One video session; 4 RTP streams/ports get open: 3. One RTP port for **incoming video** 4. One RTP port for **incoming audio** += + So, for 10 peers sharing video in a group; `40 RTP` ports get open. Which causes: 1. Blurry video experience 2. Unclear voice 3. Bandwidth issues / slow streaming += + The best solution is to use a **middle media server** like **asterisk** or **kamailio** to broadcast your camera stream. To overcome burden and to deliver HD stream over thousands of peers; we need a media server that should **broadcast** stream coming from room owner's side. @@ -53,11 +59,11 @@ Media server should mix all video streams; and stream it over single RTP port. If 10 room participants are sending video streams; server should mix them to generate a single media stream; then send that stream over single **incoming** RTP port opened between server and **room initiator**. ----- += #### Browser Support -This [WebRTC Video Conferencing](https://webrtc-experiment.appspot.com/video-conferencing/) experiment works fine on following web-browsers: +This [WebRTC Video Conferencing](https://www.webrtc-experiment.com/video-conferencing/) experiment works fine on following web-browsers: | Browser | Support | | ------------- |-------------| @@ -65,8 +71,8 @@ This [WebRTC Video Conferencing](https://webrtc-experiment.appspot.com/video-con | Google Chrome | [Stable](https://www.google.com/intl/en_uk/chrome/browser/) / [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) / [Beta](https://www.google.com/intl/en/chrome/browser/beta.html) / [Dev](https://www.google.com/intl/en/chrome/browser/index.html?extra=devchannel#eula) | | Android | [Chrome Beta](https://play.google.com/store/apps/details?id=com.chrome.beta&hl=en) | ----- += #### License -[WebRTC Video Conferencing](https://webrtc-experiment.appspot.com/video-conferencing/) is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[WebRTC Video Conferencing](https://www.webrtc-experiment.com/video-conferencing/) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/video-conferencing/conference-ui.js b/video-conferencing/conference-ui.js index 161647c5..b3ff657c 100644 --- a/video-conferencing/conference-ui.js +++ b/video-conferencing/conference-ui.js @@ -1,34 +1,51 @@ -/* - 2013, @muazkh - github.com/muaz-khan - MIT License - https://webrtc-experiment.appspot.com/licence/ - Documentation - https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCMultiConnection -*/ +// 2013, @muazkh » github.com/muaz-khan +// MIT License » https://webrtc-experiment.appspot.com/licence/ +// Documentation » https://github.com/muaz-khan/WebRTC-Experiment/tree/master/video-conferencing var config = { - openSocket: function (config) { - var channel = config.channel || location.hash.replace('#', '') || 'video-conferencing'; - var socket = new Firebase('https://webrtc-experiment.firebaseIO.com/' + channel); + openSocket: function(config) { + var SIGNALING_SERVER = 'https://www.webrtc-experiment.com:8553/', + defaultChannel = location.hash.substr(1) || 'video-conferencing-hangout'; + + var channel = config.channel || defaultChannel; + var sender = Math.round(Math.random() * 999999999) + 999999999; + + io.connect(SIGNALING_SERVER).emit('new-channel', { + channel: channel, + sender: sender + }); + + var socket = io.connect(SIGNALING_SERVER + channel); socket.channel = channel; - socket.on('child_added', function (data) { - config.onmessage(data.val()); + socket.on('connect', function() { + if (config.callback) config.callback(socket); }); - socket.send = function (data) { - this.push(data); - } - config.onopen && setTimeout(config.onopen, 1); - socket.onDisconnect().remove(); - return socket; + + socket.send = function(message) { + socket.emit('message', { + sender: sender, + data: message + }); + }; + + socket.on('message', config.onmessage); }, - onRemoteStream: function (media) { + onRemoteStream: function(media) { var video = media.video; + video.setAttribute('controls', true); + video.setAttribute('id', media.stream.id); participants.insertBefore(video, participants.firstChild); video.play(); rotateVideo(video); }, - onRoomFound: function (room) { + onRemoteStreamEnded: function(stream) { + var video = document.getElementById(stream.id); + if (video) video.parentNode.removeChild(video); + }, + onRoomFound: function(room) { var alreadyExist = document.getElementById(room.broadcaster); if (alreadyExist) return; @@ -40,9 +57,9 @@ var config = { '

      '; roomsList.insertBefore(tr, roomsList.firstChild); - tr.onclick = function () { + tr.onclick = function() { var tr = this; - captureUserMedia(function () { + captureUserMedia(function() { conferenceUI.joinRoom({ roomToken: tr.querySelector('.join').id, joinUser: tr.id @@ -54,7 +71,7 @@ var config = { }; function createButtonClickHandler() { - captureUserMedia(function () { + captureUserMedia(function() { conferenceUI.createRoom({ roomName: (document.getElementById('conference-name') || { }).value || 'Anonymous' }); @@ -70,21 +87,21 @@ function captureUserMedia(callback) { getUserMedia({ video: video, - onsuccess: function (stream) { + onsuccess: function(stream) { config.attachStream = stream; callback && callback(); video.setAttribute('muted', true); rotateVideo(video); }, - onerror: function () { + onerror: function() { alert('unable to get access to your webcam'); callback && callback(); } }); } -/* on page load: get public rooms */ +// You can use! window.onload = function() {} var conferenceUI = conference(config); /* UI specific */ @@ -104,13 +121,14 @@ function hideUnnecessaryStuff() { function rotateVideo(video) { video.style[navigator.mozGetUserMedia ? 'transform' : '-webkit-transform'] = 'rotate(0deg)'; - setTimeout(function () { + setTimeout(function() { video.style[navigator.mozGetUserMedia ? 'transform' : '-webkit-transform'] = 'rotate(360deg)'; }, 1000); } -(function () { +(function() { var uniqueToken = document.getElementById('unique-token'); - if (uniqueToken) if (location.hash.length > 2) uniqueToken.parentNode.parentNode.parentNode.innerHTML = '

      Share this link

      '; - else uniqueToken.innerHTML = uniqueToken.parentNode.parentNode.href = '#' + (Math.random() * new Date().getTime()).toString(36).toUpperCase().replace(/\./g, '-'); -})(); \ No newline at end of file + if (uniqueToken) + if (location.hash.length > 2) uniqueToken.parentNode.parentNode.parentNode.innerHTML = '

      Share this link

      '; + else uniqueToken.innerHTML = uniqueToken.parentNode.parentNode.href = '#' + (Math.random() * new Date().getTime()).toString(36).toUpperCase().replace( /\./g , '-'); +})(); diff --git a/video-conferencing/conference.js b/video-conferencing/conference.js index 2ecf9bb3..8607a54d 100644 --- a/video-conferencing/conference.js +++ b/video-conferencing/conference.js @@ -1,21 +1,24 @@ -/* MIT License: https://webrtc-experiment.appspot.com/licence/ */ +// 2013, @muazkh » github.com/muaz-khan +// MIT License » https://webrtc-experiment.appspot.com/licence/ +// Documentation » https://github.com/muaz-khan/WebRTC-Experiment/tree/master/video-conferencing -var conference = function (config) { +var conference = function(config) { var self = { userToken: uniqueToken() - }, - channels = '--', + }; + var channels = '--', isbroadcaster, isGetNewRoom = true, - defaultSocket = {}; + sockets = [], + defaultSocket = { }; function openDefaultSocket() { defaultSocket = config.openSocket({ - onmessage: onDefaultSocketResponse, - callback: function (socket) { - defaultSocket = socket; - } - }); + onmessage: onDefaultSocketResponse, + callback: function(socket) { + defaultSocket = socket; + } + }); } function onDefaultSocketResponse(response) { @@ -28,10 +31,9 @@ var conference = function (config) { if (response.userToken && response.joinUser == self.userToken && response.participant && channels.indexOf(response.userToken) == -1) { channels += response.userToken + '--'; openSubSocket({ - isofferer: true, - channel: response.channel || response.userToken, - closeSocket: true - }); + isofferer: true, + channel: response.channel || response.userToken + }); } } @@ -40,12 +42,13 @@ var conference = function (config) { var socketConfig = { channel: _config.channel, onmessage: socketResponse, - onopen: function () { + onopen: function() { if (isofferer && !peer) initPeer(); + sockets[sockets.length] = socket; } }; - socketConfig.callback = function (_socket) { + socketConfig.callback = function(_socket) { socket = _socket; this.onopen(); }; @@ -54,21 +57,21 @@ var conference = function (config) { isofferer = _config.isofferer, gotstream, video = document.createElement('video'), - inner = {}, + inner = { }, peer; var peerConfig = { attachStream: config.attachStream, - onICE: function (candidate) { + onICE: function(candidate) { socket.send({ - userToken: self.userToken, - candidate: { - sdpMLineIndex: candidate.sdpMLineIndex, - candidate: JSON.stringify(candidate.candidate) - } - }); + userToken: self.userToken, + candidate: { + sdpMLineIndex: candidate.sdpMLineIndex, + candidate: JSON.stringify(candidate.candidate) + } + }); }, - onRemoteStream: function (stream) { + onRemoteStream: function(stream) { if (!stream) return; video[moz ? 'mozSrcObject' : 'src'] = moz ? stream : webkitURL.createObjectURL(stream); @@ -76,6 +79,10 @@ var conference = function (config) { _config.stream = stream; onRemoteStreamStartsFlowing(); + }, + onRemoteStreamEnded: function(stream) { + if (config.onRemoteStreamEnded) + config.onRemoteStreamEnded(stream); } }; @@ -94,7 +101,8 @@ var conference = function (config) { if (!(video.readyState <= HTMLMediaElement.HAVE_CURRENT_DATA || video.paused || video.currentTime <= 0)) { gotstream = true; - config.onRemoteStream({ + if (config.onRemoteStream) + config.onRemoteStream({ video: video, stream: _config.stream }); @@ -102,70 +110,43 @@ var conference = function (config) { if (isbroadcaster && channels.split('--').length > 3) { /* broadcasting newly connected participant for video-conferencing! */ defaultSocket.send({ - newParticipant: socket.channel, - userToken: self.userToken - }); + newParticipant: socket.channel, + userToken: self.userToken + }); } - /* closing subsocket here on the offerer side */ - if (_config.closeSocket) socket = null; - } else setTimeout(onRemoteStreamStartsFlowing, 50); } function sendsdp(sdp) { - sdp = JSON.stringify(sdp); - var part = parseInt(sdp.length / 3); - - var firstPart = sdp.slice(0, part), - secondPart = sdp.slice(part, sdp.length - 1), - thirdPart = ''; - - if (sdp.length > part + part) { - secondPart = sdp.slice(part, part + part); - thirdPart = sdp.slice(part + part, sdp.length); - } - - socket.send({ - userToken: self.userToken, - firstPart: firstPart - }); - - socket.send({ - userToken: self.userToken, - secondPart: secondPart - }); - socket.send({ - userToken: self.userToken, - thirdPart: thirdPart - }); + userToken: self.userToken, + sdp: JSON.stringify(sdp) + }); } function socketResponse(response) { if (response.userToken == self.userToken) return; - if (response.firstPart || response.secondPart || response.thirdPart) { - if (response.firstPart) { - inner.firstPart = response.firstPart; - if (inner.secondPart && inner.thirdPart) selfInvoker(); - } - if (response.secondPart) { - inner.secondPart = response.secondPart; - if (inner.firstPart && inner.thirdPart) selfInvoker(); - } - - if (response.thirdPart) { - inner.thirdPart = response.thirdPart; - if (inner.firstPart && inner.secondPart) selfInvoker(); - } + if (response.sdp) { + inner.sdp = JSON.parse(response.sdp); + selfInvoker(); } if (response.candidate && !gotstream) { - peer && peer.addICE({ + if (!peer) console.error('missed an ice', response.candidate); + else + peer.addICE({ sdpMLineIndex: response.candidate.sdpMLineIndex, candidate: JSON.parse(response.candidate.candidate) }); } + + if (response.left) { + if (peer && peer.peer) { + peer.peer.close(); + peer.peer = null; + } + } } var invokedOnce = false; @@ -175,18 +156,39 @@ var conference = function (config) { invokedOnce = true; - inner.sdp = JSON.parse(inner.firstPart + inner.secondPart + inner.thirdPart); if (isofferer) peer.addAnswerSDP(inner.sdp); else initPeer(inner.sdp); } } + function leave() { + var length = sockets.length; + for (var i = 0; i < length; i++) { + var socket = sockets[i]; + if (socket) { + socket.send({ + left: true, + userToken: self.userToken + }); + delete sockets[i]; + } + } + } + + window.onbeforeunload = function() { + leave(); + }; + + window.onkeyup = function(e) { + if (e.keyCode == 116) leave(); + }; + function startBroadcasting() { defaultSocket && defaultSocket.send({ - roomToken: self.roomToken, - roomName: self.roomName, - broadcaster: self.userToken - }); + roomToken: self.roomToken, + roomName: self.roomName, + broadcaster: self.userToken + }); setTimeout(startBroadcasting, 3000); } @@ -196,20 +198,19 @@ var conference = function (config) { var new_channel = uniqueToken(); openSubSocket({ - channel: new_channel, - closeSocket: true - }); + channel: new_channel + }); defaultSocket.send({ - participant: true, - userToken: self.userToken, - joinUser: channel, - channel: new_channel - }); + participant: true, + userToken: self.userToken, + joinUser: channel, + channel: new_channel + }); } function uniqueToken() { - var s4 = function () { + var s4 = function() { return Math.floor(Math.random() * 0x10000).toString(16); }; return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4(); @@ -217,7 +218,7 @@ var conference = function (config) { openDefaultSocket(); return { - createRoom: function (_config) { + createRoom: function(_config) { self.roomName = _config.roomName || 'Anonymous'; self.roomToken = uniqueToken(); @@ -225,19 +226,19 @@ var conference = function (config) { isGetNewRoom = false; startBroadcasting(); }, - joinRoom: function (_config) { + joinRoom: function(_config) { self.roomToken = _config.roomToken; isGetNewRoom = false; openSubSocket({ - channel: self.userToken - }); + channel: self.userToken + }); defaultSocket.send({ - participant: true, - userToken: self.userToken, - joinUser: _config.joinUser - }); + participant: true, + userToken: self.userToken, + joinUser: _config.joinUser + }); } }; }; diff --git a/video-conferencing/index.html b/video-conferencing/index.html index 2ff38a87..5935f78f 100644 --- a/video-conferencing/index.html +++ b/video-conferencing/index.html @@ -172,7 +172,7 @@
      @@ -210,10 +210,10 @@

      - - - - + + + +
      @@ -241,13 +241,13 @@

      WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @muazkh» Github

      - + diff --git a/webrtc-broadcasting/README.md b/webrtc-broadcasting/README.md index 943f6f5c..6c82caaa 100644 --- a/webrtc-broadcasting/README.md +++ b/webrtc-broadcasting/README.md @@ -1,4 +1,4 @@ -#### WebRTC One-Way video sharing/broadcasting / [Demo](https://webrtc-experiment.appspot.com/webrtc-broadcasting/) +#### WebRTC One-Way video sharing/broadcasting / [Demo](https://www.webrtc-experiment.com/webrtc-broadcasting/) Participants can view your broadcasted video **anonymously**. They can also listen you without allowing access to their own microphone! @@ -10,6 +10,8 @@ You can: 2. Share you camera in one-way over many peers 3. Share/transmit your voice in one-way over many peers += + #### How WebRTC One-Way Broadcasting Works? It is a **one-to-many** audio/video/screen sharing experiment. However, only room initiator will be asked to allow access to camera/microphone because his media stream will be shared in one-way over all connected peers. @@ -37,9 +39,11 @@ For users who are watching your video stream anonymously; **2 incoming RTP** por Again, because it is one-way streaming; **no outgoing RTP ports** will be opened on room participants' side. += + #### Browser Support -This [WebRTC One-Way Broadcasting](https://webrtc-experiment.appspot.com/webrtc-broadcasting/) experiment works fine on following web-browsers: +This [WebRTC One-Way Broadcasting](https://www.webrtc-experiment.com/webrtc-broadcasting/) experiment works fine on following web-browsers: | Browser | Support | | ------------- |-------------| @@ -47,6 +51,8 @@ This [WebRTC One-Way Broadcasting](https://webrtc-experiment.appspot.com/webrtc- | Google Chrome | [Stable](https://www.google.com/intl/en_uk/chrome/browser/) / [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) / [Beta](https://www.google.com/intl/en/chrome/browser/beta.html) / [Dev](https://www.google.com/intl/en/chrome/browser/index.html?extra=devchannel#eula) | | Android | [Chrome Beta](https://play.google.com/store/apps/details?id=com.chrome.beta&hl=en) | += + #### License -[WebRTC One-Way Broadcasting](https://webrtc-experiment.appspot.com/webrtc-broadcasting/) experiment is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[WebRTC One-Way Broadcasting](https://www.webrtc-experiment.com/webrtc-broadcasting/) experiment is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/webrtc-broadcasting/broadcast-ui.js b/webrtc-broadcasting/broadcast-ui.js index 7ad0e629..ea7d4508 100644 --- a/webrtc-broadcasting/broadcast-ui.js +++ b/webrtc-broadcasting/broadcast-ui.js @@ -1,17 +1,34 @@ -var config = { +// 2013, @muazkh » github.com/muaz-khan +// MIT License » https://webrtc-experiment.appspot.com/licence/ +// Documentation » https://github.com/muaz-khan/WebRTC-Experiment/tree/master/webrtc-broadcasting + +var config = { openSocket: function (config) { - var channel = config.channel || location.hash.replace('#', '') || 'video-oneway-broadcasting'; - var socket = new Firebase('https://webrtc.firebaseIO.com/' + channel); + var SIGNALING_SERVER = 'https://www.webrtc-experiment.com:8553/', + defaultChannel = location.hash.substr(1) || 'video-oneway-broadcasting'; + + var channel = config.channel || defaultChannel; + var sender = Math.round(Math.random() * 999999999) + 999999999; + + io.connect(SIGNALING_SERVER).emit('new-channel', { + channel: channel, + sender: sender + }); + + var socket = io.connect(SIGNALING_SERVER + channel); socket.channel = channel; - socket.on("child_added", function (data) { - config.onmessage && config.onmessage(data.val()); + socket.on('connect', function() { + if (config.callback) config.callback(socket); }); - socket.send = function(data) { - this.push(data); + + socket.send = function(message) { + socket.emit('message', { + sender: sender, + data: message + }); }; - config.onopen && setTimeout(config.onopen, 1); - socket.onDisconnect().remove(); - return socket; + + socket.on('message', config.onmessage); }, onRemoteStream: function (htmlElement) { htmlElement.setAttribute('controls', true); @@ -33,7 +50,7 @@ if (room.isAudio) tr.setAttribute('accesskey', room.isAudio); tr.innerHTML = '

      ' + - ''; + ''; roomsList.insertBefore(tr, roomsList.firstChild); tr.onclick = function () { diff --git a/webrtc-broadcasting/index.html b/webrtc-broadcasting/index.html index 1e5e1b09..091af9c3 100644 --- a/webrtc-broadcasting/index.html +++ b/webrtc-broadcasting/index.html @@ -129,7 +129,7 @@
      ' + room.roomName + '
      @@ -171,10 +171,10 @@

      - - - - + + + +
      1. Share your screen in one-way over many peers
      2. @@ -205,14 +205,14 @@

        WebRTC Experiments!© + WebRTC Experiments!© , 2013 » Email» @muazkh» Github

        - + \ No newline at end of file diff --git a/websocket-over-nodejs/README.md b/websocket-over-nodejs/README.md index f6671fd7..98e49cfc 100644 --- a/websocket-over-nodejs/README.md +++ b/websocket-over-nodejs/README.md @@ -12,7 +12,7 @@ This experiment is using **WebSocket over Node.js** for signaling. Follow these `http://localhost:9999/` will be auto-opened. ----- += #### If you want to deploy your application @@ -22,7 +22,7 @@ This experiment is using **WebSocket over Node.js** for signaling. Follow these and you're done! ----- += #### How to use? @@ -55,7 +55,7 @@ openSignalingChannel: function(config) { } ``` ----- += #### Presence Detection @@ -83,7 +83,7 @@ function testChannelPresence(channel) { testChannelPresence('default-channel'); ``` ----- += #### Ports @@ -110,7 +110,7 @@ var SIGNALING_SERVER = 'ws://' + document.domain + ':8888/'; var websocket = new WebSocket(SIGNALING_SERVER); ``` ----- += #### if fails to run.... @@ -131,19 +131,19 @@ childProcess.spawn(chromeURL, ['-incognito', openURL]); Actually, these lines are auto-opening chrome/firefox instances. ----- += #### What is `cd folder-location`? Using this command; you can open project's directory (i.e. folder) in a command prompt window. ----- += #### What is `node signaler`? This command runs the `signaler.js` file as a Node.js instance. That file handles `WebSocket over Node.js` server side stuff. ----- += #### What is `jitsu deploy`? @@ -155,7 +155,7 @@ http://username.jit.su/ See the demo URL: http://websocket-over-nodejs.jit.su/ ----- += #### Are you beginner or totally novice? @@ -164,13 +164,13 @@ See the demo URL: http://websocket-over-nodejs.jit.su/ 3. You can use same command prompt to run any `node.js` file; also you can write `nodejitsu` commands in the same place e.g. `jitsu deploy` or `jitsu login` etc. 4. Default port `9999` is used for this experiment. You can manually open this URL: `http://localhost:9999/` ----- += #### Signaling Concepts Interested to understand WebRTC Signaling Concepts? Read [this document](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/socketio-over-nodejs/Signaling-Concepts.md). ----- += #### License diff --git a/websocket-over-nodejs/video-conferencing/RTCPeerConnection-v1.5.js b/websocket-over-nodejs/video-conferencing/RTCPeerConnection-v1.5.js index 980fd0f4..41f0ba82 100644 --- a/websocket-over-nodejs/video-conferencing/RTCPeerConnection-v1.5.js +++ b/websocket-over-nodejs/video-conferencing/RTCPeerConnection-v1.5.js @@ -1,35 +1,37 @@ -/* MIT License: https://webrtc-experiment.appspot.com/licence/ - 2013, Muaz Khan--[github.com/muaz-khan] +// 2013, @muazkh - github.com/muaz-khan +// MIT License - https://webrtc-experiment.appspot.com/licence/ +// Documentation - https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCPeerConnection - Demo & Documentation: http://bit.ly/RTCPeerConnection-Documentation */ -window.moz = !! navigator.mozGetUserMedia; -var RTCPeerConnection = function (options) { +window.moz = !!navigator.mozGetUserMedia; + +function RTCPeerConnection(options) { var w = window, PeerConnection = w.mozRTCPeerConnection || w.webkitRTCPeerConnection, SessionDescription = w.mozRTCSessionDescription || w.RTCSessionDescription, IceCandidate = w.mozRTCIceCandidate || w.RTCIceCandidate; - STUN = { + var STUN = { url: !moz ? 'stun:stun.l.google.com:19302' : 'stun:23.21.150.121' }; - TURN = { - url: 'turn:webrtc%40live.com@numb.viagenie.ca', - credential: 'muazkh' + var TURN = { + url: 'turn:homeo@turn.bistri.com:80', + credential: 'homeo' }; - iceServers = { + var iceServers = { iceServers: options.iceServers || [STUN] }; if (!moz && !options.iceServers) { - if (parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 28) + if (parseInt(navigator.userAgent.match( /Chrom(e|ium)\/([0-9]+)\./ )[2]) >= 28) TURN = { - url: 'turn:numb.viagenie.ca', - credential: 'muazkh', - username: 'webrtc@live.com' - }; - iceServers.iceServers = [TURN, STUN]; + url: 'turn:turn.bistri.com:80', + credential: 'homeo', + username: 'homeo' + }; + + iceServers.iceServers = [STUN, TURN]; } var optional = { @@ -38,38 +40,50 @@ var RTCPeerConnection = function (options) { if (!moz) { optional.optional = [{ - DtlsSrtpKeyAgreement: true - } - ]; + DtlsSrtpKeyAgreement: true + }]; if (options.onChannelMessage) optional.optional = [{ - RtpDataChannels: true - } - ]; + RtpDataChannels: true + }]; } - var peerConnection = new PeerConnection(iceServers, optional); + var peer = new PeerConnection(iceServers, optional); openOffererChannel(); - peerConnection.onicecandidate = onicecandidate; - if (options.attachStream) peerConnection.addStream(options.attachStream); - peerConnection.onaddstream = onaddstream; + peer.onicecandidate = function(event) { + if (event.candidate) + options.onICE(event.candidate); + }; - function onicecandidate(event) { - if (!event.candidate || !peerConnection) return; - if (options.onICE) options.onICE(event.candidate); + // attachStream = MediaStream; + if (options.attachStream) peer.addStream(options.attachStream); + + // attachStreams[0] = audio-stream; + // attachStreams[1] = video-stream; + // attachStreams[2] = screen-capturing-stream; + if (options.attachStreams && options.attachStream.length) { + var streams = options.attachStreams; + for (var i = 0; i < streams.length; i++) { + peer.addStream(streams[i]); + } } - var remoteStreamEventFired = false; + peer.onaddstream = function(event) { + var remoteMediaStream = event.stream; - function onaddstream(event) { - info('------------onaddstream'); - if (remoteStreamEventFired || !event || !options.onRemoteStream) return; - remoteStreamEventFired = true; - options.onRemoteStream(event.stream); - } + // onRemoteStreamEnded(MediaStream) + remoteMediaStream.onended = function() { + if (options.onRemoteStreamEnded) options.onRemoteStreamEnded(remoteMediaStream); + }; + + // onRemoteStream(MediaStream) + if (options.onRemoteStream) options.onRemoteStream(remoteMediaStream); + + console.debug('on:add:stream', remoteMediaStream); + }; var constraints = options.constraints || { optional: [], @@ -79,168 +93,175 @@ var RTCPeerConnection = function (options) { } }; - var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''), - extractedChars = ''; + // onOfferSDP(RTCSessionDescription) - function getChars() { - extractedChars += chars[parseInt(Math.random() * 40)] || ''; - if (extractedChars.length < 40) getChars(); + function createOffer() { + if (!options.onOfferSDP) return; - return extractedChars; + peer.createOffer(function(sessionDescription) { + sessionDescription.sdp = serializeSdp(sessionDescription.sdp); + peer.setLocalDescription(sessionDescription); + options.onOfferSDP(sessionDescription); + }, null, constraints); } - function getInteropSDP(sdp) { - // for audio-only streaming: multiple-crypto lines are not allowed - if (options.onAnswerSDP) - sdp = sdp.replace(/(a=crypto:0 AES_CM_128_HMAC_SHA1_32)(.*?)(\r\n)/g, ''); + // onAnswerSDP(RTCSessionDescription) + function createAnswer() { + if (!options.onAnswerSDP) return; - var inline = getChars() + '\r\n' + (extractedChars = ''); - sdp = sdp.indexOf('a=crypto') == -1 ? sdp.replace(/c=IN/g, - 'a=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:' + inline + - 'c=IN') : sdp; + peer.setRemoteDescription(new SessionDescription(options.offerSDP)); + peer.createAnswer(function(sessionDescription) { + sessionDescription.sdp = serializeSdp(sessionDescription.sdp); + peer.setLocalDescription(sessionDescription); + options.onAnswerSDP(sessionDescription); + }, null, constraints); + } - if (options.offerSDP) { - info('\n--------offer sdp provided by offerer\n'); - info(options.offerSDP.sdp); - } + // if Mozilla Firefox & DataChannel; offer/answer will be created later + if ((options.onChannelMessage && !moz) || !options.onChannelMessage) { + createOffer(); + createAnswer(); + } - info(options.onOfferSDP ? '\n--------offer\n' : '\n--------answer\n'); - info('sdp: ' + sdp); + + // DataChannel Bandwidth + + function setBandwidth(sdp) { + // remove existing bandwidth lines + sdp = sdp.replace( /b=AS([^\r\n]+\r\n)/g , ''); + sdp = sdp.replace( /a=mid:data\r\n/g , 'a=mid:data\r\nb=AS:1638400\r\n'); return sdp; } - if (moz && !options.onChannelMessage) constraints.mandatory.MozDontOfferDataChannel = true; + // old: FF<>Chrome interoperability management - function createOffer() { - if (!options.onOfferSDP) return; + function getInteropSDP(sdp) { + var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''), + extractedChars = ''; - peerConnection.createOffer(function (sessionDescription) { - sessionDescription.sdp = getInteropSDP(sessionDescription.sdp); - peerConnection.setLocalDescription(sessionDescription); - options.onOfferSDP(sessionDescription); - }, null, constraints); - } + function getChars() { + extractedChars += chars[parseInt(Math.random() * 40)] || ''; + if (extractedChars.length < 40) + getChars(); - function createAnswer() { - if (!options.onAnswerSDP) return; + return extractedChars; + } - options.offerSDP = new SessionDescription(options.offerSDP); - peerConnection.setRemoteDescription(options.offerSDP); + // for audio-only streaming: multiple-crypto lines are not allowed + if (options.onAnswerSDP) + sdp = sdp.replace( /(a=crypto:0 AES_CM_128_HMAC_SHA1_32)(.*?)(\r\n)/g , ''); - peerConnection.createAnswer(function (sessionDescription) { - sessionDescription.sdp = getInteropSDP(sessionDescription.sdp); - peerConnection.setLocalDescription(sessionDescription); - options.onAnswerSDP(sessionDescription); - }, null, constraints); + var inline = getChars() + '\r\n' + (extractedChars = ''); + sdp = sdp.indexOf('a=crypto') == -1 ? sdp.replace( /c=IN/g , + 'a=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:' + inline + + 'c=IN') : sdp; + + return sdp; } - if ((options.onChannelMessage && !moz) || !options.onChannelMessage) { - createOffer(); - createAnswer(); + function serializeSdp(sdp) { + if (!moz) sdp = setBandwidth(sdp); + sdp = getInteropSDP(sdp); + console.debug(sdp); + return sdp; } + // DataChannel management var channel; function openOffererChannel() { - if (!options.onChannelMessage || (moz && !options.onOfferSDP)) return; + if (!options.onChannelMessage || (moz && !options.onOfferSDP)) + return; _openOffererChannel(); - if (moz && !options.attachStream) { + if (moz) { navigator.mozGetUserMedia({ audio: true, fake: true - }, function (stream) { - peerConnection.addStream(stream); + }, function(stream) { + peer.addStream(stream); createOffer(); }, useless); } } function _openOffererChannel() { - channel = peerConnection.createDataChannel( - options.channel || 'RTCDataChannel', - moz ? {} : { - reliable: false - }); + channel = peer.createDataChannel(options.channel || 'RTCDataChannel', moz ? { } : { + reliable: false + }); - if (moz) channel.binaryType = 'blob'; + if (moz) + channel.binaryType = 'blob'; setChannelEvents(); } function setChannelEvents() { - channel.onmessage = function (event) { + channel.onmessage = function(event) { if (options.onChannelMessage) options.onChannelMessage(event); }; - channel.onopen = function () { + channel.onopen = function() { if (options.onChannelOpened) options.onChannelOpened(channel); }; - channel.onclose = function (event) { + channel.onclose = function(event) { if (options.onChannelClosed) options.onChannelClosed(event); console.warn('WebRTC DataChannel closed', event); }; - channel.onerror = function (event) { - console.error(event); + channel.onerror = function(event) { if (options.onChannelError) options.onChannelError(event); }; } - if (options.onAnswerSDP && moz) openAnswererChannel(); + if (options.onAnswerSDP && moz && options.onChannelMessage) + openAnswererChannel(); function openAnswererChannel() { - peerConnection.ondatachannel = function (_channel) { - channel = _channel; + peer.ondatachannel = function(event) { + channel = event.channel; channel.binaryType = 'blob'; setChannelEvents(); }; - if (moz && !options.attachStream) { + if (moz) { navigator.mozGetUserMedia({ audio: true, fake: true - }, function (stream) { - peerConnection.addStream(stream); + }, function(stream) { + peer.addStream(stream); createAnswer(); }, useless); } } - function useless() {} - - function info(information) { - console.log(information); + function useless() { } return { - addAnswerSDP: function (sdp) { - info('--------adding answer sdp:'); - info(sdp.sdp); - - sdp = new SessionDescription(sdp); - peerConnection.setRemoteDescription(sdp); + addAnswerSDP: function(sdp) { + peer.setRemoteDescription(new SessionDescription(sdp)); }, - addICE: function (candidate) { - info(candidate.candidate); - peerConnection.addIceCandidate(new IceCandidate({ - sdpMLineIndex: candidate.sdpMLineIndex, - candidate: candidate.candidate - })); + addICE: function(candidate) { + peer.addIceCandidate(new IceCandidate({ + sdpMLineIndex: candidate.sdpMLineIndex, + candidate: candidate.candidate + })); }, - peer: peerConnection, + peer: peer, channel: channel, - sendData: function (message) { + sendData: function(message) { channel && channel.send(message); } }; -}; +} +// getUserMedia var video_constraints = { - mandatory: {}, + mandatory: { }, optional: [] }; @@ -251,7 +272,7 @@ function getUserMedia(options) { n.getMedia(options.constraints || { audio: true, video: video_constraints - }, streaming, options.onerror || function (e) { + }, streaming, options.onerror || function(e) { console.error(e); }); diff --git a/websocket-over-nodejs/video-conferencing/index.html b/websocket-over-nodejs/video-conferencing/index.html index 94a9eaa5..90e418fd 100644 --- a/websocket-over-nodejs/video-conferencing/index.html +++ b/websocket-over-nodejs/video-conferencing/index.html @@ -172,14 +172,14 @@
        - ↑ WEBRTC EXPERIMENTS + ↑ WEBRTC EXPERIMENTS

        WebRTC video-conferencing & WebSocket over Node.js

        Copyright © 2013 Muaz Khan<@muazkh>.

        -
        +
        @@ -224,11 +224,11 @@

        - + \ No newline at end of file diff --git a/websocket/README.md b/websocket/README.md index 767d267e..810a4441 100644 --- a/websocket/README.md +++ b/websocket/README.md @@ -1,8 +1,8 @@ -#### WebRTC One-to-One video sharing using WebSockets / [Demo](https://webrtc-experiment.appspot.com/websocket/) +#### WebRTC One-to-One video sharing using WebSockets / [Demo](https://www.webrtc-experiment.com/websocket/) This `WebRTC Experiment` is using `WebSockets` for signalig. ----- += #### How to use your own WebSocket implementation? @@ -37,11 +37,11 @@ openSignalingChannel: function(config) { In `ui.js` files you can find `openSocket` method; or in all libraries; you can find `openSignalingChannel` method. ----- += #### Browser Support -This [One-to-one WebRTC video chat using WebSocket](https://webrtc-experiment.appspot.com/websocket/) experiment works fine on following web-browsers: +This [One-to-one WebRTC video chat using WebSocket](https://www.webrtc-experiment.com/websocket/) experiment works fine on following web-browsers: | Browser | Support | | ------------- |-------------| @@ -49,8 +49,8 @@ This [One-to-one WebRTC video chat using WebSocket](https://webrtc-experiment.ap | Google Chrome | [Stable](https://www.google.com/intl/en_uk/chrome/browser/) / [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) / [Beta](https://www.google.com/intl/en/chrome/browser/beta.html) / [Dev](https://www.google.com/intl/en/chrome/browser/index.html?extra=devchannel#eula) | | Android | [Chrome Beta](https://play.google.com/store/apps/details?id=com.chrome.beta&hl=en) | ----- += #### License -[WebRTC One-to-One video sharing using WebSockets](https://webrtc-experiment.appspot.com/websocket/) is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). +[WebRTC One-to-One video sharing using WebSockets](https://www.webrtc-experiment.com/websocket/) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503). diff --git a/websocket/index.html b/websocket/index.html index 8beca1e6..b083ad04 100644 --- a/websocket/index.html +++ b/websocket/index.html @@ -172,7 +172,7 @@

        @@ -208,10 +208,10 @@

        - - - - + + + +

        WebRTC one-to-one video sharing experiment where PubNub's WebSocket implementation is used for signaling.