I have a working WebRTC connection in Chrome. It uses 1 data channel as part of a chat application.
I want to also support Firefox thus I need to change some not supported events:
For the RTCPeerConnection as well as for the DataChannel.
The changes to the data channel worked as expected:
//chrome implenetation
dc.onopen = this.conncectionStats.bind(this);
dc.onmessage = onMessage;
// chrome and firefox
dc.addEventListener('open', (event) => {
this.conncectionStats.bind(this)
});
dc.addEventListener('message', (event) => {
onMessage(event)
});
However, the problem arises when changing the PeerConnection:
// chrome implenetation
pc.onconnectionstatechange = this.onConnectionStateChange.bind(this);
// chrome and firefox
pc.addEventListener('onconnectionstatechange', (event) => {
console.log("onconnectionstatechange fired")
this.onConnectionStateChange.bind(this);
})
The event is never occuring. Any ideas why this is the case?
The event should be correct, but on the other hand, the documentation is missing on MDN Web Docs.
You should use WebRTC adapter so that unsupported events will be shimmed for you:
https://github.com/webrtc/adapter
I am using it on my webpages, and onconnectionstatechange fires fine in Firefox:
...
pc.onconnectionstatechange = onConnStateChange;
...
function onConnStateChange(event) {
if (pc.connectionState === "failed") {
Terminate();
alert("Connection failed; playback stopped");
}
}
Related
i am currently implementing speech input on a website and using the web speech API for it.
voice recognition works as expected in Chrome on desktop and android. Firefox does not have support for the API so it is not being used there.
the problem is with chrome on iOS where the service throws a "service-not-allowed" error.
this error seems to be distinctly different from the "not-allowed" error that is being thrown when the browser does not have permission to use the microphone.
in my case chrome has all permissions it would need (microphone permission, pop-ups are not blocked).
at first i thought the problem was, that for some reason chrome on iOS does not show me the permission pop-up, specifically for microphone usage, directly on the web page, but now i am not so sure anymore.
does anyone have experience with this problem or have a solution for this?
here is the working code for android/desktop, the function gets triggered by a button click:
function startDictation() {
try {
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var recognition = new SpeechRecognition();
} catch (e) {
console.log(e);
}
if (recognition) {
recognition.continuous = false;
recognition.interimResults = true;
recognition.lang = $('html').attr('lang');
recognition.start();
recognition.onresult = function(e) {
$('#searchInput').val(e.results[0][0].transcript);
console.log(e.results[0][0].transcript);
};
recognition.onerror = (e) => {
console.error('Speech recognition error detected: ' + e.error);
recognition.stop();
};
recognition.onend = () => {
console.log('Speech recognition service disconnected');
}
}
}
a few helpful links
web speech api error values
web speech api demo from google, that also doesn't work on iOS for me
i have tried various end devices at this point, two different iPads and an iPhone and the same error gets thrown everywhere.
any help is appreciated, thanks!
I have built a simple streaming service using WebRTC. I'm currently still running everything through localhost. Everything currently works when using the Chrome browser, but I can not connect when I utilize Firefox. I am using the WebRTC-Adapter shim.
The problem seems to stem from peerConnection.localDescription always being equal to null, and being unable to send my localDescription to the peer, or set the remoteDescription correctly.
Here is a snippet of my code. This only covers the recipient of the stream, who is initiating the p2p connection. The streamer already has a local stream set up, and sets their own local and remote description, and the localDescription is then sent to the recipient. sendRecipientDescription() just handles sending the sdp to the streamer via sockets. PC_Config just includes a STUN server:
setUpRecipient = () => {
this.createPeerConnection();
this.pc
.createOffer({ offerToReceiveVideo: true })
.then(offer => {
this.pc.setLocalDescription(offer);
})
.then(() => {
this.sendRecipientDescription();
console.log('recipient local description ', this.pc.localDescription);
})
.catch(e => {
console.log('error recipient set up ', e);
});
};
createPeerConnection = () => {
try {
this.pc = new RTCPeerConnection(PC_CONFIG);
this.pc.onicecandidate = this.handleIceCandidate;
this.pc.ontrack = this.handleRemoteStreamAdded;
this.pc.onremovetrack = this.handleRemoteStreamRemoved;
this.pc.oniceconnectionstatechange = this.handleIceStateChange;
console.log('Created RTCPeerConnection', this.pc.localDescription);
} catch (e) {
console.log('Failed to create PeerConnection, exception: ', e.message);
}
};
When using the Chrome browser, this.pc.localDescription returns as would be expected. When using the Firefox browser, this.pc.localDescription is always null, there is no RTCSessionDescription at all. When I console.log(this.pc) after setLocalDescription, it appears as though localDescription is indeed null: RTCPeerConnection un-expanded
However, when I expand the RTCPeerConnection object, you see that localDescription appears to be set up correctly: RTCPeerConnection expanded. But, when I try to send this.pc.localDescription, it only sends null.
I found an answer to my own question. Apparently I needed to return this.pc.setLocalDescription();
I don't know why this is necessary. As far as I know, pc.setLocalDescription does not return anything, and only has the side effect of setting pc.localDescription. It worked perfectly fine in Chrome, but not in Firefox.
Firebase Cloud Messaging
I have everything setup, the Push messages are received fine and when I click on it, it opens new window... but only in Chrome, in Firefox it is not opened.
I have specifically allowed popups, but didn't make any difference.
I was just debugging for 1 hour
self.addEventListener('notificationclick', function(e) {
console.log("This is printed to console fine");
clients.openWindow('https://example.com'); // this makes no error, nothing
});
Any ideas?
Works in Firefox 47.0
Doesn't work in Firefox Quantum 60
Subscribed a bug.
I also struggled with this for a while...
To anyone else having the problem, I wanted to add something:
You can still use firebase.messaging() but you have to make sure you put it AFTER the event listener.
To make this clear:
This does NOT work (clients.openWindow does nothing):
const messaging = firebase.messaging();
// Add an event listener to handle notification clicks
self.addEventListener('notificationclick', function (event) {
if (event.action === 'close') {
event.notification.close();
} else if (event.notification.data.target_url && '' !== event.notification.data.target_url.trim()) {
clients.openWindow(event.notification.data.target_url);
}
});
messaging.setBackgroundMessageHandler(function (payload) {
// ... add custom notification handling ...
});
This does work (clients.openWindow opens link as expected):
// Add an event listener to handle notification clicks
self.addEventListener('notificationclick', function (event) {
if (event.action === 'close') {
event.notification.close();
} else if (event.notification.data.target_url && '' !== event.notification.data.target_url.trim()) {
clients.openWindow(event.notification.data.target_url);
}
});
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function (payload) {
// ... add custom notification handling ...
});
Still not sure of the underlying reason. I also suspect that the messaging() messes up the click event and makes Firefox refuse to open a window because it considers that the user took no direct action at the notification.
But at least I have a workaround and can keep going.
Hope that helps.
I removed from the service worker:
const messaging = firebase.messaging();
And it is now working.
This is just nuts.
Found out the reason of this.
The Firebase.messaging was the culprit ONLY if you send the messaging payload (from server) as such:
{
"notification": {
//...
}
}
The existence of notification property will prevent the notificationclick from propagating due to some reason in the firebase sdk.
You can send the following instead
{
"data": {
//...
}
}
I'm programming a very simple WebRTC application to stream real-time video from a RaspberryPi Zero camera. I'm using Linux Project's UV4L driver to setup the server and JavaScript to connect and play the video stream. My JavaScript code is based on UV4L's demo, which essentially uses RTC web socket methods to perform negotiation.
Their code works beautifully in Chrome, but doesn't seem to work under Firefox or Safari.
RTCPeerConnection = window.webkitRTCPeerConnection;
RTCSessionDescription = window.RTCSessionDescription;
RTCIceCandidate = window.RTCIceCandidate;
var ws;
function signal(url, onStream, onError, onClose, onMessage) {
if("WebSocket" in window) {
var pc;
ws = new WebSocket(url);
ws.onopen = function () {
var config = {"iceServers": [{"urls": ["stun:stun.l.google.com:19302"]}]};
pc = new RTCPeerConnection(config); // <---- ERROR here.
pc.onicecandidate = function (event) {
// ... ICE negotiation.
};
if('ontrack' in pc) {
pc.ontrack = function(event) {
// ... set stream object and play
};
} else { // onaddstream() is deprecated
pc.onaddstream = function (event) {
// ... set stream object and play
};
}
// ... other event listeners.
ws.send(...); // Signals the remote peer to initiate a call
};
}
}
In particular, I get an error When I try to connect, the following error is thrown in Firefox v60.0.1 (and a very similar in Safari):
TypeError: RTCPeerConnection is not a constructor
According to MDN docs, Firefox has support for this constructor since v22. What could be the issue?
My error turned out to be a silly typo. The declaration of RTCPeerConnection at the beginning of the code, was wrong. It should be:
RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection;
I wrote a little Chat using SSE for loading new messages.
It is working fine with Chrome, Safari and Opera while Firefox closes the connection after a few retries.
I'am using retry: 2000 (2s). Sometimes firefox is doing up to 10 events, sometimes only 1 or 2. I know from my serverstats, that more then 80% of my users are using firefox, so I need this working on firefox.
I'm using the latest version of firefox and I added a console.log() after every EventListener I'm using ('message', 'open', 'close').
Does anyone have an idea what to do?
Thanks a lot
think I solved the problem:
First I opend the EventSource in a function :
function chat_read() {
if(typeof(EventSource) !== "undefined") {
var source;
source = new EventSource('?link=chat_stream');
}
Now I tried to initialize the variable 'source' global (outside the function) and it is working now.
var source;
function chat_read() {
if(typeof(EventSource) !== "undefined") {
source = new EventSource('?link=chat_stream');
}
Beside this I wrote a function which is looking for the SSE 'open' event still firering and if it is not, it will restart the SSE.