ysawa/simple-webrtc-demo.html

## simple-webrtc-demo.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		video {
			width: 320px;
			height: 240px;
		}
	</style>
</head>
<body>
<h1>WebRTC Local Connections</h1>
<p>Video stream created by getUserMedia will be shown in the left video tag.</p>
<p>The stream will be sent to the right video tag over RTCPeerConnection.</p>
<video id="local-video" autoplay></video>
<video id="remote-video" autoplay></video>
<script>
	var localVideo = document.querySelector('#local-video');
	var remoteVideo = document.querySelector('#remote-video');
	var offerOptions = {
		offerToReceiveAudio: 1,
		offerToReceiveVideo: 1
	};

	var setStreamToVideo = function (stream, video) {
		if (window.URL) {
			video.src = window.URL.createObjectURL(stream);
		} else {
			video.src = stream;
		}
	};
	navigator.getUserMedia({video: true, audio: false}, function (stream) {
		var configuration = null;
		var connection1 = new RTCPeerConnection(configuration);
		var connection2 = new RTCPeerConnection(configuration);

		var getOtherConnection = function (connection) {
			return (connection === connection1) ? connection2 : connection1;
		};

		var onIceCandidate = function (connection, event) {
			if (event.candidate) {
				getOtherConnection(connection).addIceCandidate(
					event.candidate
				);
			}
		};

		setStreamToVideo(stream, localVideo);

		connection2.onaddstream = function (e) {
			console.log('connection2.onaddstream');
			setStreamToVideo(e.stream, remoteVideo);
		};

		connection1.onicecandidate = function(e) {
			onIceCandidate(connection1, e);
		};

		connection2.onicecandidate = function(e) {
			onIceCandidate(connection2, e);
		};

		connection1.addStream(stream);

		connection1.createOffer(offerOptions).then(function (offer) {
			console.log('connection1.createOffer');
			connection1.setLocalDescription(offer);

			connection2.setRemoteDescription(offer);

			connection2.createAnswer().then(function (answer) {
				console.log('connection2.createAnswer');
				connection1.setRemoteDescription(answer);
				connection2.setLocalDescription(answer);
			})
		})
	}, console.error)
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	video {
	width: 320px;
	height: 240px;
	}
	</style>
	</head>
	<body>
	<h1>WebRTC Local Connections</h1>
	<p>Video stream created by getUserMedia will be shown in the left video tag.</p>
	<p>The stream will be sent to the right video tag over RTCPeerConnection.</p>
	<video id="local-video" autoplay></video>
	<video id="remote-video" autoplay></video>
	<script>
	var localVideo = document.querySelector('#local-video');
	var remoteVideo = document.querySelector('#remote-video');
	var offerOptions = {
	offerToReceiveAudio: 1,
	offerToReceiveVideo: 1
	};

	var setStreamToVideo = function (stream, video) {
	if (window.URL) {
	video.src = window.URL.createObjectURL(stream);
	} else {
	video.src = stream;
	}
	};
	navigator.getUserMedia({video: true, audio: false}, function (stream) {
	var configuration = null;
	var connection1 = new RTCPeerConnection(configuration);
	var connection2 = new RTCPeerConnection(configuration);

	var getOtherConnection = function (connection) {
	return (connection === connection1) ? connection2 : connection1;
	};

	var onIceCandidate = function (connection, event) {
	if (event.candidate) {
	getOtherConnection(connection).addIceCandidate(
	event.candidate
	);
	}
	};

	setStreamToVideo(stream, localVideo);

	connection2.onaddstream = function (e) {
	console.log('connection2.onaddstream');
	setStreamToVideo(e.stream, remoteVideo);
	};

	connection1.onicecandidate = function(e) {
	onIceCandidate(connection1, e);
	};

	connection2.onicecandidate = function(e) {
	onIceCandidate(connection2, e);
	};

	connection1.addStream(stream);

	connection1.createOffer(offerOptions).then(function (offer) {
	console.log('connection1.createOffer');
	connection1.setLocalDescription(offer);

	connection2.setRemoteDescription(offer);

	connection2.createAnswer().then(function (answer) {
	console.log('connection2.createAnswer');
	connection1.setRemoteDescription(answer);
	connection2.setLocalDescription(answer);
	})
	})
	}, console.error)
	</script>
	</body>
	</html>