Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add webRTC screen sharing demo #102

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+40,442 −84
Open

Add webRTC screen sharing demo #102

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0c7d602
Add webRTC screen sharing demo
Apr 10, 2017
1f738bb
add possibility to use screen as media-source(screen sharing)
Apr 10, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions samples/screen-sharing/css/bootstrap.min.css
View file

Large diffs are not rendered by default.

Binary file added samples/screen-sharing/favicon.ico
View file
Binary file not shown.
Binary file added samples/screen-sharing/img/female_head.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added samples/screen-sharing/img/man_head.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added samples/screen-sharing/img/telestax_logo_white.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
76 changes: 76 additions & 0 deletions samples/screen-sharing/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title> WebRTC screen sharing demo </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="favicon.ico" rel="shortcut icon">
<script src="js/lib/jquery.min.js">
</script>
<script src="js/lib/bootstrap.min.js">
</script>
<script src='js/lib/adapter.js'>
</script>
<script src='js/lib/jain-sip.js'>
</script>
<script src='js/lib/WebRTComm.js'>
</script>
<script src='js/lib/RestCommWebClient.js'>
</script>
</head>

<body>
<div class="container-fluid">
<div id="header">
<div class="row" style="background-color:#272D50">
<div class="col-md-12"> <img src="img/telestax_logo_white.png" style="padding:20px"> </div>
</div>
</div>
<div class="jumbotron" id="helloJumbo" style="display:none">
<h3 id="helloJumboUser"><span class="label label-success">#</span> </h3>
<p>
<a class="btn btn-primary btn-lg" href="#" id="helloJumboButton" role="button" style="background-color:#272D50"></a>
</p>
</div>
</div>
<div class="container" id="chooseUserForm">
<div class="alert alert-info alert-dismissible" role="alert" style="margin-top:2%;"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> <strong>Important!</strong> Please <a href="#" class="alert-link" id="extDownloadHref">download</a> and <a href="http://www.howtogeek.com/120743/how-to-install-extensions-from-outside-the-chrome-web-store/" class="alert-link">install</a> screen capture extension before using this demo. </div>
<div class="row" style="margin-top:10%"">
<div class="col-md-4"> </div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" style="background-color:#272D50">
<h3 class="text-center" style="padding:5px">
<font color="white"><b>Choose user</b></font>
</h3>
</div>
<div class="panel-body" style="display: inline">
<div> <img height="150" src="img/female_head.png" style="margin:30px" width="150"> <button class="btn btn-primary btn-lg" id="aliceButton" style="background-color:#272D50;margin:30px" type="button"><b>Alice</b></button> </div>
<div> <img height="150" src="img/man_head.png" style="margin:30px" width="150"> <button class="btn btn-primary btn-lg" id="bobButton" style="background-color:#272D50;margin:30px" type="button"><b>Bob</b></button> </div>
</div>
</div>
</div>
<div class="col-md-4"> </div>
</div>
</div>
<div class="container-fluid">
<div class="panel panel-default" id="localScreenPanel" style="display:none">
<div class="panel-heading">Local screen</div>
<div class="panel-body"><video autoplay id="screenVideoLocal"></video></div>
</div>
<div class="panel panel-default" id="remoteScreenPanel" style="display:none">
<div class="panel-heading">Remote screen</div>
<div class="panel-body"><video autoplay id="screenVideoRemote"></video></div>
</div>
</div>
<script>
var jsElm = document.createElement("script");
jsElm.type = "application/javascript";
jsElm.src = "js/client.js";
document.body.appendChild(jsElm);
</script>
</body>

</html>
144 changes: 144 additions & 0 deletions samples/screen-sharing/js/client.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
var aliceButton = document.getElementById("aliceButton");
var bobButton = document.getElementById("bobButton");
var chooseUserForm = document.getElementById("chooseUserForm");
var helloJumbo = document.getElementById("helloJumbo");
var helloJumboUser = document.getElementById("helloJumboUser");
var helloJumboButton = document.getElementById("helloJumboButton");
var screenVideoLocal = document.getElementById("screenVideoLocal");
var screenVideoRemote = document.getElementById("screenVideoRemote");
var extDownloadHref = document.getElementById("extDownloadHref");
var localVideoPanel = document.getElementById("localScreenPanel");
var remoteVideoPanel = document.getElementById("remoteScreenPanel");

var currentUser;
var currentConnection;
aliceButton.onclick = showAlicePage;
bobButton.onclick = showBobPage;


$(document).ready(function() {
extDownloadHref.href = location.protocol + "//" + location.host + location.pathname + "screen-sharing-extension.crx";
});

function showAlicePage() {
showPageOf("alice");
}

function showBobPage() {
showPageOf("bob");
}

function showPageOf(user) {
currentUser = user;
connectToRestcomm();
}

function connectToRestcomm() {
var parameters = {
'debug': true,
'username': currentUser,
'password': '1234',
'registrar': 'wss://localhost:5063',
'domain': 'localhost'
};

RestCommClient.Device.setup(parameters);

RestCommClient.Device.ready(function(device) {
console.log(currentUser + " : Ready");
prepareInitJumbo();
});

RestCommClient.Device.error(function(error) {
console.error(currentUser + " : " + error.message);
});

RestCommClient.Device.connect(function(connection) {
console.log(currentUser + " : Successfully established call");
fillSharedJumbo();
});


RestCommClient.Device.disconnect(function(connection) {
console.log(currentUser + " : Connection ended");
prepareInitJumbo();
});

RestCommClient.Device.incoming(function(connection) {
var parameters = {
//'video-source': 'no-video',
'video-source': 'screen',
'local-media': screenVideoLocal,
'remote-media': screenVideoRemote,
};

currentConnection = connection;
currentConnection.accept(parameters);
currentConnection.disconnect(function(connection) {
console.log(currentUser + " : Connection ended");
prepareInitJumbo();
});


});
}

function prepareInitJumbo() {
chooseUserForm.style.display = 'none';
helloJumbo.style.display = 'block';
fillJumboForSharing();
}

function fillJumboForSharing() {
helloJumboUser.innerHTML = helloJumboUserHTML(false);
helloJumboButton.innerHTML = "Share screen";
helloJumboButton.onclick = startSharing;
localVideoPanel.style.display='block'
remoteVideoPanel.style.display='block'
screenVideoLocal.src = undefined;
screenVideoRemote.src = undefined;
}

function fillSharedJumbo() {
helloJumboUser.innerHTML = helloJumboUserHTML(true);
helloJumboButton.innerHTML = "Stop sharing";
helloJumboButton.onclick = hangup;
}


function startSharing() {
var calleeContact = (currentUser == "alice" ? "bob" : "alice");
var parameters = {
'username': calleeContact,
//'video-source': 'no-video',
'video-source': 'screen',
'local-media': screenVideoLocal,
'remote-media': screenVideoRemote,
};


currentConnection = RestCommClient.Device.connect(parameters);

currentConnection.disconnect(function(connection) {
prepareInitJumbo();
});

// Pass a callback to get notified if a Connetion error occurs
currentConnection.error(function(error) {
console.error(currentUser + ": Connection error: " + error);
});
}





function hangup() {
RestCommClient.Device.disconnectAll();
}


function helloJumboUserHTML(isConnected) {
return "Hello, " + (currentUser == "alice" ? "Alice" : "Bob") + "! <span class='label " + (isConnected ? "label-success'>Connected" : "label-default'>Disconnected") + "<\/span>";
}

Loading