johannesMatevosyan/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Creating RTCPeerConnection</title>
    <style>
        body {
            background-color: #3D6DF2;
            margin-top: 15px;
        }
        video {
            background: black;
            border: 1px solid gray;
        }
        #container {
            position: relative;
            display: block;
            margin: 0 auto;
            width: 500px;
            height: 500px;
        }
        #yours {
            width: 150px;
            height: 150px;
            position: absolute;
            top: 15px;
            right: 15px;
        }
        #theirs {
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="container">
        <video id="yours" autoplay></video>
        <video id="theirs" autoplay></video>
    </div>
    <script src="main.js"></script>
</body>
</html>

## main.js
function hasUserMedia() {
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    return !!navigator.getUserMedia;
}

function hasRTCPeerConnection() {
    window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
    return !!window.RTCPeerConnection;
}

var yourVideo = document.querySelector('#yours'),
    theirVideo = document.querySelector('#theirs'),
    yourConnection, theirConnection;

if (hasUserMedia()) {
    navigator.getUserMedia({ video: true, audio: false }, function (stream) {
        yourVideo.src = window.URL.createObjectURL(stream);

        if (hasRTCPeerConnection()) {
            startPeerConnection(stream);
        } else {
            alert("Sorry, your browser does not support WebRTC.");
        }
    }, function (error) {
        console.log(error);
    });
} else {
    alert("Sorry, your browser does not support WebRTC.");
}

function startPeerConnection(stream) {
    var configuration = {
        "iceServers": [{ "url": "stun:192.168.1.100:9876" }] // this is address of a local server
    };
    yourConnection = new mozRTCPeerConnection(configuration);
    theirConnection = new mozRTCPeerConnection(configuration);
console.log(theirConnection);

    // Setup stream listening
    yourConnection.addStream(stream);

    theirConnection.onaddstream = function (e) {
        theirVideo.src = window.URL.createObjectURL(e.stream);
    };

    // Setup ice handling
    yourConnection.onicecandidate = function (event) {
        if (event.candidate) {
            theirConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
        }
    };

    theirConnection.onicecandidate = function (event) {
        if (event.candidate) {
            yourConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
        }
    };

    // Begin the offer
    yourConnection.createOffer(function (offer) {
        yourConnection.setLocalDescription(offer);
        theirConnection.setRemoteDescription(offer);

        theirConnection.createAnswer(function (offer) {
            theirConnection.setLocalDescription(offer);
            yourConnection.setRemoteDescription(offer);
        });
    });
};

## server.js
var http = require("http");
http.createServer(function(request, response) {
    response.writeHeader(200, {"Content-Type": "text/html"});
    response.end();
}).listen(2020, function() {
    console.log('Server started at port 2020');
});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Creating RTCPeerConnection</title>
	<style>
	body {
	background-color: #3D6DF2;
	margin-top: 15px;
	}
	video {
	background: black;
	border: 1px solid gray;
	}
	#container {
	position: relative;
	display: block;
	margin: 0 auto;
	width: 500px;
	height: 500px;
	}
	#yours {
	width: 150px;
	height: 150px;
	position: absolute;
	top: 15px;
	right: 15px;
	}
	#theirs {
	width: 500px;
	height: 500px;
	}
	</style>
	</head>
	<body>
	<div id="container">
	<video id="yours" autoplay></video>
	<video id="theirs" autoplay></video>
	</div>
	<script src="main.js"></script>
	</body>
	</html>
	function hasUserMedia() {
	navigator.getUserMedia = navigator.getUserMedia \|\| navigator.webkitGetUserMedia \|\| navigator.mozGetUserMedia \|\| navigator.msGetUserMedia;
	return !!navigator.getUserMedia;
	}

	function hasRTCPeerConnection() {
	window.RTCPeerConnection = window.RTCPeerConnection \|\| window.webkitRTCPeerConnection \|\| window.mozRTCPeerConnection;
	return !!window.RTCPeerConnection;
	}

	var yourVideo = document.querySelector('#yours'),
	theirVideo = document.querySelector('#theirs'),
	yourConnection, theirConnection;

	if (hasUserMedia()) {
	navigator.getUserMedia({ video: true, audio: false }, function (stream) {
	yourVideo.src = window.URL.createObjectURL(stream);

	if (hasRTCPeerConnection()) {
	startPeerConnection(stream);
	} else {
	alert("Sorry, your browser does not support WebRTC.");
	}
	}, function (error) {
	console.log(error);
	});
	} else {
	alert("Sorry, your browser does not support WebRTC.");
	}

	function startPeerConnection(stream) {
	var configuration = {
	"iceServers": [{ "url": "stun:192.168.1.100:9876" }] // this is address of a local server
	};
	yourConnection = new mozRTCPeerConnection(configuration);
	theirConnection = new mozRTCPeerConnection(configuration);
	console.log(theirConnection);

	// Setup stream listening
	yourConnection.addStream(stream);

	theirConnection.onaddstream = function (e) {
	theirVideo.src = window.URL.createObjectURL(e.stream);
	};

	// Setup ice handling
	yourConnection.onicecandidate = function (event) {
	if (event.candidate) {
	theirConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
	}
	};

	theirConnection.onicecandidate = function (event) {
	if (event.candidate) {
	yourConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
	}
	};

	// Begin the offer
	yourConnection.createOffer(function (offer) {
	yourConnection.setLocalDescription(offer);
	theirConnection.setRemoteDescription(offer);

	theirConnection.createAnswer(function (offer) {
	theirConnection.setLocalDescription(offer);
	yourConnection.setRemoteDescription(offer);
	});
	});
	};
	var http = require("http");
	http.createServer(function(request, response) {
	response.writeHeader(200, {"Content-Type": "text/html"});
	response.end();
	}).listen(2020, function() {
	console.log('Server started at port 2020');
	});