init project

static/bower.json

@@ -0,0 +1,29 @@
+{
+  "name": "kurento-one2many-call",
+  "description": "Kurento Browser JavaScript Tutorial",
+  "authors": [
+    "Kurento <info@kurento.org>"
+  ],
+  "main": "index.html",
+  "moduleType": [
+    "globals"
+  ],
+  "license": "LGPL",
+  "homepage": "http://www.kurento.org/",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "adapter.js": "v0.2.9",
+    "bootstrap": "~3.3.0",
+    "ekko-lightbox": "~3.3.0",
+    "demo-console": "1.5.1",
+    "kurento-utils": "master",
+    "socket.io-client": "^1.4.5"
+  }
+}

static/css/kurento.css

@@ -0,0 +1,77 @@
+/*
+ * (C) Copyright 2014-2015 Kurento (http://kurento.org/)
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the GNU Lesser General Public License
+ * (LGPL) version 2.1 which accompanies this distribution, and is available at
+ * http://www.gnu.org/licenses/lgpl-2.1.html
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ */
+@CHARSET "UTF-8";
+
+html {
+	position: relative;
+	min-height: 100%;
+}
+
+body {
+	padding-top: 40px;
+	body
+}
+
+video,#console {
+	display: block;
+	font-size: 14px;
+	line-height: 1.42857143;
+	color: #555;
+	background-color: #fff;
+	background-image: none;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+	-webkit-transition: border-color ease-in-out .15s, box-shadow
+		ease-in-out .15s;
+	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+
+#console {
+	min-height: 120px;
+	max-height: 360px;
+}
+
+#videoContainer {
+	position: absolute;
+	float: left;
+}
+
+#videoBig {
+	width: 640px;
+	height: 480px;
+	top: 0;
+	left: 0;
+	z-index: 1;
+}
+
+div#videoSmall {
+	width: 240px;
+	height: 180px;
+	padding: 0px;
+	position: absolute;
+	top: 15px;
+	left: 400px;
+	cursor: pointer;
+	z-index: 10;
+	padding: 0px;
+}
+
+div.dragged {
+	cursor: all-scroll !important;
+	border-color: blue !important;
+	z-index: 10 !important;
+}

static/index.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="cache-control" content="no-cache">
+    <meta http-equiv="pragma" content="no-cache">
+    <meta http-equiv="expires" content="0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" href="img/kurento.png" type="image/png" />
+
+    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="bower_components/demo-console/index.css">
+    <link rel="stylesheet" href="bower_components/ekko-lightbox/dist/ekko-lightbox.min.css">
+    <link rel="stylesheet" href="css/kurento.css">
+
+    <script src="bower_components/adapter.js/adapter.js"></script>
+    <script src="bower_components/jquery/dist/jquery.min.js"></script>
+    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+    <script src="bower_components/demo-console/index.js"></script>
+    <script src="bower_components/ekko-lightbox/dist/ekko-lightbox.min.js"></script>
+
+    <script src="bower_components/kurento-utils/js/kurento-utils.js"></script>
+    <script src="bower_components/io/dist/socket.io.js"></script>
+
+    <script src="js/index.js"></script>
+    <title>Kurento </title>
+  </head>
+  <body>
+
+    <header>
+
+    </header>
+
+    <div class="container">
+      <div class="page-header">
+      <div class="row">
+        <div class="col-md-5">
+          <div class="row">
+            <div class="col-md-12">
+              <label for="roomName">Room:</label>
+              <input class="input" id="roomName" value="default"/>
+              <a id="call" href="#" class="btn btn-success">
+                <span class="glyphicon glyphicon-play"></span> Presenter</a>
+              <a id="viewer" href="#" class="btn btn-primary">
+                <span class="glyphicon glyphicon-user"></span> Viewer</a>
+              <a id="terminate" href="#" class="btn btn-danger">
+                <span class="glyphicon glyphicon-stop"></span> Stop</a>
+            </div>
+          </div>
+          <br/>
+          <label class="control-label" for="console">Console</label><br><br>
+          <div id="console" class="democonsole">
+            <ul></ul>
+          </div>
+        </div>
+        <div class="col-md-7">
+          <div id="videoBig">
+            <video id="video" autoplay width="640px" height="480px" poster="img/webrtc.png"></video>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <footer>
+      <div class="foot-fixed-bottom">
+        <div class="container text-center">
+          <hr/>
+          <div class="row">&copy; 2014-2015 Kurento</div>
+          <div class="row">
+            <div class="col-md-4">
+              <a href="http://www.urjc.es">
+                <img src="img/urjc.gif" alt="Universidad Rey Juan Carlos" height="50px"/>
+              </a>
+            </div>
+            <div class="col-md-4">
+              <a href="http://www.kurento.org">
+                <img src="img/kurento.png" alt="Kurento" height="50px"/>
+              </a>
+            </div>
+            <div class="col-md-4">
+              <a href="http://www.naevatec.com">
+                <img src="img/naevatec.png" alt="Naevatec" height="50px"/>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+
+  </body>
+</html>

static/js/index.js

