I have the following callback for the onicecandidate event of RTCPeerConnection:
function iceCallback(event) {
if (event.candidate) {
var candidate = event.candidate;
socSend("candidate", candidate. event.target.id);
}
}
I am able to read the candidate from the event.candidate. But when I try to read the event.target.id, I get an exception, cannot read property target of undefined.
"id" is a property I previously created for the RTCPeerConnection. This is for a multiuser video chat.
I am trying to figure out which RTCPeerConnection fired the onicecandidate event so I know to which client I need to send the icecandidate. I am using the adapter.js library.
I assumed that some part of your code would be like below, I have just added a simple modification:
peerConnections ={};
function createNewConncection(id){
var pc = new RTCPeerConnection();
pc.onaddstream = ...
...
//pc.onicecandidate = iceCallback; // OLD CODE
pc.onicecandidate = iceCallback.bind({pc:pc, id:id}); // NEW CODE
peerConnections[id] = pc;
}
function iceCallback(event) {
if (event.candidate) {
var candidate = event.candidate;
//socSend("candidate", candidate. event.target.id); // OLD CODE
socSend("candidate", this.id); // NEW CODE
}
}
Related
I am trying to spoof ip address leaked from WebRTC, so I want to override 'onicecandidate' callback function but the code below does not work, I cannot figure out why.
Object.defineProperty(RTCPeerConnection.prototype, 'onicecandidate', {
set: function (eventHandler) {
console.log('hook set');
this._onicecandidateEventHandler = eventHandler;
this._onicecandidate = function (event) {
console.log('hook');
this._onicecandidateEventHandler.apply(this, arguments);
};
},
get: function () {
return this._onicecandidate;
}
})
The code above supposed to hook the receiver function assigned by the "fingerprinting script".
A example of fingerprinting script is like this :
function findIP() {
var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
var pc = new myPeerConnection({iceServers: [{urls: "stun:stun.l.google.com:19302"}]}),
noop = function() {},
localIPs = {},
ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,
key;
function ipIterate(ip) {
if (!localIPs[ip]) {console.log('got ip: ', ip);}
localIPs[ip] = true;
}
pc.createDataChannel("");
pc.createOffer(function(sdp) {
sdp.sdp.split('\n').forEach(function(line) {
if (line.indexOf('candidate') < 0) return;
line.match(ipRegex).forEach(ipIterate);
});
pc.setLocalDescription(sdp, noop, noop);
}, noop);
pc.onicecandidate = function(ice) {
if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
ice.candidate.candidate.match(ipRegex).forEach(ipIterate);
};
}
As you can see: the method to get your real ip from webRTC is trying to estisibale a connection then set a callback on 'onicecandidate' event, the event information contains the real Ip information.
What I'd like to do is to override 'set' function of 'onicecandidate' assignment so it will be replaced by my own hook function and after "alter" the ip address the hook will call the real receiver set by the fingerprint script.
In my tests : I can observed, after executed my code from console, the RTCPeerConnection.prototype has been override, if I assigned a function to RTCPeerConnection.onicecandidate , the console will print "hook set", so appeared that override is success, also if I called RTCPeerConnection.onicecandidate(xxx) mannullay, both my hook function and original function is executed, it works as expected . However this code is not working when I used in the real fingerprint script like I pasted the above. The onicecandidate event are never fired after the override applied.
I am a beginner for javascript, hope someone can explain my confusion .
Thank you in advance.
Without commenting on why this doesn't work, this alone won't help you against scripts that use addEventListener('icecandidate').
adapter.js contains a "wrapPeerConnectionEvent" helper function which handles both variants. With that helper it becomes quite a simple task:
wrapPeerConnectionEvent(window, 'icecandidate', (e) => {
if (e.candidate) {
const parts = e.candidate.candidate.split(' ');
parts[4] = '127.0.0.1'; // replace the real ip with 127.0.0.1
e.candidate.candidate = parts.join(' ');
}
return e;
});
See https://jsfiddle.net/krgz5qu1/ for a full example.
Note that you may need to take care of the ip in the relAddr field of server-reflexive and relay candidates as well.
function FriendlyChat() {
// statements
}
FriendlyChat.protoype.somemethod = function() {
// statements
};
FriendlyChat.protoype.somemethod2 = function() {
//statements
};
window.onload = function() {
window.friendlyChat = new FriendlyChat();
};
So i noticed the above structure for js while working on a google codelab.
And I have two ques.
in normal objects you have to call the function i.e Object.somemethod()
How does this structure call the methods assigned to it.
From my limited understanding, Firendlychat.protoype.the method treats the
function as an object and the methods are passed to the new object created on
window.onload.Via
inheritance, The object created i.e friendlychat has all these methods.
Yet none of the methods are called in any way. How does this work?
Is there any advantage to structuring your code in this way other than
readability
Note :
Main function
function FriendlyChat() {
this.checkSetup();
// Shortcuts to DOM Elements.
this.messageList = document.getElementById('messages');
this.messageForm = document.getElementById('message-form');
// Saves message on form submit.
this.messageForm.addEventListener('submit', this.saveMessage.bind(this));
this.signOutButton.addEventListener('click', this.signOut.bind(this));
this.signInButton.addEventListener('click', this.signIn.bind(this));
// Toggle for the button.
var buttonTogglingHandler = this.toggleButton.bind(this);
this.messageInput.addEventListener('keyup', buttonTogglingHandler);
this.messageInput.addEventListener('change', buttonTogglingHandler);
// Events for image upload.
this.submitImageButton.addEventListener('click', function(e) {
e.preventDefault();
this.mediaCapture.click();
}.bind(this));
this.mediaCapture.addEventListener('change',
this.saveImageMessage.bind(this));
this.initFirebase();
}
//the methods are setup here
// Sets up shortcuts to Firebase features and initiate firebase auth.
FriendlyChat.prototype.initFirebase = function() {
this.auth = firebase.auth();
this.database = firebase.database();
this.storage = firebase.storage();
// Initiates Firebase auth and listen to auth state changes.
this.auth.onAuthStateChanged(this.onAuthStateChanged.bind(this));
};
// Saves a new message on the Firebase DB.
FriendlyChat.prototype.saveMessage = function(e) {
e.preventDefault();
}
};
FriendlyChat.prototype.setImageUrl = function(imageUri, imgElement) {
imgElement.src = imageUri;
};
// Saves a new message containing an image URI in Firebase.
// This first saves the image in Firebase storage.
FriendlyChat.prototype.saveImageMessage = function(event) {
event.preventDefault();
var file = event.target.files[0];
// Clear the selection in the file picker input.
this.imageForm.reset();
// Check if the file is an image.
if (!file.type.match('image.*')) {
var data = {
message: 'You can only share images',
timeout: 2000
};
this.signInSnackbar.MaterialSnackbar.showSnackbar(data);
return;
}
// Check if the user is signed-in
if (this.checkSignedInWithMessage()) {
// TODO(DEVELOPER): Upload image to Firebase storage and add message.
}
};
// Signs-in Friendly Chat.
FriendlyChat.prototype.signIn = function() {
var provider = new firebase.auth.GoogleAuthProvider();
this.auth.signInWithRedirect(provider);
};
// Signs-out of Friendly Chat.
FriendlyChat.prototype.signOut = function() {
this.auth.signOut();
};
One of the advantages I've seen when using prototype inheritance was that you can control all instances of an object. For ex:
function FriendlyChat() {
this.chatIsActive = true;
}
FriendlyChat.prototype.deactivateChat = function(...rooms) {
for (chatRoom of rooms) {
chatRoom.chatIsActive = false;
}
};
var chat1 = new FriendlyChat();
var chat2 = new FriendlyChat();
var chatController = new FriendlyChat();
chatController.deactivateChat(chat1, chat2)
console.log(chat1.chatIsActive)
In ES6, however, you can do it:
class FriendlyChat {
constructor() {
this.chatIsActive = true;
}
static deactivateChat(...rooms) {
for (let chatRoom of rooms) {
chatRoom.chatIsActive = false;
}
}
}
var chat1 = new FriendlyChat();
var chat2 = new FriendlyChat();
FriendlyChat.deactivateChat(chat1, chat2)
console.log(chat1.chatIsActive)
And the another advantage of using prototype is that you can save memory spaces when you make an object from new keyword. For instance, the code in ES5 above, you can see chat1 and chat2 I've made by using new. Then chat1 and chat2 will be able to access deactivateChat() method which is in a sharing-space. It's because of the concept, called prototype-chaining.
And the next ES6 version is just a syntactic sugar - under the hood it does the same as ES5 version
I post this as a reference to others who have been faced with this dilemma.
First of all, ONe of the core issues for me was migrating from java, I seemed to be familiar territory but things work a bit different in js.I strongly recommend these links:
Objects in Detail
js Prototype
So the key to why this method works is due to the
window.friendlyapp =new friendlychat()
Now normally in most languages you have an object
obj() {
attr : value
method: function() {}
}
And then to use the method you do
var child = new obj();
child.method();
but in this method the var is made an instance of the window object and thats why none of the methods of the app need to be explicitly called.
I have been trying to get data chat working using webrtc. It was working previously in google chrome and suddenly stopped working, I have narrowed down the issue to 'ondatachannel' callback function not getting triggered. The exact same code works fine in Mozilla.
Here's the overall code:
app.pc_config =
{'iceServers': [
{'url': 'stun:stun.l.google.com:19302'}
]};
app.pc_constraints = {
'optional': [
/* {'DtlsSrtpKeyAgreement': true},*/
{'RtpDataChannels': true}
]};
var localConnection = null, remoteConnection = null;
try {
localConnection = new app.RTCPeerConnection(app.pc_config, app.pc_constraints);
localConnection.onicecandidate = app.setIceCandidate;
localConnection.onaddstream = app.handleRemoteStreamAdded;
localConnection.onremovestream = app.handleRemoteStreamRemoved;
}
catch (e) {
console.log('Failed to create PeerConnection, exception: ' + e.message);
return;
}
isStarted = true;
In Create Channel that follows this:
var localConnection = app.localConnection;
var sendChannel = null;
try {
sendChannel = localConnection.createDataChannel(app.currentchannel,
{reliable: false});
sendChannel.onopen = app.handleOpenState;
sendChannel.onclose = app.handleCloseState;
sendChannel.onerror = app.handleErrorState;
sendChannel.onmessage = app.handleMessage;
console.log('created send channel');
} catch (e) {
console.log('channel creation failed ' + e.message);
}
if (!app.isInitiator){
localConnection.ondatachannel = app.gotReceiveChannel;
}
app.sendChannel = sendChannel;
I create Offer:
app.localConnection.createOffer(app.gotLocalDescription, app.handleError);
and Answer:
app.localConnection.createAnswer(app.gotLocalDescription, app.handleError);
the offer and answer get created successfully, candidates are exchanged and onicecandidate event is triggered at both ends! Local Description and RemoteDescription are set on both respective ends.
I have a pusher server for signalling, I am able to send and receive messages through the pusher server successfully.
The same webrtc code works for audio/video = true, the only issue is when I try to create datachannel. The only step that does not get executed is the callback function not getting executed i.e "gotReceiveChannel"
I'm starting to think it's the version of chrome.. I am not able to get the GitHub example working in chrome either: (Step4 for data chat)
https://bitbucket.org/webrtc/codelab
While the same code works in Mozilla.
The sendChannel from the offerer has a "readyState" of "connecting"
Any help much appreciated.
I am trying to get the hang of using indexedDB to store data client side.
consider the following code:
function queryURL(message, sender)
{
chrome.contextMenus.removeAll();
var openRequest = indexedDB.open("Tags",1);
openRequest.onsuccess = function(event){
var queryURL = message['host'];
var db = event.target.result;
var objectStore = db.transaction("domains").objectStore("domains");
var query = objectStore.get(queryURL);
query.onsuccess = function(event){
alert(query.result);
delete query.result["domain"];
createMenuItems(query.result);
available_commands=request.result;
};
db.onerror = function(event){
console.log("an error bubbled up during a transaction.");
};
};
openRequest.onerror = function(event){
console.log("error opening DB");
};
}
I do not fully understand what should be happening in the query.
The result is the same whether or not the key that is queried for is in the database:
query.onsuccess() runs and query.result is undefined so the
code errors and exits as soon as I try to delete a key from
query.result.
If the key is not found, query.onsuccess() should not be
running, correct?
If the key is found, query.result should hold the object that
corresponds to that key, correct?
In case it helps, here is the code that I used to initialize the database:
const db_name="Tags";
var request = window.indexedDB.open(db_name, 1);
var tags = [
//codes: 0 - markdown wrap tag
// 1 - HTML wrap tag
// 2 - single tag
{ domain: "www.youtube.com",
bold:["*",0],
strikethrough:["-",0],
italic:["_",0]
},
{ domain: "www.stackoverflow.com",
bold:["<strong>",1],
italic:["<em>",1],
strikethrough:["<del>",1],
superscript:["<sup>",1],
subscript:["<sub>",1],
heading1:["<h1>",1],
heading2:["<h2>",1],
heading3:["<h3>",1],
blockquote:["<blockquote>",1],
code:["<code>",1],
newline:["<br>",2],
horizontal:["<hr>",2]
}
];
request.onerror = function(event) {
alert("Error opening the database");
};
request.onupgradeneeded = function(event) {
var db = event.target.result;
alert("I'm doing stuff!");
var objectStore = db.createObjectStore("domains", {keyPath: "domain" });
objectStore.createIndex("domain", "domain", { unique: true });
objectStore.transaction.onComplete = function(event) {
var domanStore=db.transaction("domains","readwrite").objectStore("domains");
for(var i in tags)
{
domainStore.add(tags[i]);
}
}
};
Here are some links to the resources I am using:
Using IndexedDB
IDBObjectStore
IDBRequest
Finding out that the result is empty or undefined is a successful query. So yes, you get onsuccess call with result === undefined.
onerror is only reserved for when something breaks, e.g. you supplied an invalid key.
From IDBObjectStore.get docs:
Note: This method produces the same result for: a) a record that doesn't exist in the database and b) a record that has an undefined value. To tell these situations apart, call the openCursor() method with the same key. That method provides a cursor if the record exists, and no cursor if it does not.
Yes. It is even more confusing when delete method return success, even if no record is deleted.
Since request error event is cancellable bubbling event, it is not feasible to invoke to error callback even if no record is found. If request is on error and error is not prevented, its transaction will be aborted and indexedDB.onerror will be called as well. So invoking success with undefined result is still better than invoking error.
In Firefox 17.0.1 when I try to open the IndexedDB database, Firebug console shows me an InvalidStateError exception. Also request.onerror event is raised, but event.target.errorCode is undefined.
if (window.indexedDB) {
var request = window.indexedDB.open('demo', 1);
request.onsuccess = function(event) {
// not raised
};
request.onupgradeneeded = function(event) {
// not raised
};
request.onerror = function(event) {
// raised with InvalidStateError
};
}
Does anyone have experience with IndexedDB in Firefox?
Update
Firefox 18.0.1 has the same behavior. Comlete source.
I answer because the problem still exists (in Firefox 54). This happens if you:
use Firefox in private mode
or switch between different Firefox versions (https://bugzilla.mozilla.org/show_bug.cgi?id=1236557, https://bugzilla.mozilla.org/show_bug.cgi?id=1331103)
To prevent the InvalidStateError a try catch isn't working (but useful for other errors, e.g. disabled cookies), instead you need event.preventDefault(). Yes I know, too easy to be true. :)
if (window.indexedDB) {
var request = window.indexedDB.open('demo', 1);
request.onsuccess = function(event) {
// not raised
};
request.onupgradeneeded = function(event) {
// not raised
};
request.onerror = function(event) {
// raised with no InvalidStateError
if (request.error && request.error.name === 'InvalidStateError') {
event.preventDefault();
}
};
}
Kudos go to https://bugzilla.mozilla.org/show_bug.cgi?id=1331103#c3.
I am pretty sure the error you get is a version error, meaning the current version of the database is higher then the version you are opening the database with. If you take a look in event.target.error you will see that the name will contain "VersionError".
An other possibility is that you will see "AbortError", that would mean that the VERSION_CHANGE transaction was aborted. Meaning there was an error in the onupgradeneeded event that caused an abort. You could get this if you are creating an object store that already exists.
I see no other possibilities than these too, if not provide some more info about the error you get.
You need to create the object store in a separate transaction, you're lumping both the open database and create object store transaction into the same event.
Also you can't have both autoincrement and a path as options to your object store. You have to pick one or the other.
Here's the code that will get your example going:
function initDB() {
if (window.indexedDB) {
var request = window.indexedDB.open('demo', 1);
request.onsuccess = function(event) {
db = event.target.result;
createObjectStore();
};
request.onupgradeneeded = function(event) {
db = event.target.result;
$('#messages').prepend('blah blah<br/>');
};
request.onerror = function(event) {
$('#messages').prepend('Chyba databáze #' + event.target.errorCode + '<br/>');
};
}
}
function createObjectStore() {
db.close();
var request = window.indexedDB.open('demo', 2);
request.onsuccess = function(event) {
db = event.target.result;
showDB();
};
request.onupgradeneeded = function(event) {
db = event.target.result;
$('#messages').prepend('yeah yeah yeah<br/>');
var store = db.createObjectStore('StoreName', { keyPath: 'id' });
store.createIndex('IndexName', 'id', { unique: true });
};
request.onerror = function(event) {
$('#messages').prepend('Chyba databáze #' + event.target.errorCode + '<br/>');
};
}
If you start getting stuck you can take a look at some indexeddb code I wrote for the Firefox addon-sdk. The code is more complicated than what you need but you'll be able to see all the events, errors, and order of transactions that need to happen. https://github.com/clarkbw/indexed-db-storage
Good luck!
FireFox will also throw an "InvalidStateError" when using IndexedDB, if the browser is set to "Do not store history" in the privacy tab of the FireFox settings.
I believe FireFox basically runs in incognito mode when that setting is set.
IndexedDB is not available when running FireFox in private mode.