I'm creating an alert to give the user an additional notification when my site requests access to their microphone. I've read that for Chrome, if the site is served over HTTPS, the user isn't asked for permission again unless they delete the permission. However, I'm noticing that on my non-HTTPS site requesting microphone access, that the permission is still saved. It appears that regardless of permission, calling getUserMedia always makes the Chrome alert appear.
Is there a way for me to determine that the user has already given my site permission? I would only want the alert to appear if the user hasn't given permission or has deleted the permissions.
window.navigator = window.navigator || {};
navigator.getUserMedia = (navigator.getUserMedia
|| navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia
|| navigator.msGetUserMedia
|| null);
if (navigator.getUserMedia /* && "Site not allowed" */) {
// Show alert.
navigator.getUserMedia(
{
audio: true
},
function(stream) {
// Hide alert.
},
function(error) {
switch (error.name) {
case 'PERMISSION_DENIED':
// Permission denied
break;
case 'NOT_SUPPORTED_ERROR':
// Media not supported
break;
case MANDATORY_UNSATISFIED_ERROR:
// No media tracks of the type specified in the constraints are found.
break;
}
}
);
} else {
console.log('Browser doesn't support getUserMedia.');
}
Related
I'll describe my problem briefly. I made a page that access the webcam to shot a picture and then upload it to my server. When I access the page on my localhost, it works perfectly, the problem occurs when I try to access from another device or I access with the IP.. For example: http://localost/Project/Page works well, but http://192.168.0.5/Project/Page doesn't work.
This is the code I used to access te media. The error occurs in the else sentence and throws the alert
navigator.getUserMedia ||
(navigator.getUserMedia = navigator.mozGetUserMedia ||
navigator.webkitGetUserMedia || navigator.msGetUserMedia);
if (navigator.getUserMedia) {
navigator.getUserMedia({ video: true, audio: false }, onSuccess, onError);
} else {
alert('your browser doesn't spport this function');
}
I don't know if the code isn't working or if there is a security policy making my page crash.
Regards
Found a Solution. I had to add a " security exception" to the browser, and it worked. Maybe not the best practice but the cheaper one when you dont have a SSL certificate.
I need to be able to show notification popups in the bottom right hand corner of the desktop, not the bottom right hand corner of the browser window like something like toastr can, needs to be the desktop bottom right hand corner. I have seen it done I think but can't recall where.
Anybody got any ideas?
I'm guessing javascript/jquery?
You're looking for notification() which can do that given the user gives the website permission to use it.
https://developer.mozilla.org/en-US/docs/Web/API/notification
from linked DOCS:
<button onclick="notifyMe()">Notify me!</button>
function notifyMe() {
// Let's check if the browser supports notifications
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// Let's check whether notification permissions have already been granted
else if (Notification.permission === "granted") {
// If it's okay let's create a notification
var notification = new Notification("Hi there!");
}
// Otherwise, we need to ask the user for permission
else if (Notification.permission !== "denied") {
Notification.requestPermission(function (permission) {
// If the user accepts, let's create a notification
if (permission === "granted") {
var notification = new Notification("Hi there!");
}
});
}
// At last, if the user has denied notifications, and you
// want to be respectful there is no need to bother them any more.
}
I have gone through so many web pages but unable to find proper answer, can you help me with it. I want to know how one can create web push notification(not for android app, but for website only)??
You can simply add this line of code:
var myNotification = new Notification(title, options);
I give you a better example, you have to ask to the user if you can add notifications:
function notifyMe() {
// Let's check if the browser supports notifications
if (!("Notification" in window)) {
console.log("This browser does not support desktop notification");
}
// Let's check whether notification permissions have alredy been granted
else if (Notification.permission === "granted") {
// If it's okay let's create a notification
var notification = new Notification("Hi there!");
}
// Otherwise, we need to ask the user for permission
else if (Notification.permission !== 'denied' || Notification.permission === "default") {
Notification.requestPermission(function (permission) {
// If the user accepts, let's create a notification
if (permission === "granted") {
var notification = new Notification("Hi there!");
}
});
}
// At last, if the user has denied notifications, and you
// want to be respectful there is no need to bother them any more.
}
You may consult the MDN's documentation and the MDN's specification.
How to remove audio video call icon from firefox and chrome in getusermedia.
var constraints = {
video: {
mandatory: {}
},
audio: {
mandatory: {}
}
};
navigator.getUserMedia_ = (navigator.getUserMedia
|| navigator.mozGetUserMedia
|| navigator.msGetUserMedia);
console.log(constraints);
navigator.getUserMedia_(constraints, function onSuccess(stream) {
}, function onFail(onFail) {
if(utilityService.getLocalStorage("user") === 'first')
{
$ngBootbox.alert('Media Device not connected.').then(function() {
clearTimeout(userNotAvail);
$state.go("profile.conversations");
});
}
else
{
$scope.secondUserCameraStatus = false;
console.log($scope.secondUserCameraStatus);
}
});
I have pass constraints (audio+video) and browser have accessed my camera and headphone and it is showing audio+video icons in top of bar so how can i remove these icons.
Thank you.
Not possible, thankfully. In all browsers today, indicators warn users any time they potentially could be recorded, and the indicators stay on until the user navigates away, or until the website stops all camera and microphone streams it is accessing, whichever is sooner. To stop a stream, do:
stream.getTracks().forEach(track => track.stop());
I personally find this quite reassuring, as I don't like to be recorded without my knowledge. If a website could circumvent the indicators, then the indicators would have no value, and users would wonder whether websites they previously granted camera+mic access to, are still observing them.
While some cameras have hardware indicator lights, not all do, and even those that do don't turn on for microphone-only access.
I am working on a web app.
I am using chrome notifications that are switched on once chrome asks for permissions.
Once Notification.permission is granted, The button switches to on.
What I want to do is switch off this button, and - as a result of this - also switch the dektop notifications or at least re-prompt the notification alert.
Here is my code
$scope.desktopNotificationSettings=function(){
// If browser doesnt support notifications
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// This is entered if permission is already there and button is triggered :: That means user wants to switch of desktop notifications
else if (Notification.permission === "granted") {
console.log("Entered granted");
Notification.requestPermission(function (permission){
if (('permission' in Notification)) {
console.log(permission);
Notification.permission = denied;
}
});
this.allowDesktopNotification = false;
return;
}
// This triggers a chrome alert to block or allow notifications
else if (Notification.permission !== 'denied') {
console.log("Entered denied");
Notification.requestPermission(function (permission){
if (!('permission' in Notification)) {
Notification.permission = permission;
}
});
}
}
Now if the permission is denied then request permission works fine for the first time.
If I click on the button it doesn't trigger the permission alert in chrome.
Kindly help. Thanks