RestComm · akdeniso · Jun 8, 2017 · Jun 14, 2017
diff --git a/samples/screen-sharing/cert.pem b/samples/screen-sharing/cert.pem
@@ -0,0 +1,22 @@
+-----BEGIN CERTIFICATE-----
+MIIDqjCCApICCQCySgN7jKzm9zANBgkqhkiG9w0BAQsFADCBljELMAkGA1UEBhMC
+R1IxDzANBgNVBAgMBkF0dGlraTEPMA0GA1UEBwwGQXRoZW5zMREwDwYDVQQKDAhU
+ZWxlc3RheDENMAsGA1UECwwEVW5pdDETMBEGA1UEAwwKdGVzdC5sb2NhbDEuMCwG
+CSqGSIb3DQEJARYfYW50b25pcy50c2FraXJpZGlzQHRlbGVzdGF4LmNvbTAeFw0x
+NTEyMDcxNjMxMTBaFw00MzA0MjMxNjMxMTBaMIGWMQswCQYDVQQGEwJHUjEPMA0G
+A1UECAwGQXR0aWtpMQ8wDQYDVQQHDAZBdGhlbnMxETAPBgNVBAoMCFRlbGVzdGF4
+MQ0wCwYDVQQLDARVbml0MRMwEQYDVQQDDAp0ZXN0LmxvY2FsMS4wLAYJKoZIhvcN
+AQkBFh9hbnRvbmlzLnRzYWtpcmlkaXNAdGVsZXN0YXguY29tMIIBIjANBgkqhkiG
+9w0BAQEFAAOCAQ8AMIIBCgKCAQEAoyn8W+rm16BrPQjLQgjpsHB6fy0+KmtyM519
+BnM9IvUydyn/iaW6gjqow4gzN4iCYiSyq4WwsR2kqwwm0P3yR2w+yj3HcuWNcA0T
+1v1vewEb8Y69T/OkgLpCS86599CtR1aIhPQ3H41L47HzlwTWvu87Ko436pwOVhZ7
+vwKQuV5S4VMYxhilAAv9LcWQo+f6yAE+g8gc9s5xspRLBvgbbO2ZtQY+DT9SckHZ
+/IlsmjdwcrsuxqLQrchamECuz2dIEbUxowdVfk3l73RSQa0LcOQg9AgkjSrLwlHo
+2wboozQp2kqWm8w9w02G9gjLqoWRsEhYByKTDwDPOa0FpbIWmwIDAQABMA0GCSqG
+SIb3DQEBCwUAA4IBAQBRFkLNtRANmGhihg8VRbdJeZaJ1i6RjhdWQLnz30ivDVF2
+KeOIYg2sjitdsDGvMZz9Yfwx6Nlx6rpQIMDGXqG/hkIEdJ3LThNS1oZzSdFVEynn
+ha6VSGR3WyvCepQlHsKGz8jF0frCf+x6NVz+AOBV0itwFYoFIjvFnidUjQiCtq8f
+Av18eCRlIdSHFjc8iMTgRw4lAwZ+kDITbY6iiDVZiMmCbTrs4tNTOyJIRXjUF9aV
+7rh7Hrf1Q3TGJPbjynQLuJz7ay0BCZ1MhzXLB2/b7/DtNngr/RyLeNv6k0qUt9Hw
+5qgcAxtVLZg601Lz+5FbhvT11AoqdeJWykoFRJSQ
+-----END CERTIFICATE-----
diff --git a/samples/screen-sharing/csr.pem b/samples/screen-sharing/csr.pem
@@ -0,0 +1,18 @@
+-----BEGIN CERTIFICATE REQUEST-----
+MIIC9TCCAd0CAQAwgZYxCzAJBgNVBAYTAkdSMQ8wDQYDVQQIDAZBdHRpa2kxDzAN
+BgNVBAcMBkF0aGVuczERMA8GA1UECgwIVGVsZXN0YXgxDTALBgNVBAsMBFVuaXQx
+EzARBgNVBAMMCnRlc3QubG9jYWwxLjAsBgkqhkiG9w0BCQEWH2FudG9uaXMudHNh
+a2lyaWRpc0B0ZWxlc3RheC5jb20wggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEK
+AoIBAQCjKfxb6ubXoGs9CMtCCOmwcHp/LT4qa3IznX0Gcz0i9TJ3Kf+JpbqCOqjD
+iDM3iIJiJLKrhbCxHaSrDCbQ/fJHbD7KPcdy5Y1wDRPW/W97ARvxjr1P86SAukJL
+zrn30K1HVoiE9DcfjUvjsfOXBNa+7zsqjjfqnA5WFnu/ApC5XlLhUxjGGKUAC/0t
+xZCj5/rIAT6DyBz2znGylEsG+Bts7Zm1Bj4NP1JyQdn8iWyaN3Byuy7GotCtyFqY
+QK7PZ0gRtTGjB1V+TeXvdFJBrQtw5CD0CCSNKsvCUejbBuijNCnaSpabzD3DTYb2
+CMuqhZGwSFgHIpMPAM85rQWlshabAgMBAAGgGTAXBgkqhkiG9w0BCQIxCgwIVGVs
+ZXN0YXgwDQYJKoZIhvcNAQELBQADggEBAIIqxvWJH3ZiLc9hRc0pzQAwaIAmNrhQ
+0U7sjLMjNjbzEQ/PXQcCjeggCDysVrz8JsLUhqOtnhnZg/9061FSDoI0ppPvcFtV
+snokgQl2NvLu3OZfSEhIxb8vJq7iUJkXNpnmr/zAVqASJ9mjyCK8hZ3a68Zv+HSx
+wNwMZ60EsacJn93vjCm10g2EEDaaSyvigvQjHr7QqIyf5HhqTeWxcnztGT1SOfC7
+IzAOCtmSJmj3KiHG5WYjlJvkIod4jBjO1okbzoe2AG4FG13dGeDj1W2WMnM/9Gon
+DBMvII6asXbTzVJE3McBE/ezNvPB+etpx3aaOW4POtULm9AvA0hNLSw=
+-----END CERTIFICATE REQUEST-----
diff --git a/samples/screen-sharing/css/bootstrap.min.css b/samples/screen-sharing/css/bootstrap.min.css
diff --git a/samples/screen-sharing/favicon.ico b/samples/screen-sharing/favicon.ico
diff --git a/samples/screen-sharing/img/female_head.png b/samples/screen-sharing/img/female_head.png
diff --git a/samples/screen-sharing/img/man_head.png b/samples/screen-sharing/img/man_head.png
diff --git a/samples/screen-sharing/img/telestax_logo_white.png b/samples/screen-sharing/img/telestax_logo_white.png
diff --git a/samples/screen-sharing/index.html b/samples/screen-sharing/index.html
@@ -0,0 +1,66 @@
+<!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>
+	</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 id="helloJumboMessage">#</p>
+				<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"> <video autoplay id="screenVideo"></video> </div>
+		<script>
+			var jsElm = document.createElement("script");
+			jsElm.type = "application/javascript";
+			jsElm.src = "js/client.js";
+			document.body.appendChild(jsElm);
+		</script>
+	</body>
+
+</html>
diff --git a/samples/screen-sharing/js/client.js b/samples/screen-sharing/js/client.js
@@ -0,0 +1,209 @@
+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 helloJumboMessage = document.getElementById("helloJumboMessage");
+var helloJumboButton = document.getElementById("helloJumboButton");
+var screenVideo = document.getElementById("screenVideo");
+var extDownloadHref = document.getElementById("extDownloadHref");
+
+var screenStream;
+var wrtcClient;
+var wrtcEventListener = undefined;
+var inCall = false;
+var currentUser;
+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 fillJumboForSharing() {
+	helloJumboUser.innerHTML = helloJumboUserHTML(false);
+	helloJumboMessage.innerHTML = "Now you can share your screen with " + (currentUser == "alice" ? "Bob" : "Alice") + ". Let's go!";
+	helloJumboButton.innerHTML = "Share screen";
+	helloJumboButton.onclick = startSharing;
+}
+
+function connectToRestcomm() {
+	var wrtcConfiguration = {
+		communicationMode: WebRTCommClient.prototype.SIP,
+		sip: {
+			sipUserAgent: 'TelScale RTM Olympus/1.0.0',
+			sipRegisterMode: true,
+			sipOutboundProxy: 'wss://localhost:5063', // CHANGEME: setup your restcomm instance domain/ip and port
+			sipDomain: 'localhost', // CHANGEME: setup your restcomm instance domain/ip
+			sipDisplayName: currentUser,
+			sipUserName: currentUser,
+			sipLogin: currentUser,
+			sipPassword: '1234',
+		},
+		RTCPeerConnection: {
+			iceServers: undefined,
+			stunServer: 'stun.l.google.com:19302',
+			turnServer: undefined,
+			turnLogin: undefined,
+			turnPassword: undefined,
+		}
+	};
+	wrtcEventListener = new WrtcEventListener();
+	wrtcClient = new WebRTCommClient(wrtcEventListener);
+	wrtcClient.open(wrtcConfiguration);
+	getUserMedia({
+		audio: true,
+		video: true
+	}, onGetInitialStream, function (error) {
+		trace("getUserMedia error: ", error);
+	});
+}
+
+function onGetInitialStream(stream) {
+	screenStream = stream;
+	prepareInitJumbo();
+}
+
+function prepareInitJumbo() {
+	chooseUserForm.style.display = 'none';
+	helloJumbo.style.display = 'block';
+	fillJumboForSharing();
+}
+
+function startSharing() {
+	var constraints = {
+			video: {
+				mandatory: {
+					chromeMediaSource: 'desktop',
+					maxWidth: 1920,
+					maxHeight: 1080,
+					maxFrameRate: 10,
+					minAspectRatio: 1.77,
+				}
+			}
+		};
+	getScreenStream(constraints, true, function(stream) {
+		screenStream = stream;
+		makeScreenSharingCall();
+	});
+}
+
+// extract to lib
+function getScreenStream(constraints, needAudio, onScreenStream) {
+	var onGotScreenStream  = function(screenStream) {
+		// We need to get audio stream separately to send it with screen stream
+		// http://stackoverflow.com/a/20063211
+		if (needAudio) {
+			getUserMedia({
+				audio: true
+			}, function (audioStream) {
+				screenStream.addTrack(audioStream.getAudioTracks()[0]);
+				onScreenStream(screenStream);
+			}, function (error) {
+				trace("getUserMedia Audio Stream error: ", error);
+				onScreenStream(screenStream);
+			});		
+		} else {
+			onScreenStream(screenStream);
+		}
+	}
+
+	var extensionMessageHandler = function (msg) {
+		var sourceId = msg.data.sourceId;
+		if (sourceId) {
+			constraints.video.mandatory.chromeMediaSourceId = sourceId;
+			getUserMedia(constraints, onGotScreenStream, function (error) {
+				trace("getUserMedia Screen Stream error: ", error);
+			});
+		}
+	}
+
+
+	window.addEventListener("message", function (msg) {
+		return extensionMessageHandler(msg)
+	});
+
+	window.postMessage("get-sourceId", "*")
+}
+
+function makeScreenSharingCall() {
+	var calleeContact = (currentUser == "alice" ? "bob" : "alice");
+	currentCall = wrtcClient.call(calleeContact, getCallConfiguration());
+	inCall = true;
+	fillSharedJumbo();
+}
+
+function fillSharedJumbo() {
+	helloJumboUser.innerHTML = helloJumboUserHTML(true);
+	helloJumboMessage.innerHTML = "Now " + (currentUser == "alice" ? "Bob" : "Alice") + " can see your screen";
+	helloJumboButton.innerHTML = "Stop sharing";
+	helloJumboButton.onclick = hangup;
+}
+
+function hangup() {
+	if (inCall) {
+		currentCall.close();
+		inCall = false;
+	}
+}
+
+function getCallConfiguration() {
+	var calleeContact = (currentUser == "alice" ? "bob" : "alice");
+	var callConfiguration = {
+		displayName: calleeContact,
+		localMediaStream: screenStream,
+		audioMediaFlag: true,
+		videoMediaFlag: true,
+		messageMediaFlag: false,
+		audioCodecsFilter: '',
+		videoCodecsFilter: ''
+	};
+	return callConfiguration;
+}
+
+function helloJumboUserHTML(isConnected) {
+	return "Hello, " + (currentUser == "alice" ? "Alice" : "Bob") + "! <span class='label " + (isConnected ? "label-success'>Connected" : "label-default'>Disconnected") + "<\/span>";
+}
+WrtcEventListener = function () {
+	trace("WrtcEventListener constructor");
+};
+WrtcEventListener.prototype.onWebRTCommCallRingingEvent = function (webRTCommCall) {
+	trace("WrtcEventListener::onWebRTCommCallRingingEvent");
+	webRTCommCall.accept(getCallConfiguration());
+	currentCall = webRTCommCall;
+};
+WrtcEventListener.prototype.onWebRTCommCallRingingBackEvent = function (webRTCommCall) {
+	trace("WrtcEventListener::onWebRTCommCallRingingBackEvent");
+	currentCall = webRTCommCall;
+};
+WrtcEventListener.prototype.onWebRTCommCallClosedEvent = function (webRTCommCall) {
+	trace("WrtcEventListener::onWebRTCommCallClosedEvent");
+	screenStream.getTracks().forEach(track => track.stop())
+	screenVideo.src = undefined;
+	fillJumboForSharing();
+};
+WrtcEventListener.prototype.onWebRTCommCallOpenedEvent = function (webRTCommCall) {
+	trace("WrtcEventListener::onWebRTCommCallOpenedEvent: received remote stream");
+	screenVideo.src = URL.createObjectURL(webRTCommCall.getRemoteBundledAudioVideoMediaStream() || webRTCommCall.getRemoteVideoMediaStream() || webRTCommCall.getRemoteAudioMediaStream());
+};
+WrtcEventListener.prototype.onWebRTCommCallHangupEvent = function (webRTCommCall) {
+	trace("WrtcEventListener::onWebRTCommCallHangupEvent");
+	currentCall = undefined;
+};
+
+function trace(text) {
+	console.log((performance.now() / 1000).toFixed(3) + ": " + text);
+}