princiya · princiya · Aug 31, 2017
diff --git a/index.js b/index.js
@@ -41,15 +41,13 @@ io.on('connection', function(socket) {
       socket.join(room);
       log('Client ID ' + socket.id + ' created room ' + room);
       socket.emit('created', room, socket.id);
-    } else if (numClients === 2) {
+    } else {
       log('Client ID ' + socket.id + ' joined room ' + room);
       // io.sockets.in(room).emit('join', room);
       socket.join(room);
       socket.emit('joined', room, socket.id);
       io.sockets.in(room).emit('ready', room);
       socket.broadcast.emit('ready', room);
-    } else { // max two clients
-      socket.emit('full', room);
     }
   });
 

diff --git a/public/apps/2/README.md b/public/apps/2/README.md
@@ -0,0 +1,12 @@
+## 1 - Polling app 
+
+This is a simple app to convert a selfie to gif. You can share this gif using WebRTC.
+
+## Resource
+- [1](https://hacks.mozilla.org/2013/07/the-making-of-face-to-gif/)
+
+## Exercise
+
+- Implement different CSS filters
+  - A complete list of CSS filters to be applied can be found [here](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter).
+- Implement filters on the streaming video and then capture the selfie
diff --git a/public/apps/2/css/main.css b/public/apps/2/css/main.css
@@ -0,0 +1,13 @@
+body {
+  font-family: sans-serif;
+}
+
+canvas {
+  max-width: 100%;
+  width: 320px;
+}
+
+video {
+  max-width: 100%;
+  width: 320px;
+}
diff --git a/public/apps/2/index.html b/public/apps/2/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Polling</title>
+    <link rel="stylesheet" href="css/main.css" />
+  </head>
+
+  <body>
+    <h1>Have you coded/worked with WebRTC?</h1>
+
+    <form id="answer">
+      <input type="radio" id="yes"/>Yes
+      <input type="radio" id="no"/>No
+      <input type="button" id="send" value="Send"/>
+    </form>
+
+    <div id="incoming">
+      <h2>Results</h2>
+      <div id="trail"></div>
+    </div>
+
+    <script src="/socket.io/socket.io.js"></script>
+    <script src="../../lib/adapter.js"></script>
+    <script src="js/main.js"></script>
+    <script src="js/signalingServer.js"></script>
+    <script src="js/peerConnection.js"></script>
+  </body>
+</html>
diff --git a/public/apps/2/js/main.js b/public/apps/2/js/main.js
@@ -0,0 +1,45 @@
+'use strict';
+
+var configuration = null;
+var peerConn;
+var dataChannel;
+
+var trail = document.getElementById('trail');
+var sendBtn = document.getElementById('send');
+sendBtn.addEventListener('click', sendAnswer);
+var isInitiator;
+var room = window.location.hash.substring(1);
+if (!room) {
+  room = window.location.hash = randomToken();
+}
+
+function getAnswer() {
+  const yes = document.getElementById("yes").checked;
+  const no = document.getElementById("no").checked;
+  if (yes) { return 'yes'; }
+  return 'no';
+}
+
+function sendAnswer() {
+  var answer = getAnswer();
+  dataChannel.send(answer);
+}
+
+function render(data) {
+  var p = document.createElement("p");
+  p.innerHTML = data;
+  if (data === 'yes') {
+    p.style.color = 'green';
+  } else {
+    p.style.color = 'red'
+  }
+  trail.appendChild(p);
+}
+
+function randomToken() {
+  return Math.floor((1 + Math.random()) * 1e16).toString(16).substring(1);
+}
+
+function logError(err) {
+  console.log(err.toString(), err);
+}
diff --git a/public/apps/2/js/peerConnection.js b/public/apps/2/js/peerConnection.js
@@ -0,0 +1,87 @@
+/****************************************************************************
+* WebRTC peer connection and data channel
+****************************************************************************/
+function signalingMessageCallback(message) {
+  if (message.type === 'offer') {
+    console.log('Got offer. Sending answer to peer.');
+    peerConn.setRemoteDescription(new RTCSessionDescription(message), function() {},
+                                  logError);
+    peerConn.createAnswer(onLocalSessionCreated, logError);
+
+  } else if (message.type === 'answer') {
+    console.log('Got answer.');
+    peerConn.setRemoteDescription(new RTCSessionDescription(message), function() {},
+                                  logError);
+
+  } else if (message.type === 'candidate') {
+    peerConn.addIceCandidate(new RTCIceCandidate({
+      candidate: message.candidate
+    }));
+
+  } else if (message === 'bye') {
+    // TODO: cleanup RTC connection?
+  }
+}
+
+function createPeerConnection(isInitiator, config) {
+  console.log('Creating Peer connection as initiator?', isInitiator, 'config:',
+              config);
+  peerConn = new RTCPeerConnection(config);
+
+// send any ice candidates to the other peer
+peerConn.onicecandidate = function(event) {
+  console.log('icecandidate event:', event);
+  if (event.candidate) {
+    sendMessage({
+      type: 'candidate',
+      label: event.candidate.sdpMLineIndex,
+      id: event.candidate.sdpMid,
+      candidate: event.candidate.candidate
+    });
+  } else {
+    console.log('End of candidates.');
+  }
+};
+
+if (isInitiator) {
+  console.log('Creating Data Channel');
+  dataChannel = peerConn.createDataChannel('photos');
+  onDataChannelCreated(dataChannel);
+
+  console.log('Creating an offer');
+  peerConn.createOffer(onLocalSessionCreated, logError);
+} else {
+  peerConn.ondatachannel = function(event) {
+    console.log('ondatachannel:', event.channel);
+    dataChannel = event.channel;
+    onDataChannelCreated(dataChannel);
+  };
+}
+}
+
+function onLocalSessionCreated(desc) {
+  console.log('local session created:', desc);
+  peerConn.setLocalDescription(desc, function() {
+    console.log('sending local desc:', peerConn.localDescription);
+    sendMessage(peerConn.localDescription);
+  }, logError);
+}
+
+function onDataChannelCreated(channel) {
+  console.log('onDataChannelCreated:', channel);
+
+  channel.onopen = function() {
+    console.log('CHANNEL opened!!!');
+  };
+
+  channel.onmessage = receiveData();
+}
+
+function receiveData() {
+  var buf, count;
+
+  return function onmessage(event) {
+      render(event.data);
+      return;
+    }
+  };
diff --git a/public/apps/2/js/signalingServer.js b/public/apps/2/js/signalingServer.js
@@ -0,0 +1,42 @@
+var socket = io.connect();
+
+socket.on('ipaddr', function(ipaddr) {
+  console.log('Server IP address is: ' + ipaddr);
+});
+
+socket.on('created', function(room, clientId) {
+  isInitiator = true;
+});
+
+socket.on('joined', function(room, clientId) {
+  isInitiator = false;
+  createPeerConnection(isInitiator, configuration);
+});
+
+socket.on('full', function(room) {
+  alert('Room ' + room + ' is full. We will create a new room for you.');
+  window.location.hash = '';
+  window.location.reload();
+});
+
+socket.on('ready', function() {
+  createPeerConnection(isInitiator, configuration);
+});
+
+socket.on('log', function(array) {
+  console.log.apply(console, array);
+});
+
+socket.on('message', function(message) {
+  signalingMessageCallback(message);
+});
+
+socket.emit('create or join', room);
+
+if (location.hostname.match(/localhost|127\.0\.0/)) {
+  socket.emit('ipaddr');
+}
+
+function sendMessage(message) {
+  socket.emit('message', message);
+}