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


Collaborative Calculation and Data Science

colby

sagemath

Product

Resources

Company