javascript - WebRTC Between two pages in the same machine -
i'm trying implement mechanism send textual data (json instance) in page page, using javascript @ same machine.
found code , wrapped works @ same page.
@ moment don't want use wwebrtc framework, adapter.js.
//must include adapter.js before var webrtcmanager = (function () { 'use strict'; //ctor function webrtcmanagerfn() { console.log('webrtcmanagerfn ctor reached'); this._events = {}; this._localconnection = null this._remoteconnection = null; this._sendchannel = null; this._receivechannel = null; } webrtcmanagerfn.prototype.addeventlistener = function (name, handler) { if (this._events.hasownproperty(name)) this._events[name].push(handler); else this._events[name] = [handler]; }; webrtcmanagerfn.prototype._fireevent = function (name, event) { if (!this._events.hasownproperty(name)) return; if (!event) event = {}; var listeners = this._events[name], l = listeners.length; (var = 0; < l; i++) { listeners[i].call(null, event); } }; webrtcmanagerfn.prototype.createconnection = function () { var servers = null; var pcconstraint = null; var dataconstraint = null; console.log('using sctp based data channels'); // sctp supported chrome 31 , supported in ff. // no need pass dtls constraint on default in chrome 31. // sctp, reliable , ordered true default. // add localconnection global scope make visible // browser console. window.localconnection = this._localconnection = new rtcpeerconnection(servers, pcconstraint); console.log('created local peer connection object localconnection'); this._sendchannel = this._localconnection.createdatachannel('senddatachannel', dataconstraint); console.log('created send data channel'); this._localconnection.onicecandidate = this._localicecallback.bind(this); this._sendchannel.onopen = this._onsendchannelstatechange.bind(this); this._sendchannel.onclose = this._onsendchannelstatechange.bind(this); // add remoteconnection global scope make visible // browser console. window.remoteconnection = this._remoteconnection = new rtcpeerconnection(servers, pcconstraint); console.log('created remote peer connection object remoteconnection'); this._remoteconnection.onicecandidate = this._remoteicecallback.bind(this); this._remoteconnection.ondatachannel = this._receivechannelcallback.bind(this); this._localconnection.createoffer(this._gotofferfromlocalconnection.bind(this), this._oncreatesessiondescriptionerror.bind(this)); } webrtcmanagerfn.prototype._oncreatesessiondescriptionerror = function (error) { console.log('failed create session description: ' + error.tostring()); } webrtcmanagerfn.prototype.sendmessage = function (msgtext) { var msg = new message(msgtext); // send msg object json-formatted string. var data = json.stringify(msg); this._sendchannel.send(data); console.log('sent data: ' + data); } webrtcmanagerfn.prototype.closedatachannels = function () { console.log('closing data channels'); this._sendchannel.close(); console.log('closed data channel label: ' + this._sendchannel.label); this._receivechannel.close(); console.log('closed data channel label: ' + this._receivechannel.label); this._localconnection.close(); this._remoteconnection.close(); this._localconnection = null; this._remoteconnection = null; console.log('closed peer connections'); } webrtcmanagerfn.prototype._gotofferfromlocalconnection = function (desc) { console.log('reached _gotofferfromlocalconnection'); if (this && this._localconnection != 'undefined' && this._remoteconnection != 'undefined') { this._localconnection.setlocaldescription(desc); console.log('offer localconnection \n' + desc.sdp); this._remoteconnection.setremotedescription(desc); this._remoteconnection.createanswer(this._gotanswerfromremoteconnection.bind(this), this._oncreatesessiondescriptionerror.bind(this)); } } webrtcmanagerfn.prototype._gotanswerfromremoteconnection = function (desc) { console.log('reached _gotanswerfromremoteconnection'); if (this && this._localconnection != 'undefined' && this._remoteconnection != 'undefined') { this._remoteconnection.setlocaldescription(desc); console.log('answer remoteconnection \n' + desc.sdp); this._localconnection.setremotedescription(desc); } } webrtcmanagerfn.prototype._localicecallback = function (event) { console.log('local ice callback'); if (event.candidate) { this._remoteconnection.addicecandidate(event.candidate, this._onaddicecandidatesuccess.bind(this), this._onaddicecandidateerror.bind(this)); console.log('local ice candidate: \n' + event.candidate.candidate); } } webrtcmanagerfn.prototype._remoteicecallback = function (event) { console.log('remote ice callback'); if (event.candidate) { this._localconnection.addicecandidate(event.candidate, this._onaddicecandidatesuccess.bind(this), this._onaddicecandidateerror.bind(this)); console.log('remote ice candidate: \n ' + event.candidate.candidate); } } webrtcmanagerfn.prototype._onaddicecandidatesuccess = function (evt) { debugger; console.log('addicecandidate success. evt: '+ evt); } webrtcmanagerfn.prototype._onaddicecandidateerror = function (error) { console.log('failed add ice candidate: ' + error.tostring()); } webrtcmanagerfn.prototype._receivechannelcallback = function (event) { console.log('receive channel callback'); this._receivechannel = event.channel; this._receivechannel.onmessage = this._onreceivemessagecallback.bind(this); this._receivechannel.onopen = this._onreceivechannelstatechange.bind(this); this._receivechannel.onclose = this._onreceivechannelstatechange.bind(this); } webrtcmanagerfn.prototype._onreceivemessagecallback = function (event) { console.log('received message: ' + event.data); console.log('received message is: ' + this); var msgobj = json.parse(event.data); this._fireevent("messagerecieved", { details: { msg: msgobj } }); } webrtcmanagerfn.prototype._onsendchannelstatechange = function () { console.log('_onsendchannelstatechange'); var readystate = this._sendchannel.readystate; console.log('send channel state is: ' + readystate); } webrtcmanagerfn.prototype._onreceivechannelstatechange = function () { var readystate = this._receivechannel.readystate; console.log('receive channel state is: ' + readystate); } return webrtcmanagerfn; })();
my question how pass data between 2 pages on same machine using webrtc?
this webrtc tab chat demo works across tabs or windows in same browser without server: https://jsfiddle.net/f5y48hcd/ (i gave making work in code snippet due securityerror.)
open fiddle in 2 windows , try out. reference, here's webrtc code:
var pc = new rtcpeerconnection(), dc, enterpressed = e => e.keycode == 13; var connect = () => init(dc = pc.createdatachannel("chat")); pc.ondatachannel = e => init(dc = e.channel); var init = dc => { dc.onopen = e => (dc.send("hi!"), chat.select()); dc.onclose = e => log("bye!"); dc.onmessage = e => log(e.data); }; chat.onkeypress = e => { if (!enterpressed(e)) return; dc.send(chat.value); log("> " + chat.value); chat.value = ""; }; var sc = new localsocket(), send = obj => sc.send(json.stringify(obj)); var incoming = msg => msg.sdp && pc.setremotedescription(new rtcsessiondescription(msg.sdp)) .then(() => pc.signalingstate == "stable" || pc.createanswer() .then(answer => pc.setlocaldescription(answer)) .then(() => send({ sdp: pc.localdescription }))) .catch(log) || msg.candidate && pc.addicecandidate(new rtcicecandidate(msg.candidate)).catch(log); sc.onmessage = e => incoming(json.parse(e.data)); pc.oniceconnectionstatechange = e => log(pc.iceconnectionstate); pc.onicecandidate = e => send({ candidate: e.candidate }); pc.onnegotiationneeded = e => pc.createoffer() .then(offer => pc.setlocaldescription(offer)) .then(() => send({ sdp: pc.localdescription })) .catch(log); var log = msg => div.innerhtml += "<br>" + msg;
i use demoing webrtc data channels. note secret sauce localsocket.js wrote this, looks this:
function localsocket() { localstorage.a = localstorage.b = json.stringify([]); this.index = 0; this.interval = setinterval(() => { if (!this.in) { if (!json.parse(localstorage.a).length) return; this.in = "a"; this.out = "b"; } var arr = json.parse(localstorage[this.in]); if (arr.length <= this.index) return; if (this.onmessage) this.onmessage({ data: arr[this.index] }); this.index++; }, 200); settimeout(() => this.onopen && this.onopen({})); } localsocket.prototype = { send: function(msg) { if (!this.out) { this.out = "a"; this.in = "b"; } var arr = json.parse(localstorage[this.out]); arr.push(msg); localstorage[this.out] = json.stringify(arr); }, close: function() { clearinterval(this.interval); } };
it uses localstorage simulate web sockets locally between 2 tabs. if want do, don't need webrtc data channels.
disclaimer: it's not robust, , relies on 2 pages being ready communicate, not production-ready means.
Comments
Post a Comment