mbildner · November 11, 2013 15:54
diff --git a/rtc_demo_annotated.html b/rtc_demo_annotated.html
 <html>
 <head>
 	<title></title>
        <!-- based on http://simpl.info/rtcdatachannel/js/main.js -->


 </head>
 <body>
 	<textarea id="dataChannelSend"></textarea>
 	<textarea id="dataChannelReceive"></textarea>

 	<br></br>

 	<button id="startButton">Open Connection</button>
 	<button id="sendButton">Send Message</button>


 	<script type="text/javascript">

 		var sendChannel;
 		var receiveChannel;

 		var startButton = document.getElementById("startButton");
 		var sendButton = document.getElementById("sendButton");


 		startButton.addEventListener("click", function (click) {
 			createConnection();
 		});

 		sendButton.addEventListener("click", function (click) {
 			sendData();
 		});

 		// ----------------------------------

 		function createConnection () {
 			console.log("1) createConnection called");


 			// create the localPeerConnection object

 			var servers = null;
 			window.localPeerConnection = new webkitRTCPeerConnection(servers, {optional: [{RtpDataChannels: true}]});

 			console.log("2) localPeerConnection object created: ", window.localPeerConnection);

 			try {
 				sendChannel = localPeerConnection.createDataChannel("sendDataChannel", {reliable: false});
 				console.log("3) sendChannel created", sendChannel);
 			} catch (error) {
 				alert("ERROR creating sendChannel");
 				console.log(error);
 			}

 			localPeerConnection.onicecandidate = gotLocalCandidate;

 			// finished handling the localPeerConnection setup


 			// create the remotePeerConnection object 

 			window.remotePeerConnection = new webkitRTCPeerConnection(servers, {optional: [{RtpDataChannels: true}]});

 			console.log("4) remotePeerConnection object created: ", window.remotePeerConnection);

 			remotePeerConnection.onicecandidate = gotRemoteIceCandidate;


 			remotePeerConnection.ondatachannel = gotReceiveChannel;

 			// finished handling the remotePeerConnection setup


 			// finished first two steps of the handshake, now create the connection and get things moving

 			// handshake moment of truth!

 			localPeerConnection.createOffer(gotLocalDescription);


 		}



 		function sendData () {
 			// get data from the textarea
 			var data = document.getElementById("dataChannelSend").value;
 			// and fire it off
 			sendChannel.send(data);
 		}

 		function gotLocalDescription (desc) {
 			console.log("A) gotLocalDescription called");
 			localPeerConnection.setLocalDescription(desc);
 			console.log("B) localPeerConnection.setLocalDescription(desc);")
 			remotePeerConnection.setRemoteDescription(desc);
 			console.log("C) remotePeerConnection.setRemoteDescription(desc);");
 			remotePeerConnection.createAnswer(gotRemoteDescription);
 			console.log("D) remotePeerConnection.createAnswer(gotRemoteDescription)");			
 		}


 		function gotRemoteDescription (desc) {
 			console.log("gotRemoteDescription called");

 			remotePeerConnection.setLocalDescription(desc);
 			console.log("remotePeerConnection.setLocalDescription(desc)");

 			localPeerConnection.setRemoteDescription(desc);
 			console.log("localPeerConnection.setRemoteDescription(desc)");


 		}


 		function gotLocalCandidate () {
 			console.log("A) gotLocalCandidate called");
 			if (event.candidate) {
 				console.log("B) event.candidate exists", event.candidate);
 				remotePeerConnection.addIceCandidate(event.candidate);
 				console.log("C) added event.candidate to remotePeerConnection as addIceCandidate(x)")
 			}
 		}


 		function gotRemoteIceCandidate (event) {
 			console.log("A) gotRemoteIceCandidate called");

 			if (event.candidate) {
 				console.log("B) event.candidate exists", event.candidate);
 				localPeerConnection.addIceCandidate(event.candidate);
 				console.log("C) added event.candidate to localPeerConnection as addIceCandidate(x)");
 			}
 		}


 		function gotReceiveChannel (event) {
 			console.log("A) gotReceiveChannel called");
 			receiveChannel = event.channel;
 			receiveChannel.onmessage = handleMessage; 
 			console.log("B) set receiveChannel onmessage callback");
 			receiveChannel.onopen = function () {
 				console.log("receiveChannel now open");
 			}
 			console.log("C) set receiveChannel onopen callback");


 			receiveChannel.onclose = function () {
 				console.log("receiveChannel now closed");
 			}
 			console.log("D) set receiveChannel onclose callback");

 		}



 		function handleMessage (event) {
 			console.log("handleMessage called");
 			document.getElementById("dataChannelReceive").value = event.data;
 		}



 	</script>
 </body>
 </html>
	<html>
	<head>
	<title></title>
	<!-- based on http://simpl.info/rtcdatachannel/js/main.js -->


	</head>
	<body>
	<textarea id="dataChannelSend"></textarea>
	<textarea id="dataChannelReceive"></textarea>

	<br></br>

	<button id="startButton">Open Connection</button>
	<button id="sendButton">Send Message</button>


	<script type="text/javascript">

	var sendChannel;
	var receiveChannel;

	var startButton = document.getElementById("startButton");
	var sendButton = document.getElementById("sendButton");


	startButton.addEventListener("click", function (click) {
	createConnection();
	});

	sendButton.addEventListener("click", function (click) {
	sendData();
	});

	// ----------------------------------

	function createConnection () {
	console.log("1) createConnection called");


	// create the localPeerConnection object

	var servers = null;
	window.localPeerConnection = new webkitRTCPeerConnection(servers, {optional: [{RtpDataChannels: true}]});

	console.log("2) localPeerConnection object created: ", window.localPeerConnection);

	try {
	sendChannel = localPeerConnection.createDataChannel("sendDataChannel", {reliable: false});
	console.log("3) sendChannel created", sendChannel);
	} catch (error) {
	alert("ERROR creating sendChannel");
	console.log(error);
	}

	localPeerConnection.onicecandidate = gotLocalCandidate;

	// finished handling the localPeerConnection setup


	// create the remotePeerConnection object

	window.remotePeerConnection = new webkitRTCPeerConnection(servers, {optional: [{RtpDataChannels: true}]});

	console.log("4) remotePeerConnection object created: ", window.remotePeerConnection);

	remotePeerConnection.onicecandidate = gotRemoteIceCandidate;


	remotePeerConnection.ondatachannel = gotReceiveChannel;

	// finished handling the remotePeerConnection setup


	// finished first two steps of the handshake, now create the connection and get things moving

	// handshake moment of truth!

	localPeerConnection.createOffer(gotLocalDescription);


	}



	function sendData () {
	// get data from the textarea
	var data = document.getElementById("dataChannelSend").value;
	// and fire it off
	sendChannel.send(data);
	}

	function gotLocalDescription (desc) {
	console.log("A) gotLocalDescription called");
	localPeerConnection.setLocalDescription(desc);
	console.log("B) localPeerConnection.setLocalDescription(desc);")
	remotePeerConnection.setRemoteDescription(desc);
	console.log("C) remotePeerConnection.setRemoteDescription(desc);");
	remotePeerConnection.createAnswer(gotRemoteDescription);
	console.log("D) remotePeerConnection.createAnswer(gotRemoteDescription)");
	}


	function gotRemoteDescription (desc) {
	console.log("gotRemoteDescription called");

	remotePeerConnection.setLocalDescription(desc);
	console.log("remotePeerConnection.setLocalDescription(desc)");

	localPeerConnection.setRemoteDescription(desc);
	console.log("localPeerConnection.setRemoteDescription(desc)");


	}


	function gotLocalCandidate () {
	console.log("A) gotLocalCandidate called");
	if (event.candidate) {
	console.log("B) event.candidate exists", event.candidate);
	remotePeerConnection.addIceCandidate(event.candidate);
	console.log("C) added event.candidate to remotePeerConnection as addIceCandidate(x)")
	}
	}


	function gotRemoteIceCandidate (event) {
	console.log("A) gotRemoteIceCandidate called");

	if (event.candidate) {
	console.log("B) event.candidate exists", event.candidate);
	localPeerConnection.addIceCandidate(event.candidate);
	console.log("C) added event.candidate to localPeerConnection as addIceCandidate(x)");
	}
	}


	function gotReceiveChannel (event) {
	console.log("A) gotReceiveChannel called");
	receiveChannel = event.channel;
	receiveChannel.onmessage = handleMessage;
	console.log("B) set receiveChannel onmessage callback");
	receiveChannel.onopen = function () {
	console.log("receiveChannel now open");
	}
	console.log("C) set receiveChannel onopen callback");


	receiveChannel.onclose = function () {
	console.log("receiveChannel now closed");
	}
	console.log("D) set receiveChannel onclose callback");

	}



	function handleMessage (event) {
	console.log("handleMessage called");
	document.getElementById("dataChannelReceive").value = event.data;
	}



	</script>
	</body>
	</html>