Jason (jcreed) wrote,
Jason
jcreed

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:23.21.150.121"}]});
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:23.21.150.121"}]});
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
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 1 comment