I want to open permission popup for microphone if microphone permission is not granted,
navigator.permissions.query(
{ name: 'microphone' }
).then(permissionStatus => {
console.log(permissionStatus.state); // granted, denied, prompt
if(permissionStatus.state != 'granted')
{
alert('Please allow your microphone');
}
else
{
this.mic_permission=true;
}
let self=this;
permissionStatus.onchange = function(){
if(this.state!='granted')
{
self.mic_permission=false;
}
console.log("Permission changed to " + this.state);
}
using this code to check whether microphone permission is granted or not but i want to open popup also so that user can allow the microphone permission
Related
When using the geolocation.getCurrentPosition API on mobile, tested iOS at the moment, users are prompted more than once through a session depending on the page. In comparison to as desktop site, such as Chrome on Windows 10, where once a user hits Allow they will no longer be prompted for permissions unless explicitly disabled. iOS Safari seems to be session based and then possibly page based within session?
Wondering if anyone knows if there are explicit rules defined by Apple for this permission check? Also does maximumAge play a role in how often the user is prompted?
const LOCATION_OPTIONS = {
timeout: 15000,
enableHighAccuracy: true,
maximumAge: 86400000,
};
useEffect(() => {
const { geolocation } = navigator;
// If the geolocation is not defined in the used browser we handle it as an error
if (!geolocation) {
setError("Geolocation is not supported.");
return;
}
// Call Geolocation API
geolocation.getCurrentPosition(handleSuccess, handleError, options);
}, [options]);
return { location, error };
Example NextJS CodeSandbox
https://u11vn.sse.codesandbox.io/
Unfortunately, it seems there is no way to permanently grant website access to the iPhone privacy like camera location, within Safari. but on the user side, there are three options (Ask, Allow, Deny ) that can set
if you use JavaScript in iOS WKWebView, you can get a workaround that request location with App location API
if you use JavaScript on the web, well you cannot achieve this.
In the web do below / or use navigator with a popup dialog
var options = {
enableHighAccuracy: true,
timeout: 7000,
maximumAge: 0
};
function log(data) {
const tag = document.createElement('p');
tag.textContent = data;
document.body.appendChild(tag);
}
function success(pos) {
var crd = pos.coords;
console.log('Successfully determined a user position:', crd);
log('Your current position is:');
log(`Latitude : ${crd.latitude}`);
log(`Longitude: ${crd.longitude}`);
log(`More or less ${crd.accuracy} meters.`);
}
function error(err) {
console.warn(`ERROR(${err.code}): ${err.message}`);
}
navigator.geolocation.getCurrentPosition(success, error, options);
Or
$scope.watchId = navigator.geolocation.watchPosition(function (position) {
if ($scope.t1 == 0) {
$scope.t1 = position.timestamp;
} else {
if (Math.abs($scope.t1 - position.timestamp) > 5000) {
$scope.t1 = position.timestamp;
SellerRef.update({ Location: { Lat: position.coords.latitude, Long: position.coords.longitude } })
}
}
},
function (error) {
if (error.code == 1) {
$scope.showAlert("An error occured \n" + " Please goto Settings->Privacy->LocationServices and give permission for " + bowser.name + " which is your browser ");
}
}
);
For loading your web inside an app
Then with webView, just add location permission descriptions to the info.plist file.
Add NSLocationWhenInUseUsageDescription versus NSLocationAlwaysUsageDescription versus NSLocationUsageDescription
What is the geolocation error, look here
navigator.geolocation.getCurrentPosition(success => {
/* Do some magic. */
}, failure => {
if (failure.message.startsWith("Only secure origins are allowed")) {
// Secure Origin issue.
}
});
Include/set an "required_features" option at manifest.webapp file:
{
"required_features": ["geolocation"]
}
User:
On iPhone:
Settings -> Location Services -> [your Browser] [apple ref][1]
Chrome requires https for geolocation usage
Troubleshooting && Permissions Check / Debug Log
Check, user's OPERATING SYSTEM and BROWSER BOTH have location services enabled, user's browser supports checking for location services
// options for current position
const navigatorLocationOptions = {
enableHighAccuracy: true,
timeout: 7000,
maximumAge: 0
};
// does browser have geo services enabled
navigator.permissions.query({name:'geolocation'})
.then((result) => {
if (result.state === 'granted') {// you are good
navigator.geolocation.getCurrentPosition(position => {
console.log('granted user location permission', position );
//.. do your stuff
}, (error) => {
// OS services are not enabled
console.log('Please turn on OS located services', navigator);
errorLocation();
}, navigatorLocationOptions);
} else {
// browser issues seriveces
console.log('Browser location services disabled', navigator);
errorLocation();
}
}, (error) => {
/* Browser doesn't support querying for permissions */
console.log('Please turn on BROWSER location services', navigator);
errorLocation()
}
);
//handle errors
function errorLocation() {
...
}
I'm trying to remove or overwrite my notification signature made by electron.
here is what i get:
I am trying to whether overwrite the signature electron.app.Electron or remove it completely, by knowing
that I have tested it on test mode (npm run start), and also when packed as .exe
also I have noticed that I remove the icon the signature goes a way, but it is very unpleasant without one.
my current notification code is bellow:
function showNotification() {
const notification = new Notification("new message", {
body: "app launched",
icon: __dirname + '/icon.ico',
tag: 'soManyNotification',
hasReply: true
})
}
console.log(Notification.permission)
if (Notification.permission === "granted") {
showNotification()
//alert('we have permission');
} else if (Notification.permission === "denied") {
Notification.requestPermission()
};
any help would be gratefully appreciated ^^
// If this is running on Windows then set UserModelID for notification
if (isWin()) {
app.setAppUserModelId("Proper name to be replaced");
}
I'm looking to show different modals to the user to guide them to allow their permission when trying to use a microphone requiring task in my app - based on whether they have not yet been requested for microphone permissions, granted permissions, or blocked permissions.
How can I reliably find out which state of permissions the user is in? Preferably with an onChange handler to know if the user revokes their permission at any point and something that would work for Chrome, Firefox, and Safari.
The inspiration comes from voice.google.com where they show different screen on the call widget when trying to call the Google voice number with the microphone permission set to "ask", "allow", or "block".
I've gone through https://developers.google.com/web/updates/2015/04/permissions-api-for-the-web but I can't seem to find a solution for how I would like to implement this.
Edit:
<div id="button">Click me</div>
<script>
const button = document.getElementById("button")
button.addEventListener('click', () => {
navigator.mediaDevices.getUserMedia({
audio: true
})
.then(function(stream) {
console.log('You let me use your mic!')
console.log(stream)
navigator.permissions.query({
name: 'microphone'
}, ).then(function(permissionStatus) {
console.log("PermissionStatus: ", permissionStatus.state); // granted, denied, prompt
permissionStatus.onchange = function() {
console.log("Permission changed to " + this.state);
}
})
})
.catch(function(err) {
console.error(err)
console.log('No mic for you!')
});
})
navigator.permissions.query({
name: 'microphone'
})
.then(function(permissionStatus) {
console.log("PermissionStatus: ", permissionStatus.state); // granted, denied, prompt
permissionStatus.onchange = function() {
console.log("Permission changed to " + this.state);
}
})
</script>
The name is "microphone" and you'll get "granted", "prompt" or "denied" as the state.
https://developers.google.com/web/fundamentals/media/recording-audio#use_the_permissions_api_to_check_if_you_already_have_access
I want to display the native browser popup for location sharing even after user denying the location sharing.
consider the scenario,
user clicks location sharing button, native browser popup is shown. he allows to share his location the location button turns to green.
if the user declines sharing location, location button should be grey. and clicking that button should show a native browser popup...
with the code below, I am able to display a native popup browser again if I clear the site data from developertools->application->clear site data.
is it possible to show the native browser popup with clearing site data or so?
below is the code,
class Location extends react.purecomponent {
state = {
active: false,
};
componentDidMount() {
if (navigator.geolocation) {
navigator.permissions.query({name:
'geolocation'}).then((result) =>
{
if (result.state === 'granted') {
this.setState({active: true});
} else if (result.state === 'denied') {
this.setState({active: false});
}
});
}
}
handle_location_btn_click = () => {
if (navigator.geolocation) {
navigator.permissions.query({name:'geolocation'})
.then((result) => {
if (result.state === 'granted') {
this.setState({active: true});
} else if (result.state === 'prompt') {
navigator.geolocation
.getCurrentPosition(this.use_position, null);
} else if (result.state === 'denied') {
this.setState({location_active: false});
}
});
} else {
console.log("geolocation unavailable");
}
};
render = () => {
return (
<button type="button" className={this.active ? ' active':
'')}
onClick={this.handle_location_btn_click}>
</button>
);
};
}
Could someone help me with this.thanks
No, it is not possible once the user said no to a location on specific domain
Trying to build a chrome extension with notifications, and I would like a button that displays a notification. This is the HTML code:
<div><button onclick="notifyMe()">Notify me!</button></div>
This button shows in the extension, but when I press it, nothing happens. Here is my js code:
function notifyMe() {
var notification = new Notification("Hi there!");
}
Am I missing any js code? I have no idea
Not sure if I'm following correctly but if you want to show a chrome notification there's actually the chrome notifications API
I'd do the following:
<div><button onclick="notifyMe()">Notify me!</button></div>
JS
function notifyMe() {
chrome.notifications.create('some id for this notification', {
type: 'basic', // "basic", "image", "list", or "progress"
title: 'a title for this notification',
message: 'the message you want to show'
}, function () { // called when the notification is created });
}
If you want to use the Notification you have to ask for permissions first to use it (taken from the Web Notifications article on MDN):
// At first, let's check if we have permission for notification
// If not, let's ask for it
if (window.Notification && Notification.permission !== "granted") {
Notification.requestPermission(function (status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
});
}
function notifyMe() {
if (window.Notification && Notification.permission === "granted") {
var n = new Notification("Hi!");
}
}
Your code is calling the Desktop Notification API and not the Chrome Notification API:
var notification = new Notification("Hi there!");
Apparently Google modified the level of permission in chrome extension (works perfectly in Chrome 43 +). Just include this line in your manifest.json, and Desktop notifications API will work (as well as the Chrome Notification API):
"permissions": [ "notifications", ...etc... ],
Adding notifications to the permissions scopes, you can check Notification.permission returns "granted".