Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
1) Fixed Signaling-Server.js for backward “checkPresence” compatibility.
2) Added new demo: Capture & Share screen from any HTTPs domain:

https://rtcmulticonnection.herokuapp.com/demos/Cross-Domain-Screen-Captu
ring.html

So you don’t need to deploy chrome extension yourself. Simply use
getScreenId.js as you can see in the above demo.

3) Fixed mute/unmute on cordova/iOS

4) Now using our own TURN-servers. Now you will get better results!!!
  • Loading branch information
muaz-khan committed May 1, 2016
1 parent 3c1f6bd commit d87693a
Show file tree
Hide file tree
Showing 14 changed files with 332 additions and 32 deletions.
5 changes: 3 additions & 2 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@ node_js:
- "0.11"
install: npm install
before_script:
- npm install grunt-cli
- npm install grunt
- npm install grunt-cli@0.1.13 -g
- npm install grunt@0.4.5
- grunt
after_failure: npm install && grunt
matrix:
fast_finish: true
57 changes: 55 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ More info about `forever-service` [here](http://stackoverflow.com/a/36027516/552
| Change Video Resolutions in your Live Sessions | [Demo](https://rtcmulticonnection.herokuapp.com/demos/change-resolutions.html) | [Source](https://github.com/muaz-khan/RTCMultiConnection/tree/master/demos/change-resolutions.html) |
| Admin/Guest demo | [Demo](https://rtcmulticonnection.herokuapp.com/demos/admin-guest.html) | [Source](https://github.com/muaz-khan/RTCMultiConnection/tree/master/demos/admin-guest.html) |
| Check if StreamHasData | [Demo](https://rtcmulticonnection.herokuapp.com/demos/StreamHasData.html) | [Source](https://github.com/muaz-khan/RTCMultiConnection/tree/master/demos/StreamHasData.html) |
| Capture & Share Screen from any domain! | [Demo](https://rtcmulticonnection.herokuapp.com/demos/Cross-Domain-Screen-Capturing.html) | [Source](https://github.com/muaz-khan/RTCMultiConnection/tree/master/demos/Cross-Domain-Screen-Capturing.html) |

## Link Script Files

Expand All @@ -141,7 +142,7 @@ All files from `/dist` directory are available on CDN: `https://cdn.webrtc-exper
<script src="https://cdn.webrtc-experiment.com:443/rmc3.min.js"></script>

<!-- or specific version -->
<script src="https://github.com/muaz-khan/RTCMultiConnection/releases/download/3.3.3/rmc3.min.js"></script>
<script src="https://github.com/muaz-khan/RTCMultiConnection/releases/download/3.3.4/rmc3.min.js"></script>
```

If you're sharing files, you also need to link:
Expand All @@ -153,7 +154,7 @@ If you're sharing files, you also need to link:
<script src="https://cdn.webrtc-experiment.com:443/rmc3.fbr.min.js"></script>

<!-- or specific version -->
<script src="https://github.com/muaz-khan/RTCMultiConnection/releases/download/3.3.3/rmc3.fbr.min.js"></script>
<script src="https://github.com/muaz-khan/RTCMultiConnection/releases/download/3.3.4/rmc3.fbr.min.js"></script>
```

> You can link multiple files from `dev` directory. Order doesn't matters.
Expand Down Expand Up @@ -1154,6 +1155,58 @@ connection.getScreenConstraints = function(callback) {
};
```

## Cross-Domain Screen Capturing

First step, install this chrome extension:

* https://chrome.google.com/webstore/detail/screen-capturing/ajhifddimkapgcifgcodmmfdlknahffk

Now use below code in any RTCMultiConnection-v3 (screen) demo:

```html
<script src="/dev/globals.js"></script>

<!-- capture screen from any HTTPs domain! -->
<script src="https://cdn.webrtc-experiment.com:443/getScreenId.js"></script>

<script>
// Using getScreenId.js to capture screen from any domain
// You do NOT need to deploy Chrome Extension YOUR-Self!!
connection.getScreenConstraints = function(callback, audioPlusTab) {
if (isAudioPlusTab(connection, audioPlusTab)) {
audioPlusTab = true;
}
getScreenConstraints(function(error, screen_constraints) {
if (!error) {
screen_constraints = connection.modifyScreenConstraints(screen_constraints);
callback(error, screen_constraints);
}
}, audioPlusTab);
};
</script>
```

Don't want to link `/dev/globals.js` or want to simplify codes???

```html
<!-- capture screen from any HTTPs domain! -->
<script src="https://cdn.webrtc-experiment.com:443/getScreenId.js"></script>

<script>
// Using getScreenId.js to capture screen from any domain
// You do NOT need to deploy Chrome Extension YOUR-Self!!
connection.getScreenConstraints = function(callback) {
getScreenConstraints(function(error, screen_constraints) {
if (!error) {
screen_constraints = connection.modifyScreenConstraints(screen_constraints);
callback(error, screen_constraints);
}
});
};
</script>
```

## Firebase?

If you are willing to use Firebase instead of Socket.io there, open [GruntFile.js](https://github.com/muaz-khan/RTCMultiConnection/blob/master/Gruntfile.js#L26) and replace `SocketConnection.js` with `FirebaseConnection.js`.
Expand Down
12 changes: 6 additions & 6 deletions RTCMultiConnection.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// Last time updated: 2016-04-26 5:20:49 AM UTC
// Last time updated: 2016-05-01 3:16:54 PM UTC

// _____________________
// RTCMultiConnection-v3
Expand Down Expand Up @@ -2368,10 +2368,10 @@
}

function setMuteHandlers(connection, streamEvent) {
if (!streamEvent.stream || !streamEvent.stream.addEventListener) return;
if (!streamEvent.stream || !streamEvent.stream || !streamEvent.stream.addEventListener) return;

streamEvent.stream.addEventListener('mute', function(event) {
event = connection.streamEvents[event.target.streamid];
event = connection.streamEvents[streamEvent.streamid];

event.session = {
audio: event.muteType === 'audio',
Expand All @@ -2382,7 +2382,7 @@
}, false);

streamEvent.stream.addEventListener('unmute', function(event) {
event = connection.streamEvents[event.target.streamid];
event = connection.streamEvents[streamEvent.streamid];

event.session = {
audio: event.unmuteType === 'audio',
Expand Down Expand Up @@ -4372,8 +4372,8 @@
var iceServers = [];

iceServers.push(getSTUNObj('stun:stun.l.google.com:19302'));
iceServers.push(getTURNObj('turn:turn.bistri.com:80', 'homeo', 'homeo'));
iceServers.push(getTURNObj('turn:turn.anyfirewall.com:443', 'webrtc', 'webrtc'));
iceServers.push(getTURNObj('turn:webrtcweb.com:80', 'muazkh', 'muazkh'));
iceServers.push(getTURNObj('turn:webrtcweb.com:443', 'muazkh', 'muazkh'));

if (window.RMCExternalIceServers) {
iceServers = iceServers.concat(getExtenralIceFormatted());
Expand Down
8 changes: 4 additions & 4 deletions RTCMultiConnection.min.js

Large diffs are not rendered by default.

13 changes: 13 additions & 0 deletions Signaling-Server.js
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,19 @@ module.exports = exports = function(app, socketCallback) {
return;
}

// for v3 backward compatibility; >v3.3.3 no more uses below block
if (message.remoteUserId == 'system') {
if (message.message.detectPresence) {
if (message.message.userid === socket.userid) {
callback(false, socket.userid);
return;
}

callback(!!listOfUsers[message.message.userid], message.message.userid);
return;
}
}

if (!listOfUsers[message.sender]) {
listOfUsers[message.sender] = {
socket: socket,
Expand Down
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "rtcmulticonnection",
"description": "RTCMultiConnection is a WebRTC JavaScript wrapper library runs top over RTCPeerConnection API to provide multi-session establishment scenarios.",
"version": "3.3.3",
"version": "3.3.4",
"authors": [
{
"name": "Muaz Khan",
Expand Down
229 changes: 229 additions & 0 deletions demos/Cross-Domain-Screen-Capturing.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,229 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

<link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">

<title>Capture & Share Screen from any domain! using RTCMultiConnection-v3</title>

<meta name="description" content="Capture & Share Screen from any domain! using RTCMultiConnection v3" />
<meta name="keywords" content="WebRTC,RTCMultiConnection,Demos,Experiments,Samples,Examples" />

<style>
* {
word-wrap:break-word;
}
video {
object-fit: fill;
width: 100%;
}
button,
input,
select {
font-weight: normal;
padding: 2px 4px;
text-decoration: none;
display: inline-block;
text-shadow: none;
font-size: 16px;
outline: none;
}

.make-center {
text-align: center;
padding: 5px 10px;
}

img, input, textarea {
max-width: 100%
}

@media all and (max-width: 500px) {
.fork-left, .fork-right, .github-stargazers {
display: none;
}
}
</style>
</head>

<body>
<article>

<header style="text-align: center;">
<h1>Capture & Share Screen from any domain! using RTCMultiConnection-v3</h1>
<p>
<a href="https://rtcmulticonnection.herokuapp.com/">HOME</a>
<span> &copy; </span>
<a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a> .
<a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a> .
<a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a> .
<a href="https://github.com/muaz-khan/RTCMultiConnection/issues?state=open" target="_blank">Latest issues</a> .
<a href="https://github.com/muaz-khan/RTCMultiConnection/commits/master" target="_blank">What's New?</a>
</p>
</header>

<div class="github-stargazers"></div>

<blockquote>
You MUST have to install this chrome extension:<br>
<a href="https://chrome.google.com/webstore/detail/screen-capturing/ajhifddimkapgcifgcodmmfdlknahffk">https://chrome.google.com/webstore/detail/screen-capturing/ajhifddimkapgcifgcodmmfdlknahffk</a>
<br><br>
Now try this HTML demo file on any HTTPs domain and it will work!

<br><br>
<strong>Note:</strong> You may need to set "<a href="https://github.com/muaz-khan/RTCMultiConnection#set-different-socket-url">connection.socketURL</a>" in this HTML file.
</blockquote>

<section class="experiment">
<div class="make-center">
<input type="text" id="room-id" value="abcdef" autocorrect=off autocapitalize=off size=20>
<button id="open-room">Open Room</button>
<button id="join-room">Join Room</button>
<button id="open-or-join-room">Auto Open Or Join Room</button>
</div>

<div id="videos-container"></div>
</section>

<!-- <script src="/dist/rmc3.min.js"></script> -->
<script src="https://cdn.webrtc-experiment.com:443/rmc3.min.js"></script>

<script src="/dev/globals.js"></script>

<!-- capture screen from any HTTPs domain! -->
<script src="https://cdn.webrtc-experiment.com:443/getScreenId.js"></script>

<!-- socket.io for signaling -->
<script src="/socket.io/socket.io.js"></script>

<script>
// ......................................................
// .......................UI Code........................
// ......................................................

document.getElementById('open-room').onclick = function() {
this.disabled = true;
connection.open(document.getElementById('room-id').value);

document.getElementById('room-id').onkeyup();
};

document.getElementById('join-room').onclick = function() {
this.disabled = true;
connection.join(document.getElementById('room-id').value);

document.getElementById('room-id').onkeyup();
};

document.getElementById('open-or-join-room').onclick = function() {
this.disabled = true;
connection.openOrJoin(document.getElementById('room-id').value);

document.getElementById('room-id').onkeyup();
};

// ......................................................
// ..................RTCMultiConnection Code.............
// ......................................................

var connection = new RTCMultiConnection();

// by default, socket.io server is assumed to be deployed on your own URL
connection.socketURL = '/';

// comment-out below line if you do not have your own socket.io server
// connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';

connection.socketMessageEvent = 'cross-domain-screen-capture-demo';

var roomid = '';
if(localStorage.getItem('rmc-room-id')) {
roomid = localStorage.getItem('rmc-room-id');
}
else {
roomid = connection.token();
}
document.getElementById('room-id').value = roomid;
document.getElementById('room-id').onkeyup = function() {
localStorage.setItem('rmc-room-id', this.value);
};

connection.session = {
screen: true,
oneway: true
};

connection.sdpConstraints.mandatory = {
OfferToReceiveAudio: false,
OfferToReceiveVideo: true
};

connection.videosContainer = document.getElementById('videos-container');
connection.onstream = function(event) {
connection.videosContainer.appendChild(event.mediaElement);
event.mediaElement.play();
setTimeout(function() {
event.mediaElement.play();
}, 5000);
};

// Using getScreenId.js to capture screen from any domain
// You do NOT need to deploy Chrome Extension YOUR-Self!!
connection.getScreenConstraints = function(callback, audioPlusTab) {
if (isAudioPlusTab(connection, audioPlusTab)) {
audioPlusTab = true;
}

getScreenConstraints(function(error, screen_constraints) {
if (!error) {
screen_constraints = connection.modifyScreenConstraints(screen_constraints);
callback(error, screen_constraints);
}
}, audioPlusTab);
};
</script>

<section class="experiment own-widgets latest-commits">
<h2 class="header" id="updates" style="color: red;padding-bottom: .1em;"><a href="https://github.com/muaz-khan/RTCMultiConnection/commits/master">Latest Updates</a></h2>
<div id="github-commits"></div>
</section>

<section class="experiment own-widgets">
<h2 class="header" id="updates" style="color: red;padding-bottom: .1em;"><a href="https://github.com/muaz-khan/RTCMultiConnection/issues">Latest Issues</a></h2>
<div id="github-issues"></div>
</section>

<section class="experiment">
<h2 class="header" id="feedback">Feedback</h2>
<div>
<textarea id="message" style="height: 8em; margin: .2em; width: 98%; border: 1px solid rgb(189, 189, 189); outline: none; resize: vertical;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
</div>
<button id="send-message" style="font-size: 1em;">Send Message</button><small style="margin-left:1em;">Enter your email too; if you want "direct" reply!</small>
</section>

<a href="https://github.com/muaz-khan/RTCMultiConnection" class="fork-left"></a>

<script>
window.useThisGithubPath = 'muaz-khan/RTCMultiConnection';
</script>
<script src="https://cdn.webrtc-experiment.com/commits.js" async></script>

</article>

<footer>
<p>
<a href="https://www.webrtc-experiment.com">WebRTC Experiments</a> © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
<a href="mailto:[email protected]" target="_blank">[email protected]</a>
<a href="https://github.com/muaz-khan" target="_blank">Github</a>
</p>
</footer>

</body>

</html>
Loading

0 comments on commit d87693a

Please sign in to comment.