trash

index.html

@@ -4,29 +4,87 @@
 <script>
 var hash = location.hash.substring(1).split('/');
 
+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 receiver = hash[1] === 'recv';
 
-var socket = io.connect();
+var socket;
-
-var peers = {};
-
-var mediaConstraints = {video: true, audio: true};
 
+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' });
     });
 
-function getPeerConnection(peer, createOffer) {
+    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);
+        }
+    });
+}
+
+var peers = {};
+
+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 } });
+    }
+}
+
+async function getPeerConnection(peer, createOffer) {
     if (peers[peer] !== undefined)
         return peers[peer];
 
     console.info('Creating PeerConnection for', peer);
-    var conn = new RTCPeerConnection();
+    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', {
@@ -34,39 +92,70 @@ function getPeerConnection(peer, createOffer) {
             type: 'ice', ice: event.candidate });
     }
 
-    conn.ontrack = function(track) {
+    conn.oniceconnectionstatechange = function(event) {
-        console.info('Got track:', track);
+        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;
+        }
+
+        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;
+        }
+
+        mediaStream.addTrack(event.track)
+
+        video.srcObject = mediaStream;
+        video.onloadedmetadata = function(e) {
+            video.play();
+        }
     }
 
     conn.onaddstream = function(event) {
         console.info('Got stream:', event.stream);
-        var video = document.getElementById("vremote")
+        /*var video = document.getElementById("vremote")
         video.srcObject = event.stream;
+        video.onloadedmetadata = function(e) {
+            video.play();
+        }*/
     }
 
-    if (!receiver) {
-        navigator.mediaDevices.getUserMedia(mediaConstraints).then(function(stream) {
-            var video = document.getElementById("vlocal");
-            video.src = window.URL.createObjectURL(stream);
-            video.srcObject = stream;
-
-            conn.addStream(stream);
-
     if (createOffer) {
-                conn.createOffer().then(function(offer) {
+        if (!receiver) {
-                    return conn.setLocalDescription(offer);
+            var video = document.getElementById("vlocal");
-                }).then(function() {
+            conn.addStream(video.srcObject);
+        }
+
+        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
         });
-                });
     }
-        })
-    }
-
-    peers[peer] = conn;
 
     return conn;
 }
@@ -75,48 +164,90 @@ function report(err) {
     console.info(err);
 }
 
-socket.on('message', function(data) {
+document.addEventListener("DOMContentLoaded", async function() {
-    if (data.id === id)
+    if (!receiver) {
-        return;
+        var elem = document.documentElement;
 
-    console.info('Message:', data);
+        /* View in fullscreen */
-    if (data.type === 'joined') {
+        if (elem.requestFullscreen) {
-        var conn = getPeerConnection(data.id, true);
+            elem.requestFullscreen();
-    } else if (data.type === 'ice' && data.peer === id) {
+        } else if (elem.mozRequestFullScreen) { /* Firefox */
-        var conn = getPeerConnection(data.id);
+                elem.mozRequestFullScreen();
-        conn.addIceCandidate(data.ice).catch(e => {
+        } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
-            console.log("Failure during addIceCandidate(): " + e.name);
+                elem.webkitRequestFullscreen();
-        });
+        } else if (elem.msRequestFullscreen) { /* IE/Edge */
-    } else if (data.type === 'offer' && data.peer === id) {
+                elem.msRequestFullscreen();
-        var conn = getPeerConnection(data.id, false);
-        navigator.mediaDevices.getUserMedia(mediaConstraints).then(function(stream) {
-            var video = document.getElementById("vlocal");
-            video.src = window.URL.createObjectURL(stream);
-            video.srcObject = stream;
-
-            conn.addStream(stream);
-            return conn.setRemoteDescription(new RTCSessionDescription(data.sdp));
-        }).then(function() {;
-            return conn.createAnswer();
-        }).then(function(answer) {
-            return conn.setLocalDescription(answer);
-        }).then(function() {
-            socket.emit('message', {
-                id, room, peer: data.id,
-                type: 'answer', sdp: conn.localDescription })
-        }).catch(report);
-    } else if (data.type === 'answer' && data.peer === id) {
-        console.info('Session answer get:', data)
-        var conn = getPeerConnection(data.id, false);
-        conn.setRemoteDescription(new RTCSessionDescription(data.sdp)).catch(report);
         }
+
+        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>
-#vlocal { border: 5px solid red; }
+video {
+    max-width: 100%;
+}
+
+html, body {
+    height: 100%;
+    margin: 0;
+}
+
+#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 {
+    padding: 10px;
+}
+
+#peers video {
+    border: 3px solid red;
+    max-width: 100px;
+}
+
+#peers video.receiver {
+    filter: none;
+    border: none;
+    background: black;
+}
+
 #vremote { border: 5px solid green; }
+
+pre {
+    position: absolute;
+    bottom: 0;
+    text-align: center;
+    width: 100%;
+    background: rgba(255,255,255, 0.5);
+    padding: 10px 0px;
+    margin: 0;
+}
 </style>
 
 <video id="vlocal"></video>
-<video id="vremote"></video>
+<div id="peers"></div>
+<pre>Stream using <strong>https://3000.f.inf.re/#<span id="room"></span></strong> (append /screen or /window on firefox to do screencasting)</pre>
+<!--<video id="vremote"></video>-->