TurplePurtle · March 9, 2013 02:20
diff --git a/webrtc-dataconnection.html b/webrtc-dataconnection.html
 <!doctype html>
 <html>
 <head>
    <meta charset="utf-8">
    <title>WebRTC p2p data</title>
    <script src="https://webrtc-samples.googlecode.com/svn/trunk/apprtc/js/adapter.js"></script>
 </head>
 <body>
 Testing WebRTC connection.

 <button id=msg1 type=button>PC1 -> PC2</button>
 <button id=msg2 type=button>PC2 -> PC1</button>

 <script>
 /* See also:
    http://www.html5rocks.com/en/tutorials/webrtc/basics/
    https://code.google.com/p/webrtc-samples/source/browse/trunk/apprtc/index.html
    
    https://webrtc-demos.appspot.com/html/pc1.html
 */

 var cfg = {"iceServers":[{"url":"stun:23.21.150.121"}]},
    con = { 'optional': [{'DtlsSrtpKeyAgreement': true}, {'RtpDataChannels': true }] };

 // createDataChannel needs `open /Applications/Google\ Chrome\ Canary.app --args --enable-data-channels` :-(


 /* THIS IS ALICE, THE CALLER/SENDER */

 var pc1 = new RTCPeerConnection(cfg, con),
    dc1 = null, tn1 = null;

 function setupDC1() {
    try {
        dc1 = pc1.createDataChannel('test', {reliable:false});
        console.log("Created datachannel (pc1)");
        dc1.onmessage = function (e) {
            console.log("Got message (pc1)", e.data);
        }        
    } catch (e) { console.warn("No data channel (pc1)", e); }
 }
 // Chrome needs us to do set up the data channel right away, for Firefox see below
 //  see https://webrtc-demos.appspot.com/html/dc1.html
 if (!pc1.connectDataConnection) setupDC1();

 getUserMedia({'audio':true, fake:true}, function (stream) {
    console.log("Got local audio", stream);
    pc1.addStream(stream);
    //tn1 = pc1.createDTMFSender(pc1.getLocalStreams()[0].getAudioTracks()[0])
    pc1.createOffer(function (offerDesc) {
        console.log("Got offer", offerDesc);
        pc1.setLocalDescription(offerDesc);
        handleOfferFromPC1(offerDesc);
    }, function () { console.warn("No create offer"); });
    
 }, function () { console.warn("No audio"); });

 pc1.onicecandidate = function (e) {
    console.log("ICE candidate (pc1)", e);
    if (e.candidate) handleCandidateFromPC1(e.candidate)
 };

 function handleAnswerFromPC2(answerDesc) {
    pc1.setRemoteDescription(answerDesc);
    // WORKAROUND: Firefox currently needs us to set up a special connection thingy (2013/02/26)
    //  see http://mozilla.github.com/webrtc-landing/data_test.html
    //  and https://hacks.mozilla.org/2012/11/progress-update-on-webrtc-for-firefox-on-desktop/
    //  and http://stackoverflow.com/questions/14134090/how-is-a-webrtc-peer-connection-established)
    if (pc1.connectDataConnection) {
        pc1.connectDataConnection(9876, 5432);
        pc1.onconnection = setupDC1;
    }
 }

 function handleCandidateFromPC2(iceCandidate) {
    pc1.addIceCandidate(iceCandidate);
 }

 document.getElementById('msg1').addEventListener('click', function () {
    if (tn1) tn1.insertDTMF('123213');
    if (dc1) dc1.send("ping");
 }, false);


 /* THIS IS BOB, THE ANSWERER/RECEIVER */

 var pc2 = new RTCPeerConnection(cfg, con),
    dc2 = null;

 pc2.ondatachannel = function (e) {
    var datachannel = e.channel || e;       // Chrome sends event, FF sends raw channel
    console.log("Received datachannel (pc2)", arguments);
    dc2 = datachannel;
    dc2.onmessage = function (e) {
        console.log("Got message (pc2)", e.data);
    }
 }

 function handleOfferFromPC1(offerDesc) {
    pc2.setRemoteDescription(offerDesc);
    pc2.createAnswer(function (answerDesc) {
        console.log("Got answer", answerDesc);
        pc2.setLocalDescription(answerDesc);
        handleAnswerFromPC2(answerDesc);
        if (pc2.connectDataConnection) pc2.connectDataConnection(5432, 9876);
    }, function () { console.warn("No create answer"); });
 }

 pc2.onicecandidate = function (e) {
    console.log("ICE candidate (pc2)", e);
    if (e.candidate) handleCandidateFromPC2(e.candidate)
 };

 function handleCandidateFromPC1(iceCandidate) {
    pc2.addIceCandidate(iceCandidate);
 }

 pc2.onaddstream = function (e) {
    console.log("Got remote stream", e);
    var el = new Audio();
    el.autoplay = true;
    attachMediaStream(el, e.stream);
 }

 document.getElementById('msg2').addEventListener('click', function () {
    if (dc2) dc2.send("pong");
 }, false);

 </script>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>WebRTC p2p data</title>
	<script src="https://webrtc-samples.googlecode.com/svn/trunk/apprtc/js/adapter.js"></script>
	</head>
	<body>
	Testing WebRTC connection.

	<button id=msg1 type=button>PC1 -> PC2</button>
	<button id=msg2 type=button>PC2 -> PC1</button>

	<script>
	/* See also:
	http://www.html5rocks.com/en/tutorials/webrtc/basics/
	https://code.google.com/p/webrtc-samples/source/browse/trunk/apprtc/index.html

	https://webrtc-demos.appspot.com/html/pc1.html
	*/

	var cfg = {"iceServers":[{"url":"stun:23.21.150.121"}]},
	con = { 'optional': [{'DtlsSrtpKeyAgreement': true}, {'RtpDataChannels': true }] };

	// createDataChannel needs `open /Applications/Google\ Chrome\ Canary.app --args --enable-data-channels` :-(


	/* THIS IS ALICE, THE CALLER/SENDER */

	var pc1 = new RTCPeerConnection(cfg, con),
	dc1 = null, tn1 = null;

	function setupDC1() {
	try {
	dc1 = pc1.createDataChannel('test', {reliable:false});
	console.log("Created datachannel (pc1)");
	dc1.onmessage = function (e) {
	console.log("Got message (pc1)", e.data);
	}
	} catch (e) { console.warn("No data channel (pc1)", e); }
	}
	// Chrome needs us to do set up the data channel right away, for Firefox see below
	// see https://webrtc-demos.appspot.com/html/dc1.html
	if (!pc1.connectDataConnection) setupDC1();

	getUserMedia({'audio':true, fake:true}, function (stream) {
	console.log("Got local audio", stream);
	pc1.addStream(stream);
	//tn1 = pc1.createDTMFSender(pc1.getLocalStreams()[0].getAudioTracks()[0])
	pc1.createOffer(function (offerDesc) {
	console.log("Got offer", offerDesc);
	pc1.setLocalDescription(offerDesc);
	handleOfferFromPC1(offerDesc);
	}, function () { console.warn("No create offer"); });

	}, function () { console.warn("No audio"); });

	pc1.onicecandidate = function (e) {
	console.log("ICE candidate (pc1)", e);
	if (e.candidate) handleCandidateFromPC1(e.candidate)
	};

	function handleAnswerFromPC2(answerDesc) {
	pc1.setRemoteDescription(answerDesc);
	// WORKAROUND: Firefox currently needs us to set up a special connection thingy (2013/02/26)
	// see http://mozilla.github.com/webrtc-landing/data_test.html
	// and https://hacks.mozilla.org/2012/11/progress-update-on-webrtc-for-firefox-on-desktop/
	// and http://stackoverflow.com/questions/14134090/how-is-a-webrtc-peer-connection-established)
	if (pc1.connectDataConnection) {
	pc1.connectDataConnection(9876, 5432);
	pc1.onconnection = setupDC1;
	}
	}

	function handleCandidateFromPC2(iceCandidate) {
	pc1.addIceCandidate(iceCandidate);
	}

	document.getElementById('msg1').addEventListener('click', function () {
	if (tn1) tn1.insertDTMF('123213');
	if (dc1) dc1.send("ping");
	}, false);


	/* THIS IS BOB, THE ANSWERER/RECEIVER */

	var pc2 = new RTCPeerConnection(cfg, con),
	dc2 = null;

	pc2.ondatachannel = function (e) {
	var datachannel = e.channel \|\| e; // Chrome sends event, FF sends raw channel
	console.log("Received datachannel (pc2)", arguments);
	dc2 = datachannel;
	dc2.onmessage = function (e) {
	console.log("Got message (pc2)", e.data);
	}
	}

	function handleOfferFromPC1(offerDesc) {
	pc2.setRemoteDescription(offerDesc);
	pc2.createAnswer(function (answerDesc) {
	console.log("Got answer", answerDesc);
	pc2.setLocalDescription(answerDesc);
	handleAnswerFromPC2(answerDesc);
	if (pc2.connectDataConnection) pc2.connectDataConnection(5432, 9876);
	}, function () { console.warn("No create answer"); });
	}

	pc2.onicecandidate = function (e) {
	console.log("ICE candidate (pc2)", e);
	if (e.candidate) handleCandidateFromPC2(e.candidate)
	};

	function handleCandidateFromPC1(iceCandidate) {
	pc2.addIceCandidate(iceCandidate);
	}

	pc2.onaddstream = function (e) {
	console.log("Got remote stream", e);
	var el = new Audio();
	el.autoplay = true;
	attachMediaStream(el, e.stream);
	}

	document.getElementById('msg2').addEventListener('click', function () {
	if (dc2) dc2.send("pong");
	}, false);

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