lmccart/good-listener.html

## good-listener.html

<!DOCTYPE html>
<html>
    <head>
        <title>good-listener</title>
    </head>
    <body>
        <h1 id="title">good-listener</h1>
        <style>
            * {
                font-family: sans-serif;
                font-weight: 100;
            }
            body {
                background-color: rgb(249, 245, 232);
            }
            .videoContainer {
                position: relative;
                float: left;
                width: 50px;
                height: 150px;
                border: 2px solid black;
                margin: 5px;
            }
            .videoContainer video {
                position: absolute;
                width: 0;
                height: 0;
            }
            .volume_bar {
                position: absolute;
                width: 100%;
                height: 100%;
                right: 0px;
                bottom: 0px;
                background-color: rgb(252, 15, 55);
            }
        </style>
        <div class="videoContainer">
            <video id="localVideo" style="height: 150px;" oncontextmenu="return false;"></video>
            <div id="localVolume" class="volume_bar"></div>
        </div>
        <div id="remotes"></div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="simplewebrtc-with-adapter.bundle.js"></script>
        <script>
            // grab the room from the URL
            var mute = location.search.length > 0;
            var room = 'good-listener';

            // create our webrtc connection
            var webrtc = new SimpleWebRTC({
                // the id/element dom element that will hold "our" video
                localVideoEl: 'localVideo',
                // the id/element dom element that will hold remote videos
                remoteVideosEl: '',
                // immediately ask for camera access
                autoRequestMedia: true,
                debug: false,
                detectSpeakingEvents: true,
                media: {
                    video: false,
                    audio: true
                },
                receiveMedia: {
                    offerToReceiveVideo: 0,
                    offerToReceiveAudio: 1
                }
            });


            // when it's ready, join if we got a room from the URL
            webrtc.on('readyToCall', function () {
                // you can name it anything
                if (room) webrtc.joinRoom(room);
                if (mute) webrtc.mute();
            });

            function remap(x, in_min, in_max, out_min, out_max, clamp) {
                x = (x - in_min) / (in_max - in_min);
                x = (x * (out_max - out_min)) + out_min;
                if (clamp) {
                    if (x < out_min) return out_min;
                    if (x > out_max) return out_max;
                }
                return x;
            }

            webrtc.on('videoAdded', function (video, peer) {
                console.log(peer);
                console.log('video added', peer);
                var remotes = document.getElementById('remotes');
                if (remotes) {
                    var d = document.createElement('div');
                    d.className = 'videoContainer';
                    d.id = 'container_' + webrtc.getDomId(peer);
                    d.appendChild(video);
                    var vol = document.createElement('div');
                    vol.id = 'volume_' + peer.id;
                    vol.className = 'volume_bar';
                    video.onclick = function () {
                        video.style.width = video.videoWidth + 'px';
                        video.style.height = video.videoHeight + 'px';
                    };
                    d.appendChild(vol);
                    remotes.appendChild(d);
                }
            });
            webrtc.on('videoRemoved', function (video, peer) {
                console.log('video removed ', peer);
                var remotes = document.getElementById('remotes');
                var el = document.getElementById('container_' + webrtc.getDomId(peer));
                if (remotes && el) {
                    remotes.removeChild(el);
                }
            });

            // Since we use this twice we put it here
            function setRoom(name) {
                $('h1').text(name);
                $('body').addClass('active');
            }

            setRoom(room);
        </script>
    </body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<title>good-listener</title>
	</head>
	<body>
	<h1 id="title">good-listener</h1>
	<style>
	* {
	font-family: sans-serif;
	font-weight: 100;
	}
	body {
	background-color: rgb(249, 245, 232);
	}
	.videoContainer {
	position: relative;
	float: left;
	width: 50px;
	height: 150px;
	border: 2px solid black;
	margin: 5px;
	}
	.videoContainer video {
	position: absolute;
	width: 0;
	height: 0;
	}
	.volume_bar {
	position: absolute;
	width: 100%;
	height: 100%;
	right: 0px;
	bottom: 0px;
	background-color: rgb(252, 15, 55);
	}
	</style>
	<div class="videoContainer">
	<video id="localVideo" style="height: 150px;" oncontextmenu="return false;"></video>
	<div id="localVolume" class="volume_bar"></div>
	</div>
	<div id="remotes"></div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<script src="simplewebrtc-with-adapter.bundle.js"></script>
	<script>
	// grab the room from the URL
	var mute = location.search.length > 0;
	var room = 'good-listener';

	// create our webrtc connection
	var webrtc = new SimpleWebRTC({
	// the id/element dom element that will hold "our" video
	localVideoEl: 'localVideo',
	// the id/element dom element that will hold remote videos
	remoteVideosEl: '',
	// immediately ask for camera access
	autoRequestMedia: true,
	debug: false,
	detectSpeakingEvents: true,
	media: {
	video: false,
	audio: true
	},
	receiveMedia: {
	offerToReceiveVideo: 0,
	offerToReceiveAudio: 1
	}
	});


	// when it's ready, join if we got a room from the URL
	webrtc.on('readyToCall', function () {
	// you can name it anything
	if (room) webrtc.joinRoom(room);
	if (mute) webrtc.mute();
	});

	function remap(x, in_min, in_max, out_min, out_max, clamp) {
	x = (x - in_min) / (in_max - in_min);
	x = (x * (out_max - out_min)) + out_min;
	if (clamp) {
	if (x < out_min) return out_min;
	if (x > out_max) return out_max;
	}
	return x;
	}

	webrtc.on('videoAdded', function (video, peer) {
	console.log(peer);
	console.log('video added', peer);
	var remotes = document.getElementById('remotes');
	if (remotes) {
	var d = document.createElement('div');
	d.className = 'videoContainer';
	d.id = 'container_' + webrtc.getDomId(peer);
	d.appendChild(video);
	var vol = document.createElement('div');
	vol.id = 'volume_' + peer.id;
	vol.className = 'volume_bar';
	video.onclick = function () {
	video.style.width = video.videoWidth + 'px';
	video.style.height = video.videoHeight + 'px';
	};
	d.appendChild(vol);
	remotes.appendChild(d);
	}
	});
	webrtc.on('videoRemoved', function (video, peer) {
	console.log('video removed ', peer);
	var remotes = document.getElementById('remotes');
	var el = document.getElementById('container_' + webrtc.getDomId(peer));
	if (remotes && el) {
	remotes.removeChild(el);
	}
	});

	// Since we use this twice we put it here
	function setRoom(name) {
	$('h1').text(name);
	$('body').addClass('active');
	}

	setRoom(room);
	</script>
	</body>
	</html>