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

data/webcam/offerer.html
Summary

Maintainability

Test Coverage

Issues
<html>
<head>
    <title>Video session</title>
    <style type="text/css">
        body {
            background: #fff;
        }

        div.dot1 {
            position: absolute;
            width: 20px;
            height: 20px;
            margin: 30px auto 0;
            border-radius: 50px;
            background-color: red;
            top: 150;
            left: 470;
        }

        div.dot2 {
            position: absolute;
            width: 20px;
            height: 20px;
            margin: 30px auto 0;
            border-radius: 50px;
            background-color: red;
            top: 150;
            left: 505;
        }

        div.dot3 {
            position: absolute;
            width: 20px;
            height: 20px;
            margin: 30px auto 0;
            border-radius: 50px;
            background-color: red;
            top: 150;
            left: 540;
        }

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

        div.windowb {
            height: 340px;
            width: 420px;
            border-radius: 15px;
            -moz-border-raidus: 15px;
            background-color: black;
            position: absolute;
            left: 570;
            padding : 10px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            vertical-align: middle;
            color: white;
        }

        div.windowc {
            position: absolute;
            top: 400;
            left: 60;
            height: 50px;
            width: 900px;
            color: red;
        }

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

    <script>
        =WEBRTCAPIJS=

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

        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, '=OFFERERID=');

        peer.onStreamAdded = function(e) {
            var video = e.mediaElement;
            video.setAttribute('width', 420);
            video.setAttribute('height', 340);
            video.setAttribute('controls', false);
            video.volume = 0.5;

            if (e.userid == 'self') {
                document.getElementById("windowb").appendChild(video);
            }
            else {
                document.getElementById("windowa").appendChild(video);
                document.getElementById("message").innerHTML = "Session is now active.";
            }

            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.";
        };

        window.onload = function() {
            setTimeout(function(){
                getUserMedia(function(stream) {
                    peer.addStream(stream);
                    peer.startBroadcasting();
                });
            }, 500);
        };

        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="windowa" id="windowa">
    <b>Your peer</b>
</div>

<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>

<div class="windowb" id="windowb">
    <b>You</b>
</div>

<div class="windowc">
    <b>Status:</b><p></p>
    <span id="message">Waiting for your peer to join the video session...</span>
</div>

<div class="footer">
    <center><a href="https://metasploit.com/" target="_blank">metasploit.com</a></center>
</div>

</body>
</html>