Jason (jcreed) wrote,

Feeling kind of shitty and feverish and mentally bluh like I am getting the flu or something tonight.

On the plus side, I finally distilled some of the extant webrtc data channel tutorials down to a couple short snippets of code and I think I vaguely understand what's going on better. This is mostly based on https://github.com/cjb/serverless-webrtc but even as comparatively simple as that is, I still wanted something simpler that stripped out all the spurious html ui surrounding the absolutely essential bits of the webrtc api.

Anyway the following recipe works for me. In Chrome Tab #1, open up developer console and do:
pc = new webkitRTCPeerConnection({"iceServers":[{"url":"stun:"}]});
pc.onconnection = function() { console.log('connected'); };
dc = pc.createDataChannel('test', {reliable:true});
dc.onopen = function() { console.log('connected'); }
pc.onicecandidate = function(e) { if (e.candidate == null) {
console.log(JSON.stringify(JSON.stringify(pc.localDescription)));; } };
pc.createOffer(function(off) {  pc.setLocalDescription(off); } );

Apparently the API is, "pc.onicecandidate gets called a bunch of time, each time with a particular ICE candidate (which represents a possible hacky NAT-busting network path to the current host?), and then finally gets called with null once all ICE candidates are so listed".

So we just wait for the candidate to be null, and then print out the "localDescription", which has been imperatively updated behind our back to include all those ICE candidates.

So it'll print out a string literal; this is the "offer". copy and paste this over into Chrome Tab #2 (which may be on a different computer entirely!) into the global variable 'offer'.

offer = /* copy-and-paste string literal from Tab #1 */;
pc = new webkitRTCPeerConnection({"iceServers":[{"url":"stun:"}]});
pc.ondatachannel = function(e) { console.log('data channel', e); dc = e.channel; }
pc.setRemoteDescription(new RTCSessionDescription(JSON.parse(offer)));
pc.onicecandidate = function(e) { if (e.candidate == null) { 
console.log(JSON.stringify(JSON.stringify(pc.localDescription)));; } };
pc.createAnswer(function (answer) { pc.setLocalDescription(answer);});

We do mostly the same song and dance here, except instead of waiting for the data channel to open, we wait for receipt of an entire data channel. Whenever we get it we stash it in the global variable dc. Once again, a wait-for-null-then-print should eventually print out a string literal. This is the "answer".

Back in Tab #1 we do:
answer = /* copy-and-paste string literal from Tab #2 */;
pc.setRemoteDescription(new RTCSessionDescription(JSON.parse(answer)));

and both tabs should get some messages saying they connected, and both tabs now currently have a global variable dc which is one end of a full-duplex serverless communication channel between the two tabs. We can do dc.onmessage = function(e) { console.log(e.data); } on one end, and dc.send("hello world") on the other, and the first should have "hello world appear".
Tags: javascript, webrtc

  • (no subject)

    Man I wanna be angry at 'em for pushing my bike-fixing back yet one more day, but now they are being extra-reasonable and saying that they'll comp…

  • (no subject)

    Ugggghhh come on Trophy Bikes. I was okay when you said that it would take 6 days to order the right fork to fix my bike. I was okay when you said,…

  • (no subject)

    I was supposed to get my bike back today, but the new fork they ordered only came late today, so they didn't get the repair work done yet. They say…

  • Post a new comment


    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 1 comment