I'm using the following code in an application in order to retrieve the users location.
function getGeoCoords() {
var deferred = $.Deferred();
navigator.geolocation.getCurrentPosition(deferred.resolve, deferred.reject);
return deferred.promise();
}
This is used by the following:
return deferred.pipe(function() {
console.log('Getting user location. . .');
return getGeoCoords();
}).pipe(function (position)) {
. . .
This code has been tested and works well in all browsers, except Chrome.
It seems that it is also constrained to China. Other browsers tested there (even IE) worked without a hitch. But for some reason, I am unable to use the Geolocation API to retrieve the location of a user in China on Chrome.
Any thoughts?
take a look https://www.zhihu.com/question/20473051
in short, the reason is that the chrome needs to send the location infomation to a google server, but the server may be blocked in china
Six years later I still can't make this work in Chrome.
But there are working examples, so how do they do that?
Here's what my problem is in particular:
I'm in China and I need to make a website that displays a map with a "Get my location" button. To simplify, if I run the following code in debugger, in some environments it will not get my location. Can anyone tell me why?
navigator.geolocation.getCurrentPosition(success => console.log(success), err => console.error(err))
I can get the location in these environments:
My Macbook uses 4G from my phone (hotspot), Safari browser.
PC uses internet from LAN, Edge browser.
I CANNOT get the location in these environments:
My Macbook uses internet from LAN, Safari browser.
PC uses internet from LAN, Chrome version 68 as well as the Chinese QQ browser:
Error: {
code:2,
message:"Network location provider at 'https://www.googleapis.com/' : No response received."
}
PC uses internet from LAN, Chome 103 or Firefox: No success and no error received.
In all cases, location services are enabled and VPN is not used.
I know, googleapis.com is not available in China. But Baidu, Gaode Amap, or QQ Map should work on Chrome and they don't.
Related
I am pretty new to Javascript/html5. I am basically working off code provided in Rbon Nixon's book (4th Edition, Learning PHP, MySQL and Javascript...). Example 22-2 of which is about "displaying the map at a user's location".
I am getting caught in the if part of the following code snippet:
<script>
if (typeof navigator.Geolocation=='undefined')
alert("Geolocation not supported.")
</script>
Superficially, it seems quite obvious that I should enable geolocation int eh browser for localhost. I am using chrome (Version 60.0.3112.113). But when I go to Settings >> Advanced >> Content Settings >> Location
the ask before accessing option is enabled. and then there are the Block and Allow sections. But it does not give me an option to add localhost. How do I enable it so that I can use geolocation in my code and test it on my machine?
Running Chrome 56.0.2924.76 (64-bit) on Windows 10 PRO Version 1511 (OS Build 10586.753). Have enabled experimental-web-platform-features on chrome, running it with flag --disable-webusb-security and as administrator. I try to get USB device list on localhost (using https) with getDevices but I get empty list, although chrome://device-log is showing me plenty of devices. What could be the issue?
navigator.usb.getDevices().then(function(devices){
console.log(devices);
});
// console outputs []
You should use requestDevice() before in order to get access permissions on selected devices.
navigator.usb.requestDevice({filters:[]}).then(function(device){
console.log(device);
});
After that you'll be able to call getDevices().
I am working on a site that uses HTML5 Geolocation.
Here is code I am using:
html:
<button onclick="getLocation()">Try It</button>
js
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
console.log('Geolocation is not supported by this browser.');
}
}
function showPosition(position) {
console.log(position.coords);
alert(position.coords.latitude);
alert(position.coords.longitude);
}
Everything seem to works well, but some users are getting KCLError Domain error. Here are their comments:
This happens regardless of browser - Safari and Chrome both affected(tablet);
Presumably the error occurred internally and isn't displayed on the screen;
When a user presses 'button' it shows the error and fails.
I did not found any solution or reasons related to HTML about this error.
Everything seem to works fine, but some users get KCLError Domain error
I'm guessing it might be a device related bug than of an app.
From my point of view your code is pretty much "standard" when it comes to
consuming the API.
Ask one of users,that can catch this error, to testing the same feature on this site
Try checking their wi-fi settings or whether or not they have their wi-fi turned on. For more details, checkout this OS.
Update from OP:
So the KCLError Domain error error was not retated to html5 geolocation code but to users GSM triangulation, reverse IP geolocation or WiFi network database lookups.
I was confused by this error because it was not self explanatory and here is where I made a mistake, this error is not strict error code it just additional error message and the error code was error.POSITION_UNAVAILABLE and this code is well known.
UPDATE FROM CUSTOMER:
I upgraded the OS on my iPad today and location services have started working again. So all good now
The KCLError Domain error error was not related to the HTML5 geolocation code, but to users doing GSM triangulation, reverse IP geolocation or WiFi network database lookups.
I was confused by this error because it was not self explanatory and here is where I made a mistake. This error is not a strict error code, it is just an additional error message. The error code was error.POSITION_UNAVAILABLE and this error code is well known.
As for everything seemingly working fine, but some users getting KCLError Domain error:
I'm guessing it might be more a device related bug than of an app. From my point of view your code is pretty much "standard" when it comes to consume the API.
Ask one of users,that can catch this error, to test the same feature on that site. Try checking their wi-fi settings or whether or not they have their wi-fi turned on. For more details, check out their OS type and version.
UPDATE FROM CUSTOMER:
I upgraded the OS on my iPad today and location services have started working again. So all good now
More details,
I use a simple post Ajax call (used Jquery but also the native XMLhttpRequest with the form encoded as url encoded.
myPost: function(url,form,doneCallback,failedCallback){
var mypost = new XMLHttpRequest();
mypost.onreadystatechange = function() {
if (mypost.readyState === 4){
doneCallback(mypost);
}
};
mypost.onerror = function() {
failedCallback(mypost);
};
mypost.open('POST',url,true);
mypost.setRequestHeader('Content-Length', result.length);
mypost.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
mypost.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
mypost.setRequestHeader('Connection','close');
mypost.send(form);
},
In both situations the code works just fine with Chrome, Safari, Firefox and on IE 11 on win 8.1 or win 7 as a VM on VMWare Fusion, so running on a Mac OsX 10.9.2 with the latest win 8.1 updates installed. However as soon as this code runs on a native windows 8.1 version and IE with the same version for OS and IE, the post forgets to put out the post payload no matter whether I put the above header attributes in or not.
And yes a chrome browser on native win 8.1 properly puts the payload to the server, while the native IE 11 does not put the payload out. The receiving server linux based restlet is missing the payload for the specified resource so further returns a "500" status at the application layer.
There must be some configuration difference with respect to the IE on the native and the VM. As far as I can see this is different from what similar question have described.
BTW on the same native windows 8.1 some posts are working that address a form already created on the web pages, while the above form date is simply filled as.
form = 'options='+encodeURIComponent(options);
Any idea where the different behaviour is created?
Thanks
mypost.setRequestHeader('Content-Length', result.length);
mypost.setRequestHeader('Connection','close');
those lines are only working in FireFox for me, if I remove those 2 lines, my code is working in IE11.
Recently, I started getting errors when trying to access the client's mic through my website. When Chrome asks whether to allow the site to access the user's microphone, [object NavigatorUserMediaError] is produced whether they click "allow" or "deny." This has been happening regardless of whether or not a microphone is actually plugged into the computer (which is running Ubuntu 12.04).
Further testing through Firefox showed that this is not specific to Chrome. The problem only started after I had done a live-input demo and then logged out of the computer. I tried making a bare bones demo of accessing the microphone, and it ran into the same problem.
var getVideo = false, getAudio = true;
navigator.getUserMedia || (navigator.getUserMedia = navigator.mozGetUserMedia ||
navigator.webkitGetUserMedia || navigator.msGetUserMedia);
function init() {
if(navigator.getUserMedia) {
navigator.getUserMedia({video:getVideo, audio:getAudio}, onSuccess, onError);
} else {
alert('getUserMedia failed.');
}
}
function onSuccess() {
console.log("Yay");
}
function onError(err) {
console.log("Noo " + err);
}
This is rather puzzling as it had worked perfectly up until the point where I logged out and then logged back in and tried to test it again.
I am hosting the web code locally, through Jetty and Eclipse. I am accessing it by typing localhost:8080/my-program into the web browser.
Edit:
After the error occurs, the icon of a camera shows up in the chrome address bar, saying that Chrome is accessing my microphone and listing two possible microphones, "Default" and "Built-in Audio Analog Stereo."
Edit 2:
This error is also occurring on other websites that try to access my microphone through webrtc. Traditional Flash implementation still works.
Chrome seems to be throwing out an error message at regular intervals while open.
[361:362:0725/095320:ERROR:audio_output_device.cc(186)]
Not implemented reached in virtual void
media::AudioOutputDevice::OnStateChanged(media::AudioOutputIPCDelegate::State)
Edit 3:
I was able to clarify the error message a bit more
NavigatorUserMediaError {code: 1, PERMISSION_DENIED: 1}
** One Browser at a Time **
I've encountered this situation when I am testing with multiple browsers open. It would appear that only one browser can access the media at a time.
ie When I've got my page open in Chrome, and the video/audio is working, then Firefox won't work, and when I've got it working in Firefox, then Chrome doesn't work.
This can happen in two situations and I've experienced both in Ubuntu 12.04:
You have clicked Deny once and then the browser saves that setting, always returning error when asked for media access in that page. (This does not seem to be your case as you get the question from browser, but you just have to go to the address bar, click in the camera icon and change the option to ask again).
Your browser is not having access to the media devices and as in any computer without cameras nor microphones, even if you press Allow, you will get an error event as it cannot give you any streams. Try to check the browser settings to see if you can choose the selected camera. I've experienced this and the list was empty. To solve this I had to reboot the machine and Chrome started showing the list of devices again.
NavigatorUserMediaError {code: 1, PERMISSION_DENIED: 1}
This means your browser settings are not allowing you to access the camera. Go into your browser settings -> under website settings you'll find a list of webpages that you have blocked from accessing your device.
getUserMedia only works on https; no exception for localhost (i.e http://localhost). Safari also does not ever seem to allow getUserMedia from within an iFrame. I always get a “Trying to call getUserMedia from a document with a different security origin than its top-level frame” error. This makes using sites like codepen and jsfiddle impossible.
More detials https://webrtchacks.com/safari-webrtc/