From 7e62a246b85813edb7b605fab555ade1f9c4a588 Mon Sep 17 00:00:00 2001
From: Piotr Dobrowolski <admin@tastycode.pl>
Date: Fri, 18 Dec 2020 13:39:33 +0100
Subject: [PATCH] remove blur

---
 index.html | 317 +++++++++++++++++++++++++++--------------------------
 1 file changed, 162 insertions(+), 155 deletions(-)

diff --git a/index.html b/index.html
index 1fb81a1..7b5394a 100644
--- a/index.html
+++ b/index.html
@@ -2,249 +2,256 @@
 <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 id = Math.random().toString(26).substring(2);
+  var room = hash[0] || 'test-room';
+  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() {
-        console.info('Connected to', room, id, receiver);
-        socket.emit('join', { id, room });
-        socket.emit('message', { id, room, type: 'joined' });
+    socket.on('connect', function () {
+      console.info('Connected to', room, id, receiver);
+      socket.emit('join', {id, room});
+      socket.emit('message', {id, room, type: 'joined'});
     });
 
-    socket.on('message', async function(data) {
-        if (data.id === id)
-            return;
+    socket.on('message', async function (data) {
+      if (data.id === id)
+        return;
 
-        console.info('Message:', data);
-        if (data.type === 'joined') {
-            var conn = await getPeerConnection(data.id, true);
-        } else if (data.type === 'ice' && data.peer === id) {
-            var conn = await getPeerConnection(data.id);
-            conn.addIceCandidate(data.ice).catch(e => {
-                console.log("Failure during addIceCandidate(): " + e.name);
-            });
-        } else if (data.type === 'offer' && data.peer === id) {
-            if (!receiver) {
-                console.info('Requesting media...')
-                var stream = document.getElementById("vlocal").srcObject;
-            }
-
-            var conn = await getPeerConnection(data.id, false);
-
-            if (stream) {
-                console.info('Adding stream')
-                conn.addStream(stream);
-            }
-
-            await conn.setRemoteDescription(new RTCSessionDescription(data.sdp));
-            var answer = await conn.createAnswer();
-            await conn.setLocalDescription(answer);
-
-            socket.emit('message', {
-                id, room, peer: data.id,
-                type: 'answer', sdp: conn.localDescription })
-
-        } else if (data.type === 'answer' && data.peer === id) {
-            console.info('Session answer get:', data)
-            var conn = await getPeerConnection(data.id, false);
-            conn.setRemoteDescription(new RTCSessionDescription(data.sdp)); //.catch(report);
+      console.info('Message:', data);
+      if (data.type === 'joined') {
+        var conn = await getPeerConnection(data.id, true);
+      } else if (data.type === 'ice' && data.peer === id) {
+        var conn = await getPeerConnection(data.id);
+        conn.addIceCandidate(data.ice).catch(e => {
+          console.log("Failure during addIceCandidate(): " + e.name);
+        });
+      } else if (data.type === 'offer' && data.peer === id) {
+        if (!receiver) {
+          console.info('Requesting media...')
+          var stream = document.getElementById("vlocal").srcObject;
         }
+
+        var conn = await getPeerConnection(data.id, false);
+
+        if (stream) {
+          console.info('Adding stream')
+          conn.addStream(stream);
+        }
+
+        await conn.setRemoteDescription(new RTCSessionDescription(data.sdp));
+        var answer = await conn.createAnswer();
+        await conn.setLocalDescription(answer);
+
+        socket.emit('message', {
+          id, room, peer: data.id,
+          type: 'answer', sdp: conn.localDescription
+        })
+
+      } else if (data.type === 'answer' && data.peer === id) {
+        console.info('Session answer get:', data)
+        var conn = await getPeerConnection(data.id, false);
+        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});
+      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];
+      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) {
-        console.info('ICE candidate:', event);
-        socket.emit('message', {
-            id, room, peer,
-            type: 'ice', ice: event.candidate });
+    conn.onicecandidate = function (event) {
+      console.info('ICE candidate:', event);
+      socket.emit('message', {
+        id, room, peer,
+        type: 'ice', ice: event.candidate
+      });
     }
 
-    conn.oniceconnectionstatechange = function(event) {
-        switch(conn.iceConnectionState) {
-            case 'disconnected':
-            case 'failed':
-                peers[peer].videoElement.remove();
-                peers[peer].close();
-                peers[peer] = null;
-                break;
-        }
+    conn.oniceconnectionstatechange = function (event) {
+      switch (conn.iceConnectionState) {
+        case 'disconnected':
+        case 'failed':
+          peers[peer].videoElement.remove();
+          peers[peer].close();
+          peers[peer] = null;
+          break;
+      }
     }
 
-    conn.ontrack = function(event) {
-        console.info('Got track:', event);
-        if (event.track.kind !== 'video') {
-            console.warn('ignoring')
-            return;
-        }
+    conn.ontrack = function (event) {
+      console.info('Got track:', event);
+      if (event.track.kind !== 'video') {
+        console.warn('ignoring')
+        return;
+      }
 
-        const mediaStream = new MediaStream();
+      const mediaStream = new MediaStream();
 
-        if (conn.videoElement) {
-            var video = conn.videoElement;
-        } else {
-            var video = document.createElement('video');
-            video.setAttribute("title", peer);
-            if (receiver)
-                video.setAttribute("class", "receiver");
-            document.getElementById("peers").appendChild(video);
-            conn.videoElement = video;
-        }
+      if (conn.videoElement) {
+        var video = conn.videoElement;
+      } else {
+        var video = document.createElement('video');
+        video.setAttribute("title", peer);
+        if (receiver)
+          video.setAttribute("class", "receiver");
+        document.getElementById("peers").appendChild(video);
+        conn.videoElement = video;
+      }
 
-        mediaStream.addTrack(event.track)
+      mediaStream.addTrack(event.track)
 
-        video.srcObject = mediaStream;
-        video.onloadedmetadata = function(e) {
-            video.play();
-        }
+      video.srcObject = mediaStream;
+      video.onloadedmetadata = function (e) {
+        video.play();
+      }
     }
 
-    conn.onaddstream = function(event) {
-        console.info('Got stream:', event.stream);
-        /*var video = document.getElementById("vremote")
-        video.srcObject = event.stream;
-        video.onloadedmetadata = function(e) {
-            video.play();
-        }*/
+    conn.onaddstream = function (event) {
+      console.info('Got stream:', event.stream);
+      /*var video = document.getElementById("vremote")
+      video.srcObject = event.stream;
+      video.onloadedmetadata = function(e) {
+          video.play();
+      }*/
     }
 
     if (createOffer) {
-        if (!receiver) {
-            var video = document.getElementById("vlocal");
-            conn.addStream(video.srcObject);
-        }
+      if (!receiver) {
+        var video = document.getElementById("vlocal");
+        conn.addStream(video.srcObject);
+      }
 
-        var datachannel = conn.createDataChannel('sendDataChannel');
+      var datachannel = conn.createDataChannel('sendDataChannel');
 
-        var offer = await conn.createOffer({offerToReceiveAudio: true, offerToReceiveVideo: true});
-        await conn.setLocalDescription(offer);
-        socket.emit('message', {
-            id, room, peer,
-            type: 'offer',
-            sdp: conn.localDescription
-        });
+      var offer = await conn.createOffer({offerToReceiveAudio: true, offerToReceiveVideo: true});
+      await conn.setLocalDescription(offer);
+      socket.emit('message', {
+        id, room, peer,
+        type: 'offer',
+        sdp: conn.localDescription
+      });
     }
 
     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;
+      var elem = document.documentElement;
 
-        /* View in fullscreen */
-        if (elem.requestFullscreen) {
-            elem.requestFullscreen();
-        } else if (elem.mozRequestFullScreen) { /* Firefox */
-                elem.mozRequestFullScreen();
-        } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
-                elem.webkitRequestFullscreen();
-        } else if (elem.msRequestFullscreen) { /* IE/Edge */
-                elem.msRequestFullscreen();
-        }
+      /* View in fullscreen */
+      if (elem.requestFullscreen) {
+        elem.requestFullscreen();
+      } else if (elem.mozRequestFullScreen) { /* Firefox */
+        elem.mozRequestFullScreen();
+      } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
+        elem.webkitRequestFullscreen();
+      } else if (elem.msRequestFullscreen) { /* IE/Edge */
+        elem.msRequestFullscreen();
+      }
 
-        try {
-            var stream = await getMedia();
-            var video = document.getElementById("vlocal");
-            video.srcObject = stream;
-            video.onloadedmetadata = function(e) {
-                video.play();
-            }
-        } catch(e) {
-            console.error("media", e)
+      try {
+        var stream = await getMedia();
+        var video = document.getElementById("vlocal");
+        video.srcObject = stream;
+        video.onloadedmetadata = function (e) {
+          video.play();
         }
+      } catch (e) {
+        console.error("media", e)
+      }
     }
 
     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>