I am just confused Like how this window.addEventListener('online') or window.addEventListener('offline') works.
I have created An LGTV WebOS application where I have added that if any video is playing and on during play the video if internet connection is lost it should show an alert message.
So I used these window events but they only work when my wifi or network is disconnected not when I have connected to wifi but there is no internet on that.
So what I want is alert should be displayed when I have connected to wifi but there is no internet available on wifi is there any way to do this?
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
function updateOnlineStatus(event) {
console.log("-----------------Control comes into updateOnlineStatus --------------");
console.log("event",event);
var errorModal = document.getElementById("errorModal");
var condition = navigator.onLine ? "online" : "offline";
if(condition == "online"){
console.log("-----------INternet Is conected ----------------");
errorModal.style.display="none";
video.play();
}else{
console.log("-----------INternet Is NOOOOOOTT conected ----------------");
video.pause();
errorModal.style.display="block";
SpatialNavigation.makeFocusable();
SpatialNavigation.focus("#ok_btn");
}
}
If you are developing a WebOS TV application, you should check first the native APIs of that platform...
Connection Manager
Event handler
WebOS services
You can get a connection status by using the webOsDev.js library of WebOS.
webOSDev.connection.getStatus({
onSuccess: function (res) {
if (res.isInternetConnectionAvailable === false) {
//when the internet connection is not available
} else {
//when internet is available
}
},
onFailure: function (res) {
//on failure to request the API
},
subscribe: true
});
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!
Iam making a web app using webrtc that allows two users to communicate with each other using both video and audio. The app uses node.js as signaling server. The app works fine when communicating between two desktops but when I try a desktop to mobile communication, if the user initiating the offer is the one in the desktop, the one on mobile can't hear any sound. If it happens the other way around, both have audio. When I check the devtools the audio stream is sent from the desktop and is received by the mobile (it is active and not muted) but there is no sound. I use the audio element to play the audio stream and the video element to play the video stream. I have tested this on both chrome and mozilla and i encounter the same problem.
If anyone can help it would be greatly appreciated.
Bellow are code samples of the ontrack event
rtcConnection.ontrack = function(event) {
console.log('Remote stream received.');
if(event.streams[0].getAudioTracks().length > 0) {
event.streams[0].getAudioTracks().forEach((track) => {
remoteAudioStream .addTrack(track);
});
audioPlayer.srcObject = remoteAudioStream;
}
if (event.streams[0].getVideoTracks().length > 0){
event.streams[0].getVideoTracks().forEach((track) => {
remoteVideoStream .addTrack(track);
});
localVideo.srcObject = remoteVideoStream;
}
};
and the capture media stream:
function getUserMedia() {
let getAudio = true;
let getVideo = true;
let constraints = { audio: getAudio, video: getVideo };
navigator.mediaDevices.getUserMedia(constraints) // Ask user to allow access to his media devices
.then(
function(data) { //if yes, get stream config data and join room
localStream = data;
console.log('Getting user media succeeded.');
console.log('RTC Connection created. Getting user media. Adding stream tracks to RTC connection');
sendMessage({ type: 'peermessage', messagetype:'info', messagetext: 'Peer started video streaming.'});
//stream to be sent to the other user
localStream.getTracks().forEach(track => rtcConnection.addTrack(track, localStream));
console.log('Creating offer');
rtcConnection.createOffer()
.then(function(offer) { // createOffer success
console.log('Offer created. Setting it as local description');
return rtcConnection.setLocalDescription(offer);
}, logError) // createOffer error
.then(function() { // setLocalDescription success
console.log('Offer set as local description. Sending it to agent');
sendMessage(rtcConnection.localDescription)
}, logError); // setLocalDescription error
}
);
}
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");
}
}
Hi, I created app in which i get data from some server i want to that if internet is not connected then user will not able to use app. I put
document.addEventListener("deviceready", function(){ onDeviseReady(); }, false);
function onDeviseReady()
{
document.addEventListener("offline", offLine, false);
}
function offLine()
{
navigator.notification.alert(
'No Internet Connected',message,'Message','Done');
}
Now what i should do in function message(){} so that the user not be able to move here until user connected to the internet
i put in alert box in message function but this is not i want
PREFACE
Your app needs Internet Connection to run, so you should check either the device is connected to the internet or not. For that you can create a utility function (say hasConnection) which returns boolean true on internet connection or boolean false on no internet connection.
The hasConnection Function
function hasConnection() {
var networkState = navigator.network.connection.type;
if(networkState === Connection.NONE) {
return false;
}
return true;
}
And depending on the hasConnction return value you can take the right decision.
SAMPLE EXAMPLE
document.addEventListener('deviceready',onDeviceReady, false);
function onDeviceReady(){
if(!hasConnection()){ //there is no internet connection
navigator.notification.alert(
'No Internet Connection!', // message
function(){
/*
If you are using jQuery mobile for UI you can create a seperate page #no-connection-page and display that page :
$.mobile.changePage('#no-connection-page',{'chageHash':false});
*/
}, // callback
'Connection Required', // title
'OK' // buttonName
);
return false;
} else {
//There is internet Connection, get the data from server and display it to the end user
//Again, If you are using jQuery mobile, display the page that should be displayed only when Internet Connection is available
//$.mobile.changePage('#has-connection-page');
}
/*
If the device is connected to the internet while your app is running,
you can add a listener for 'online' event and take some action. For example :
*/
document.addEventListener('online', function(){
//Now the device has internet connection
//You can display the '#has-connection-page' :
//$.mobile.changePage('#has-connection-page');
});
//You can use the listener for 'offline' event to track the app if the connection has gone while the app is running.
}
ONE NOTE
Make sure that you have :
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
in android Manifest.
AT LAST
I am also creating android app using Phonepage / Cordova and jQuery-mobile that needs internet connection and using this approach, working fine for me. I hope it helps you.
I'm experimenting with WebRTC between two browsers using RTCPeerConnection and my own long-polling implementation. I've created demo application, which successfully works with Mozilla Nightly (22), however in Chrome (25), I can't get no remote video and only "empty black video" appears. Is there something wrong in my JS code?
Function sendMessage(message) sends message to server via long-polling and on the other side, it is accepted using onMessage()
var peerConnection;
var peerConnection_config = {"iceServers": [{"url": "stun:23.21.150.121"}]};
// when message from server is received
function onMessage(evt) {
if (!peerConnection)
call(false);
var signal = JSON.parse(evt);
if (signal.sdp) {
peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp));
} else {
peerConnection.addIceCandidate(new RTCIceCandidate(signal.candidate));
}
}
function call(isCaller) {
peerConnection = new RTCPeerConnection(peerConnection_config);
// send any ice candidates to the other peer
peerConnection.onicecandidate = function(evt) {
sendMessage(JSON.stringify({"candidate": evt.candidate}));
};
// once remote stream arrives, show it in the remote video element
peerConnection.onaddstream = function(evt) {
// attach media stream to local video - WebRTC Wrapper
attachMediaStream($("#remote-video").get("0"), evt.stream);
};
// get the local stream, show it in the local video element and send it
getUserMedia({"audio": true, "video": true}, function(stream) {
// attach media stream to local video - WebRTC Wrapper
attachMediaStream($("#local-video").get("0"), stream);
$("#local-video").get(0).muted = true;
peerConnection.addStream(stream);
if (isCaller)
peerConnection.createOffer(gotDescription);
else {
peerConnection.createAnswer(gotDescription);
}
function gotDescription(desc) {
sendMessage(JSON.stringify({"sdp": desc}));
peerConnection.setLocalDescription(desc);
}
}, function() {
});
}
My best guess is that there is a problem with your STUN server configuration. To determine if this is the issue, try using google's public stun server stun:stun.l.google.com:19302 (which won't work in Firefox, but should definitely work in Chrome) or test on a local network with no STUN server configured.
Also, verify that your ice candidates are being delivered properly. Firefox doesn't actually generate 'icecandidate' events (it includes the candidates in the offer/answer), so an issue with delivering candidate messages could also explain the discrepancy.
Make sure your video tag attribute autoplay is set to 'autoplay'.