remove blur

index.html

@@ -2,28 +2,28 @@
 <script src="/socket.io/socket.io.js"></script>
 
 <script>
-var hash = location.hash.substring(1).split('/');
+  var hash = location.hash.substring(1).split('/');
 
-if (adapter.browserDetails.browser == 'firefox' && (hash[1] === 'window' || hash[1] == 'screen' || hash[1] == 'tab')) {
+  if (adapter.browserDetails.browser == 'firefox' && (hash[1] === 'window' || hash[1] == 'screen' || hash[1] == 'tab')) {
     adapter.browserShim.shimGetDisplayMedia(window, hash[1]);
-}
+  }
 
-var room = hash[0] || 'test-room';
+  var room = hash[0] || 'test-room';
-var id = Math.random().toString(26).substring(2);
+  var id = Math.random().toString(26).substring(2);
 
-var receiver = hash[1] === 'recv';
+  var receiver = hash[1] === 'recv';
 
-var socket;
+  var socket;
 
-function socketConnect() {
+  function socketConnect() {
     socket = io.connect();
-    socket.on('connect', function() {
+    socket.on('connect', function () {
       console.info('Connected to', room, id, receiver);
-        socket.emit('join', { id, room });
+      socket.emit('join', {id, room});
-        socket.emit('message', { id, room, type: 'joined' });
+      socket.emit('message', {id, room, type: 'joined'});
     });
 
-    socket.on('message', async function(data) {
+    socket.on('message', async function (data) {
       if (data.id === id)
         return;
 
@@ -54,7 +54,8 @@ function socketConnect() {
 
         socket.emit('message', {
           id, room, peer: data.id,
-                type: 'answer', sdp: conn.localDescription })
+          type: 'answer', sdp: conn.localDescription
+        })
 
       } else if (data.type === 'answer' && data.peer === id) {
         console.info('Session answer get:', data)
@@ -62,38 +63,41 @@ function socketConnect() {
         conn.setRemoteDescription(new RTCSessionDescription(data.sdp)); //.catch(report);
       }
     });
-}
+  }
 
-var peers = {};
+  var peers = {};
 
-async function getMedia() {
+  async function getMedia() {
     if (hash[1] === 'screen' || hash[1] === 'window' || hash[1] === 'tab') {
       return navigator.getDisplayMedia({video: true});
     } else {
-        return navigator.mediaDevices.getUserMedia({ video: { width: 1280, height: 720 } });
+      return navigator.mediaDevices.getUserMedia({video: {width: 1280, height: 720}});
+    }
   }
-}
 
-async function getPeerConnection(peer, createOffer) {
+  async function getPeerConnection(peer, createOffer) {
     if (peers[peer] !== undefined)
       return peers[peer];
 
     console.info('Creating PeerConnection for', peer);
-    var conn = new RTCPeerConnection({iceServers: [
+    var conn = new RTCPeerConnection({
+      iceServers: [
         {urls: 'stun:numb.viagenie.ca'},
         {urls: 'turn:numb.viagenie.ca', username: 'informatic@hackerspace.pl', credential: 'dupa.8', "expiry": 86400}
-    ]});
+      ]
+    });
     peers[peer] = conn;
 
-    conn.onicecandidate = function(event) {
+    conn.onicecandidate = function (event) {
       console.info('ICE candidate:', event);
       socket.emit('message', {
         id, room, peer,
-            type: 'ice', ice: event.candidate });
+        type: 'ice', ice: event.candidate
+      });
     }
 
-    conn.oniceconnectionstatechange = function(event) {
+    conn.oniceconnectionstatechange = function (event) {
-        switch(conn.iceConnectionState) {
+      switch (conn.iceConnectionState) {
         case 'disconnected':
         case 'failed':
           peers[peer].videoElement.remove();
@@ -103,7 +107,7 @@ async function getPeerConnection(peer, createOffer) {
       }
     }
 
-    conn.ontrack = function(event) {
+    conn.ontrack = function (event) {
       console.info('Got track:', event);
       if (event.track.kind !== 'video') {
         console.warn('ignoring')
@@ -126,12 +130,12 @@ async function getPeerConnection(peer, createOffer) {
       mediaStream.addTrack(event.track)
 
       video.srcObject = mediaStream;
-        video.onloadedmetadata = function(e) {
+      video.onloadedmetadata = function (e) {
         video.play();
       }
     }
 
-    conn.onaddstream = function(event) {
+    conn.onaddstream = function (event) {
       console.info('Got stream:', event.stream);
       /*var video = document.getElementById("vremote")
       video.srcObject = event.stream;
@@ -158,13 +162,13 @@ async function getPeerConnection(peer, createOffer) {
     }
 
     return conn;
-}
+  }
 
-function report(err) {
+  function report(err) {
     console.info(err);
-}
+  }
 
-document.addEventListener("DOMContentLoaded", async function() {
+  document.addEventListener("DOMContentLoaded", async function () {
     if (!receiver) {
       var elem = document.documentElement;
 
@@ -183,10 +187,10 @@ document.addEventListener("DOMContentLoaded", async function() {
         var stream = await getMedia();
         var video = document.getElementById("vlocal");
         video.srcObject = stream;
-            video.onloadedmetadata = function(e) {
+        video.onloadedmetadata = function (e) {
           video.play();
         }
-        } catch(e) {
+      } catch (e) {
         console.error("media", e)
       }
     }
@@ -194,57 +198,60 @@ document.addEventListener("DOMContentLoaded", async function() {
     document.getElementById("room").innerText = room;
 
     socketConnect();
-});
+  });
 
 </script>
 
 <style>
-video {
+  video {
     max-width: 100%;
-}
+  }
 
-html, body {
+  html,
+  body {
     height: 100%;
     margin: 0;
-}
+  }
 
-#vlocal, .receiver {
+  #vlocal,
+  .receiver {
     z-index: -10;
-    filter: blur(5px) brightness(75%) saturate(75%);
     position: fixed;
     right: 0;
     bottom: 0;
     min-width: 100%;
     min-height: 100%;
     max-height: 100%;
-}
+  }
 
-#peers {
+  #peers {
     padding: 10px;
-}
+  }
 
-#peers video {
+  #peers video {
     border: 3px solid red;
     max-width: 100px;
-}
+  }
 
-#peers video.receiver {
+  #peers video.receiver {
     filter: none;
     border: none;
     background: black;
-}
+  }
 
-#vremote { border: 5px solid green; }
+  #vremote {
+    border: 5px solid green;
+  }
 
-pre {
+  pre {
     position: absolute;
     bottom: 0;
     text-align: center;
     width: 100%;
-    background: rgba(255,255,255, 0.5);
+    background: rgba(255, 255, 255, 0.5);
     padding: 10px 0px;
     margin: 0;
-}
+  }
 </style>
 
 <video id="vlocal"></video>