I have created a small app on MeteorJS, which is using the camera at some point to take pictures.
To do so, I just use the mdg:camera package.
It all works fine on my localhost:3000
Now the problem came when I deployed the app to meteor (xxx.meteor.com)
When testing it, when I try to launch the camera, Chrome complains with
Camera permission denied
Without asking me first if I want to allow or block the camera.
They suggest going to :
Go to Settings > "Show advanced settings..." > "Content settings..." > Media heading > "Manage exceptions...", then find this website in the list and allow video capture.
After going there, I can see my localhost:3000 being allowed, but that's it. I can't find any options to add manually any new exceptions.
Would any of you had this issue ? Is it a Meteor issue, where the settings are not set properly, or a Chrome settings issue ?
PS : if that helps, here is how I use the camera (I take the picture and save it in session):
var options = {
width: 350,
height: 350,
quality: 75,
};
MeteorCamera.getPicture(options, function(err, data) {
if (err) {
console.log('error', err);
}
if (data) {
img = Session.get('img');
if( typeof img == 'undefined') {
img = [];
}
img.push( {hash: (Date.now() / 1000 | 0), data: data});
Session.set('img', img);
}
});
Update
I have tried on Opera, camera works fine. It first complains that the permission is not right, but it gives me at the same time a popup to allow or block the camera. After clicking on Allow, the camera works fine.
On Chrome even with removing the cookies (maybe the preference would be saved in one ??), still no luck.
Related
I have what I assumed was a pretty standard service worker at http://www.espruino.com/ide/serviceworker.js for the page http://www.espruino.com/ide
However recently, when I have "Update on reload" set in the Chrome dev console for Service Workers the website stays with its loading indicator on, and the status shows a new service worker is "Trying to Install".
Eventually I see a red 'x' by the new service worker and a '1' with a link, but that doesn't do anything or provide any tooltip. Clicking on serviceworker.js brings me to the source file with the first line highlighted in yellow, but there are no errors highlighted.
I've done the usual and checked that all files referenced by the service worker exist and they do, and I have no idea what to look at next.
Does anyone have any clues how to debug this further?
thanks!
I'm on Chrome Beta.
I updated to the newest release a magically everything works. So I guess it was a bug in Chrome or the devtools, not my code.
For those running in to this issue with the latest version of Chrome, I was able to fix it by caching each resource in its own cache. Just call caches.open for every file you want to store. You can do this because caches.match will automatically find the file in your sea of caches.
As a messy example:
self.addEventListener('install', event => {
event.waitUntil(swpromise);
var swpromise = new Promise(function(resolve,reject) {
for (var i = 0; i < resources_array.length; i++) {
addToCache(i,resources_array[i]);
}
function addToCache(index,url) {
caches.open(version+"-"+index).then(cache => cache.addAll([url])).then(function() {cacheDone()});
}
var havedone = 0;
function cacheDone() {
havedone++;
if (havedone == resources_array.length) {
resolve();
}
}
})
I used the version number and the index of the file as the cache key for each file. I then delete all of the old caches on activation of the service worker with something similar to the following code:
addEventListener('activate', e => {
e.waitUntil(caches.keys().then(keys => {
return Promise.all(keys.map(key => {
if (key.indexOf(version+"-") == -1) return caches.delete(key);
}));
}));
});
Hopefully this works for you, it did in my case.
The script below works fine in FireFox and Chrome, but in Internet Explorer 11, it always fails (with POSITION_UNAVAILABLE).
I have set the browser to allow requests for position, and I agree to the prompt the browser presents me when requesting permission.
I'm almost certain that this worked fine a few months ago when I was last experimenting with it. What could I be missing as far as IE's settings?
<script type="text/javascript">
$(document).ready(function () {
if (Modernizr.geolocation)
{
navigator.geolocation.getCurrentPosition(positionSuccess, positionError, { enableHighAccuracy: true, maximumAge: 60000, timeout: 10000 })
}
else
{
$("#GeoError").html("Unable to retrieve current position.")
}
});
function positionSuccess(position)
{
$("#Latitude").val(position.coords.latitude);
$("#Longitude").val(position.coords.longitude);
}
function positionError(error)
{
var message = "";
// Check for known errors
switch (error.code) {
case error.PERMISSION_DENIED:
message = "This website does not have your permission to use the Geolocation API";
break;
case error.POSITION_UNAVAILABLE:
message = "Your current position could not be determined.";
break;
case error.PERMISSION_DENIED_TIMEOUT:
message = "Your current position could not be determined within the specified timeout period.";
break;
}
// If it's an unknown error, build a message that includes
// information that helps identify the situation, so that
// the error handler can be updated.
if (message == "") {
var strErrorCode = error.code.toString();
message = "Your position could not be determined due to " +
"an unknown error (Code: " + strErrorCode + ").";
}
$("#GeoError").html(message)
}
</script>
Also, I get the same failure in IE11 when I try http://html5demos.com/geo, where both FireFox and Chrome work fine.
Does you enable the Location Service?
I have had the same issue, it worked after I enabled the Location Service in my windows 2016.
This page shows how to enable the Location Service in windows 10.
I have had the same issue in IE11 only.
I had to set enableHighAccuracy to false to get it to work. Once I did that IE worked as expected.
In Internet Options, click on the Privacy tab. Uncheck the Never allow websites to request your physical location box, hit on OK.
After making these changes, the http://html5demos.com/geo now worked for me. Initially it didn't.
aha, just discovered something.
Chrome apparently uses the WIFI access points to help finding the location.
IE11 (and edge) just falls back to the default location in your windows settings, if there is no immediate GPS signal.
Our chrome extension does not work correctly anymore since version 37.0.2062.103 (It used to work correctly on chrome version 36.0.1985.143).
Specifically, the debugger API has stopped working for us when we use the DOMDebugger.
See the attached code: (background.js)
chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab){
if( changeInfo.status == "loading" && tab.active){
var debugId = {tabId:tabId};
chrome.debugger.attach(debugId, '1.0', function() {
chrome.debugger.sendCommand(debugId, 'Debugger.enable', {}, function() {
chrome.debugger.sendCommand(debugId, "DOMDebugger.setEventListenerBreakpoint", {'eventName':'click'},
function(result) {
console.log('registering click');
});
});
});
}
});
chrome.debugger.onEvent.addListener(onEvent);
function onEvent(debuggeeId, method,params) {
if(method=="Debugger.paused"){
console.log('DONE!');
}
};
The extension successfully starts the debugger. we get the yellow debugger ribbon.
We also see the 'registering click' msg in the console. the result argument is an empty object {} (line 8).
However upon clicking on a button that has a click event listener nothing happens.
It used to work without any issues.
It seems like it regressed with https://codereview.chromium.org/305753005. One needs to call "DOM.enable" for it to work now. On the Chrome side, we should implicitly enable DOM domain upon setEventListenerBreakpoint for backwards compatibility. Unfortunately it already squeezed into the stable release.
I am developing a Chrome Extesion for the first time and I am following the only guide that explains something about that: HTML5 ROCKS - FILESYSTEM.
I need to get storage for my extension and I resolved so:
window.webkitStorageInfo.requestQuota(window.PERSISTENT,1024*1024, onInitFs, errorHandler);
Ok, it works.
Now I need to create a xml file into the root, but in "onInitFs" the "fs" var is only a number and "fs.root" can't get it.
function onInitFs(fs){
console.log(fs.root); // -> Undefined
fs.root.getFile('list.xml', {create: true, exclusive: true}, function(fileEntry) {
fileEntry.isFile === true;
fileEntry.name == 'list.xml';
fileEntry.fullPath == '/list.xml';
}, errorHandler);
}
Can anybody explain why it doesn't work and how to resolve this issue?
Using RequestFileSystem within Chrome Extension
In order to use the FileSystem API as a root filesystem for your Chrome extension, you can actually use window.webkitRequestFileSystem instead of requestQuota.
window.webkitRequestFileSystem(window.PERSISTENT, 1024 * 1024, function (filesystem) {
console.log(filesystem);
console.log(filesystem.root);
}, function (e) { console.log("Could not request File System"); });
This does print correctly on Chrome 15,16 and 17 for me:
DOMFileSystem
DirectoryEntry
Using requestQuota for HTML5 apps
Just for reference, this would be the way to actually request the quota (i.e., when not using a Chrome Extension). You have to request the quota (the user sees a little banner at the top of his/her window) first. The RequestFileSystem is called if the user accepts.
window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024, function(grantedBytes) {
window.webkitRequestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
}, function(e) {
console.log('Error requesting filesystem', e);
});
Eventually it might be necessary to request quota within an extension. Currently this can be circumvented with the unlimitedStorage permission. For the current state of implementation/storage types, see http://code.google.com/chrome/whitepapers/storage.html
Until current stable version 17.x, you cannot use HTML5 FileSystem API in Chrome extension. I have try this, the browser will crash down if I call FileSystem API in background page.
And here is a HTML5 API list what you can use in Chrome extension:
http://code.google.com/chrome/extensions/api_other.html
I'm having a bit of trouble getting some final bit of code working to complete my extension.
The short version is that I need my background.html page to notify my content script whenever a different tab is selected. At the moment I have the following:
background.html
chrome.tabs.onSelectionChanged.addListener(function( tab_id , info ) {
// some way to call App.resize();
});
content script js file
var App = {
resize: function() {
// logic
}
}
The longer version is that I'm building a fullscreen extension for chrome that works the same as Firefox and Safari on PC. At the moment, when you enter fullscreen mode you can't really navigate to different other tabs unless you use a shortcut and cycle through all your open tabs. My extension shows all the currently opened tabs and you can switch to them, as well as an address bar so you can go to other websites, etc.
I have everything working as I need it, and it's all working nicely except with pages that redirect to others. E.g. with Google Reader, when you open an article in the background, it goes through google's proxy and then redirects to the actual article. This is the only place where it doesn't work. But if I can call the App.resize() function whenever I switch to a new tab, that will fix my problem. (I hope).
It depends on whether you need to inform content scripts on all pages or just the selected tab. I'll give you solutions for both.
background.html (if you need to inform all tabs)
chrome.tabs.onSelectionChanged.addListener(function() {
chrome.windows.getAll({populate: true}, function(windows) {
var w,t;
for (w=0; w<windows.length; w++) {
for (t=0; t<windows[w].tabs.length; t++) {
chrome.tabs.sendRequest(windows[w].tabs[t].id, "resize");
}
}
});
});
background.html (if you only need to inform the newly-selected tab)
chrome.tabs.onSelectionChanged.addListener(function(tabId) {
chrome.tabs.sendRequest(tabId, "resize");
});
content script
var App = {
resize: function() {
// logic
}
};
chrome.extension.onRequest.addListener(function(request) {
if (request === "resize") {
App.resize();
}
});