data/webcam/answerer.html from rapid7/metasploit-framework

data/webcam/answerer.html
Summary

Maintainability

Test Coverage

Issues
<html>
<head>
<title>webcam_chat</title>
<style type="text/css">
    div.container {
        position: relative;
    }

    div.windowa {
        height: 480px;
        width: 640px;
        border-radius: 15px;
        -moz-border-radius: 15px;
        background-color: black;
        position: absolute;
        left: 50;
        padding : 10px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        vertical-align: middle;
        color: white;
    }

    div.windowb {
        height: 180px;
        width: 200px;
        border-radius: 15px;
        -moz-border-radius: 15px;
        background-color: #9B9B9B;
        position: absolute;
        top: 480;
        left: 470;
        padding: 10px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        vertical-align: middle;
    }

    div.windowc {
        position: absolute;
        top: 510;
        left: 80;
        height: 150px;
        width: 380px;
        color: red;
    }

    div.footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 10px;
    }

    video.peer {
        position: absolute;
        top: 15;
        left: 10;
    }

    video.self {
        position: absolute;
        top: 5;
        left: 10;
    }
</style>
<script>
    =WEBRTCAPIJS=

    window.onerror = function(e) {
        document.getElementById("message").innerHTML = "Error: " + e.toString();
    }

    window.onload = function() {
        document.getElementById("message").innerHTML = "Waiting for the session. When the session arrives, you must manually allow the webcam to run in order to join the session."
    }

    var channel = '=CHANNEL=';
    var websocket = new WebSocket('ws://=SERVER=');
    var inSession = false;

    websocket.onopen = function() {
        websocket.push(JSON.stringify({
            open: true,
            channel: channel
        }));
    };

    websocket.push = websocket.send;
    websocket.send = function(data) {
        websocket.push(JSON.stringify({
            data: data,
            channel: channel
        }));
    };

    var peer = new PeerConnection(websocket);
    peer.onUserFound = function(userid) {
        if (inSession) {
            console.debug("Already in session, will not send another participation request");
            return;
        };

        userid = "=OFFERERID=";

        getUserMedia(function(stream) {
            peer.addStream(stream);
            peer.sendParticipationRequest(userid);
            inSession = true;
            document.getElementById("message").innerHTML = "Session is now active.";
        });
    };

    peer.onStreamAdded = function(e) {
        var video = e.mediaElement;
        if (e.userid == 'self') {
            video.controls = true;
            video.setAttribute('width', 200);
            video.setAttribute('height', 190);
            video.setAttribute('controls', false);
            video.setAttribute('class', 'self');
            document.getElementById("windowb").appendChild(video);
        }
        else {
            video.controls = true;
            video.setAttribute('width', 640);
            video.setAttribute('height', 460);
            video.setAttribute('controls', false);
            video.setAttribute('class', 'peer');
            document.getElementById("windowa").appendChild(video);
        }
        video.muted = false;
        video.volume = 0.5;
        video.play();
    };

    peer.onStreamEnded = function(e) {
        var video = e.mediaElement;
        if (video) {
            video.style.opacity = 0;
            setTimeout(function() {
                video.parentNode.removeChild(video);
            }, 1000);
        }
        document.getElementById("message").innerHTML = "The video session has ended.";
    };
                    
    function getUserMedia(callback) {

        var hints = {audio:true,video:{
            optional: [],
            mandatory: {
                minWidth: 1280,
                minHeight: 720,
                maxWidth: 1920,
                maxHeight: 1080,
                minAspectRatio: 1.77
            }
        }};

        navigator.getUserMedia(hints,function(stream) {
            var video = document.createElement('video');
            video.src = URL.createObjectURL(stream);

            peer.onStreamAdded({
                mediaElement: video,
                userid: 'self',
                stream: stream
            });
                        
            callback(stream);
        });
    }
</script>
</head>
<body>

<div class="container">
    <div class="windowa" id="windowa">
    </div>
    <div class="windowb" id="windowb">
    </div>
    <div class="windowc">
        <b>Session status (=RHOST=):</b><p></p>
        <span id="message"></span>
    </div>
</div>
<div class="footer">
    <center><a href="https://metasploit.com/" target="_blank">metasploit.com</a></center>
</div>
</body>
</html>