quickwebrtc/index.html

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="/socket.io/socket.io.js"></script>

<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;

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('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({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.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;
        }

        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")
        video.srcObject = event.stream;
        video.onloadedmetadata = function(e) {
            video.play();
        }*/
    }

    if (createOffer) {
        if (!receiver) {
            var video = document.getElementById("vlocal");
            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
        });
    }

    return conn;
}

function report(err) {
    console.info(err);
}

document.addEventListener("DOMContentLoaded", async function() {
    if (!receiver) {
        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();
        }

        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 {
    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>
<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>-->