@@ -0,0 +1,205 @@
+/*
+ * (C) Copyright 2014-2015 Kurento (http://kurento.org/)
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the GNU Lesser General Public License
+ * (LGPL) version 2.1 which accompanies this distribution, and is available at
+ * http://www.gnu.org/licenses/lgpl-2.1.html
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ */
+
+//var ws = new WebSocket('wss://' + location.host + '/one2many');
+
+
+var video;
+var webRtcPeer;
+var socket;
+var autoView = true;
+var room;
+
+$(function() {
+	socket = io();
+	console = new Console();
+	video = $('#video')[0];
+	room = $('#roomName');
+
+	$('#call').on('click', function(e) { presenter(); e.preventDefault(); } );
+	$('#viewer').on('click', function(e) { viewer(); e.preventDefault(); } );
+	$('#terminate').on('click', function(e) { stop(); e.preventDefault();} );
+
+
+socket.on('connect', function(){
+	console.log('Connected to socket');
+
+	socket.emit('subscribeToStream', currentRoom());
+});
+
+socket.on('disconnect', function(){
+	console.log('Disconnected from socket');
+	dispose();
+});
+
+socket.on('presenterResponse', function(data) {
+	presenterResponse(data);
+});
+
+socket.on('viewerResponse', function(data) {
+	viewerResponse(data);
+});
+
+socket.on('stopCommunication', function(data) {
+	console.log('stopCommunication');
+	dispose();
+});
+
+socket.on('iceCandidate', function(data) {
+	webRtcPeer.addIceCandidate(data.candidate)
+});
+
+socket.on('streamStarted', function(data) {
+	if (autoView) {
+		viewer();
+	}
+});
+
+});
+function presenterResponse(message) {
+	if (message.response != 'accepted') {
+		var errorMsg = message.message ? message.message : 'Unknown error';
+		console.warn('Call not accepted for the following reason: ' + errorMsg);
+		dispose();
+	} else {
+		webRtcPeer.processAnswer(message.sdpAnswer);
+	}
+}
+
+function viewerResponse(message) {
+	if (message.response != 'accepted') {
+		var errorMsg = message.message ? message.message : 'Unknown error';
+		console.warn('Call not accepted for the following reason: ' + errorMsg);
+		dispose();
+	} else {
+		webRtcPeer.processAnswer(message.sdpAnswer);
+	}
+}
+
+function onError(obj) {
+	console.log(obj);
+}
+
+function presenter() {
+	if (!webRtcPeer) {
+		showSpinner(video);
+
+		var options = {
+			localVideo: video,
+			onicecandidate : onIceCandidate
+	    };
+
+		webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerSendonly(options, function(error) {
+			if(error) return onError(error);
+
+			this.generateOffer(onOfferPresenter);
+		});
+	}
+}
+
+function onOfferPresenter(error, offerSdp) {
+    if (error) return onError(error);
+
+	var message = {
+		sdpOffer : offerSdp,
+		room: currentRoom()
+	};
+
+	socket.emit('presenter', message);
+}
+
+function viewer() {
+	autoView = true;
+	if (!webRtcPeer) {
+		showSpinner(video);
+
+		var options = {
+			remoteVideo: video,
+			onicecandidate : onIceCandidate
+		};
+
+		webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerRecvonly(options, function(error) {
+			if(error) return onError(error);
+
+			this.generateOffer(onOfferViewer);
+		});
+	}
+}
+
+function onOfferViewer(error, offerSdp) {
+	if (error) return onError(error);
+
+	var message = {
+		sdpOffer : offerSdp,
+		room: currentRoom()
+	};
+	socket.emit('viewer', message);
+}
+
+function onIceCandidate(candidate) {
+	   //console.log('Local candidate' + JSON.stringify(candidate));
+	   socket.emit('onIceCandidate', {candidate : candidate});
+}
+
+function stop() {
+	autoView = false;
+	if (webRtcPeer) {
+		socket.emit('stop');
+		dispose();
+	}
+}
+
+function dispose() {
+	if (webRtcPeer) {
+		webRtcPeer.dispose();
+		webRtcPeer = null;
+	}
+	hideSpinner(video);
+}
+
+function sendMessage(payload) {
+	var event = payload.id,
+		message = payload;
+	console.log('Sending message - ' + event + ': ', message);
+
+	socket.emit(event, payload);
+}
+
+function showSpinner() {
+	for (var i = 0; i < arguments.length; i++) {
+		arguments[i].poster = './img/transparent-1px.png';
+		arguments[i].style.background = 'center transparent url("./img/spinner.gif") no-repeat';
+	}
+}
+
+function hideSpinner() {
+	for (var i = 0; i < arguments.length; i++) {
+		arguments[i].src = '';
+		arguments[i].poster = './img/webrtc.png';
+		arguments[i].style.background = '';
+	}
+}
+
+function currentRoom() {
+	return $('#roomName').val();
+}
+
+/**
+ * Lightbox utility (to display media pipeline image in a modal dialog)
+ */
+$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
+	event.preventDefault();
+	$(this).ekkoLightbox();
+});