is there a way to detect if calling play() on a video element is allowed without a user gesture?
On Android Chrome this warning is given:
Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture.
So on Chrome Android a user gesture is required to start the playback of a video, while it isn't on desktop Chrome.
Is there a way to detect which behavior I will get?
I want to have slightly different behavior in my app depending on if calling play programatically is allowed or not.
I have tried to use Modernizr.videoautoplay, but that checks if the autoplay property on the element, which is not the same thing. This gives false negatives for IE11 and Edge.
Edit: added an example. The video will start playing automatically in Chrome desktop and IE11 or Edge (with 3s delay) on windows 8 or 10. For Chrome#Android a user interaction is needed (clicking the button) and the error message can be seen in the console.
The play method returns a promise which can be used to catch the error.
Not all browsers follow the specification so you will have to check if what is returned is a promise first.
var autoPlayAllowed = true;
var promise = document.createElement("video").play();
if(promise instanceof Promise) {
promise.catch(function(error) {
// Check if it is the right error
if(error.name == "NotAllowedError") {
autoPlayAllowed = false;
} else {
throw error;
}
}).then(function() {
if(autoPlayAllowed) {
// Allowed
} else {
// Not allowed
}
});
} else {
// Unknown if allowed
}
Related
I'm attempting to access the microphone on iOS Safari with the help of the getUserMedia. Below you can find a snippet of my code.
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function(constraints) {
// First get ahold of the legacy getUserMedia, if present
let getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// Some browsers just don't implement it - return a rejected promise with an error
// to keep a consistent interface
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
// Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
navigator.mediaDevices.getUserMedia({
audio: true
}).then(function(stream) {
successCallBack(.......);
}).catch(function(error) {
debug.log(error);
..........
});
Yet the promise always catches an error, to be more specific an OverConstraintError.
{message: "Invalid constraint", constraint: ""}
This behaviour is unique for iOS Safari, on all other browsers (Chrome, Firefox, Safari osX) it works without any problem. Actually my issue ressembles a lot like this one => How to resolve iOS 11 Safari getUserMedia "Invalid constraint" issue, yet I'm not trying to use the camera. The only thing that interests me is the microphone.
I'm testing with a real iPhone (a 5 and X, both updated to the latest version), so it is not linked to the iPhone Simulator.
The access to the microphone is granted and the popup requesting permissions is also showing, so it is not an permissions issue.
This issue may be related to this bug report titled getUserMedia fails with an OverConstrainedError when no devices are found:
https://bugs.webkit.org/show_bug.cgi?id=177126
Here is your code running in Codepen. As you stated, audio is enabled and works. Note the enumerateDevices() call returns an empty array. As the bug states, this causes the error in your question:
.catch(function(error) {
navigator.mediaDevices.enumerateDevices().then(devices=>{console.log(devices)});
console.log('error: ',error);
});
https://codepen.io/anon/pen/rQWRyZ?editors=0011
web rtc or getusermedia has some issues and it is not working on all platforms as u expect - have same problems with camera detection like in samsung s5 same code is working fine but under newer device it was failing.
My advice is to use webrtc adapter js.
Try simply include this script:
<script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/6.4.0/adapter.js" type="text/javascript"></script>
before u use getusermedia api. I think that 99% of issues just disappear.
Localstorage stopped working after the last iOS update on all our IOS devices, yet we can't seem to find any reference online to that change, and wondering what's going on.
I have a jsfiddle implementing basic localstorage setting and getting.
It runs without issue on Chrome (IOS) but fail entirely on Safari:
https://jsfiddle.net/mva3ap87/
Here is the code:
var ls = {
set: function() {
if (window.localStorage && window.localStorage.setItem) {
window.localStorage.setItem('hello','world');
return true;
}
return false;
},
get: function() {
if (window.localStorage && window.localStorage.getItem) {
return window.localStorage.getItem('hello');
} else {
return 'nope';
}
}
}
$('.status1').html(window.localStorage?'Yes':'No');
$('.status2').html(ls.set()?'Success':'Failure');
$('.status3').html(ls.get());
This issue affect all the IOS devices we have tried.
Incognito mode is not on.
No popup blocker active."Do not track" is off.
Cookies are allowed (but shouldn't matter anyway).
Any clue what's going on?
Update:
I was able to borrow a mac and found the error:
"DOM Exception 22: An attempt was made to add something to storage that exceeed the quota".
The localstorage is empty, and the browser is not in incognito mode.
I'm even more confused.
My site uses desktop notifications which have never worked on mobile devices but I've recently started to receive the following exception in Chrome Version 42.0.2311.108 on Android 4.4:
Failed to construct 'Notification': Illegal constructor. Use ServiceWorkerRegistration.showNotification() instead. TypeError: Failed to construct 'Notification': Illegal constructor. Use ServiceWorkerRegistration.showNotification() instead.
My notification code is simple, after checking if the user has granted permissions I initialize a new Notification object as follows:
var notification = new Notification(messageOptions.title, { icon: messageOptions.icon });
How do I change this code to use the ServiceWorkerRegistration.showNotification, which comes up as undefined, to support notifications in the mobile version of Chrome or if that isn't possible do a feature detection and prevent the exceptions from happening if this really isn't supported [yet].
See crbug.com/481856 on the Chrome issue tracker:
new Notification() is on the path to deprecation, because it implicitly assumes that the page will outlive the notification, which is very unlikely on mobile (and far from guaranteed on desktop too).
Hence we will never implement it on Android. We might one day remove it on desktop too, after a deprecation period.
Websites should use ServiceWorkerRegistration.showNotification() (see spec) instead whenever it is available.
The best way I can think of to feature-detect new Notification() is to try it (before you have permission) and catch the error:
function isNewNotificationSupported() {
if (!window.Notification || !Notification.requestPermission)
return false;
if (Notification.permission == 'granted')
throw new Error('You must only call this *before* calling Notification.requestPermission(), otherwise this feature detect would bug the user with an actual notification!');
try {
new Notification('');
} catch (e) {
if (e.name == 'TypeError')
return false;
}
return true;
}
You could then use it like this:
if (window.Notification && Notification.permission == 'granted') {
// We would only have prompted the user for permission if new
// Notification was supported (see below), so assume it is supported.
doStuffThatUsesNewNotification();
} else if (isNewNotificationSupported()) {
// new Notification is supported, so prompt the user for permission.
showOptInUIForNotifications();
}
According to this:
Note: Trying to create a notification inside the ServiceWorkerGlobalScope using the Notification() constructor will throw an error.
If you want to send notification in a Service Worker, use self.registration.showNotification(). See https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification
I'm using getUserMedia() for audio recording and it works correctly but have an issue with it.
I want to display a message before starting recording that any microphone is connected with system or not.
For this I have used following code and run this into chrome but it was not working correctly.
if(navigator.getUserMedia || navigator.webkitGetUserMedia)
{
alert("Microphone is connected with your system");
} else {
alert("Microphone is not connected with your system");
}
when microphone is not connected then also above code giving message "Microphone is connected with your system".
so please suggest me a better way to detect microphone using JavaScript in any browser.
Testing for the existence of these functions does not detect the existence of hardware microphone. It only detects if browser has the API to do so.
The browsers that pass your test need not have a physical microphone plugged into microphone jack. It is simply a newer browser. The browsers that fail the test may have a microphone, but are old browsers that do not contain the API.
Also, at least the getUserMedia function is asynchronous, so any code that depends on using the audio or video must be put in a callback function, not the main script.
See https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia for an example of how to write cross-browser code for audio/video input.
Something like this:
function success(stream) {
// we have it
}
function fail(error) {
console.log(error);
if (error === 'NO_DEVICES_FOUND') {
// NO_DEVICES_FOUND (no microphone or microphone disabled)
}
}
navigator.getUserMedia({ audio: true }, success, fail);
Try this
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
// Code for success
}).catch(err => {
if(err.includes("NotFoundError: Requested device not found"))
alert("Mic not detected")
else alert("Error recording audio")
})
If the mic is not detected or unplugged means the catch statement will be executed. You can show your error message here.
You can use this link
I used this method
developer.mozilla.org
I'm on Chrome 25 successfully using getUserMedia and RTCPeerConnection to connect audio from a web page to another party, but I'm unable to get the API to stop the red blinking indication icon in the Chrome tab that media is being used on that page. My question is essentially a duplicate of Stop/Close webcam which is opened by navigator.getUserMedia except that the resolution there isn't working. If I have a page that just uses getUserMedia with no remote media (no peer), then stopping the camera turns off the blinking tab indicator. Adding remote streams seems to be a/the issue. Here's what I've currently got for my "close" code:
if (localStream) {
if (peerConnection && peerConnection.removeStream) {
peerConnection.removeStream(localStream);
}
if (localStream.stop) {
localStream.stop();
}
localStream.onended = null;
localStream = null;
}
if (localElement) {
localElement.onerror = null;
localElement.pause();
localElement.src = undefined;
localElement = null;
}
if (remoteStream) {
if (peerConnection && peerConnection.removeStream) {
peerConnection.removeStream(remoteStream);
}
if(remoteStream.stop) {
remoteStream.stop();
}
remoteStream.onended = null;
remoteStream = null;
}
if (remoteElement) {
remoteElement.onerror = null;
remoteElement.pause();
remoteElement.src = undefined;
remoteElement = null;
}
if (peerConnection) {
peerConnection.close();
peerConnection = null;
}
I've tried with and without the removeStream() call, I've tried with and without the stop() call, I've tried the element.src="" and element.src=null, I'm running out of ideas. Anyone know if this is a bug or user/my error in the use of the API?
EDIT: I set my default device (using Windows) to a camera that has a light when it's in use, and upon stopping, the camera light goes off, so perhaps this is a Chrome bug. I also discovered that if I use chrome://settings/content to change the microphone device to anything other than "Default", Chrome audio fails altogether. And finally, I realized that using element.src=undefined resulted in Chrome attempting to load a resource and throwing a 404 so that's clearly not correct... so back to element.src='' on that.
Ended up being my fault (yes, shocking). Turns out I wasn't saving localStream correctly in the onUserMediaSuccess callback of getUserMedia... once that was set, Chrome is turning off the blinking recording icon. That didn't explain the other anomalies, but it closes the main point of the question.
I just got this working yesterday after trawling through the WebRTC specification. I don't know if this is the "right" way to do it, but I found that renegotiating the PeerConnection with a new offer after removing the stream did the trick.
var pc = peerConnections[socketId];
pc.removeStream(stream);
pc.createOffer( function(session_description) {
pc.setLocalDescription(session_description);
_socket.send(JSON.stringify({
"eventName": "send_offer",
"data":{
"socketId": socketId,
"sdp": session_description
}
}));
},
function(error) {},
defaultConstraints);