I get this error in Firefox 51 when I try to execute the following code and when I select my laptop's camera:
navigator.getMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mediaDevices.getUserMedia ||
navigator.msGetUserMedia);
navigator.getMedia({
video: true,
audio: false
},
function(stream) {
if (navigator.mozGetUserMedia) {
video.mozSrcObject = stream;
} else {
var vendorURL = window.URL || window.webkitURL;
video.src = vendorURL.createObjectURL(stream);
}
video.play();
},
function(err) {
console.log("An error occured! " + err);
}
);
Error:
NotReadableError: Failed to allocate videosource
Can someone elaborate what this means? Is my webcam broken? I used it from the script just yesterday without problems. It's not allocated to other application.
NotReadableError is the spec compliant error thrown by Firefox when webcam access is allowed but not possible.
Most commonly this happens on Windows because the webcam is already in use by another app. Firefox will throw this error on both Windows and Mac even though only on Windows processes get exclusive access to the webcam.
The error can happen for other reasons:
Although the user granted permission to use the matching devices, a hardware error occurred at the operating system, browser, or Web page level which prevented access to the device.
Chrome throws TrackStartError instead. It also throws it for other reasons. Chrome tabs can share the same device.
Source: common getUserMedia() errors .
Please make sure your camera is not been used by some other application (chrome, ie or any other browser).
I wasted half my day searching for a solution, and in the end, found out my camera was used by other application.
I've encountered same issue on Windows 10, no other apps using my video device. The problem was that in Windows 10 in Settings->App permissions (in left column) there is a setting for microphone and camera (Allow apps to access your mic/camera) which needs to be turned on. It does not matter that you don't find your browser in app list below this setting, just enable it here and voila.
The message getUserMedia() error: NotReadableError was displayed for Chromium but not Firefox web browser. I also noticed that WebRTC examples using getUserMedia function without microphone access worked correctly in Chromium.
In fact, I had to make sure my microphone is enabled and select the correct microphone in Chromium / Chrome settings. Then WebRTC with audio and video access worked correctly.
If it is not a microphone problem, it may also be a webcam problem so you have to make sure your webcam is enabled and selected correctly in Chromium / Chrome settings.
Note that only one app at a time can use the webcam / microphone.
If you are here after or in December 2019 i would like to tell you few things
This feature navigator.getUserMedia() is deprecated.
Successor of this feature in the browsers will be window.navigator.mediaDevices.getUserMedia.
The new feature may not support in many browsers, since its still in the experiment mode few days ago chrome released its chrome 79 and its still not supporting in chrome 79 for me, and other than chrome and IE its working in all the browsers for me
Here is a quick code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Jello</title>
<style>
video{
width: 30%;
height: auto;
}
</style>
</head>
<body>
<video autoplay controls></video>
<button>Open Cam</button>
<script>
function getCam(){
window.navigator.mediaDevices.getUserMedia({video:true}).then((stream)=>{
// let videoTrack = stream.getVideoTracks()[0];
// console.log(videoTrack);
document.querySelector("video").srcObject = stream;
}).catch(err=> console.log(err.name))
}
// getCam();
document.querySelector("button").addEventListener("click", getCam);
</script>
</body>
</html>
Edit => if you are using in windows 10 make sure give chrome access your microphone and camera, otherwise it won't work
There is another solution to this problem. I had it with camera not working in Firefox and Skype, but working with the Camera app.
The solution was to give access to camera for "classical apps" (I do not know how it's called in English). It is in the same place access can be given or taken for all other apps, just bellow them make sure the classical apps are allowed as well. And not just giving for the app in question, like Firefox, all classical apps need to have that enabled
Tl;dr; - Check device drivers for any "funny" camera drivers
I just spent an hour on a call with a user who kept hitting this error, no matter what we tried and that includes go down every answer to this question. And we found another cause which I will now add here for the next poor soul to stumble on this.
In his case, he had installed an app called ChromaCam (which I exited almost as a first diag step) and this app installs a device driver called "Personify Virtual Camera Universal" Web search for that driver name will show a whole bunch of people having camera problems and the solution seems to be somewhat universal: uninstall the device driver. He didn't even know what ChromaCam was or why it was on his laptop, so we removed it, uninstalled the driver and everything started working perfectly!
There was another person in a different thread who had similar problem and for him it was some custom HP (?? - I think that's what he said) camera driver instead of normal generic one that Windows would have chosen.
Can someone elaborate what this means? Is my webcam broken? I used it
from the script just yesterday without problems. It's not allocated to
other application.
I've encountered exactly the same issue!
Shame on me! Because, in the meantime I'd added a beforeunload event, including the event.preventDefault as reported in the example.
After removing this event.preventDefault, everything worked fine - as expected.
I have searched everywhere for the solution at last found this. Basically in my case camera permission was turned on and Mozilla firefox can access web cam but chrome can't. Infact older versions of chrome like 74.x can use webcam but latest 84.x cannot. I thought the problem is with chrome but at last, I tried turning on my microphone access from windows 10 settings. Now chrome can access webcam too.
Solution: Please check you camera and microphone access both are turned on from windows settings.
The NonReadableError: Could not start video source is also thrown during a session (not local only!) if the camera change happens too quickly.
I don't know the solution yet, but I will edit my post accordingly once I got it.
Related
The following code shows an <iframe sandbox... pointing to a page that opens a test websocket with a message on successful open. It works correctly on Chrome and Edge printing the It worked! message immediately.
On Firefox it fails with Uncaught DOMException: The operation is insecure. and no further reasoning.
<!DOCTYPE html>
<html lang="en">
<body>
<iframe
sandbox="allow-scripts"
src="https://firefox-wss-example.tiiny.site/"></iframe>
</body>
</html>
The linked websocket page source code is simply as follows:
<!DOCTYPE html>
<html lang="en">
<body>
<script>
const ws = new WebSocket('wss://demo.piesocket.com/v3/channel_1?notify_self');
ws.addEventListener('open', () => {
console.log('It worked!');
});
</script>
</body>
</html>
I have tried a mixture of wss:// and ws://, as well as permissive CORS headers, but none of my attempts fix the issue on Firefox despite having an appropriate setup. I am starting to think this is a Firefox 97 bug but am unsure of how to verify.
Why does this snippet work on most browsers but fails on Firefox?
I've been through this before, spend weeks on investigations, what I found is: Firefox runs sandboxed JavaScript under the blob:// protocol, and you're only allowed to upgrade to WebSocket from http:// and https:// connections. blob:// isn't either.
Although it's not very clear in their documentation, you may take a look into the websocket upgrade implementation as well as in this issue about CSP inheritance to understand it better, but it's basically the way Firefox have chosen to implement Sandboxing.
We never found a workaround for this, the only way was to drop the Sandboxing, or drop Firefox support for this specific feature.
On the other hand, Chromium based browsers saves the script file locally (I cannot say with 100% of confidence if it is stored in a temporary directory or virtual file system), and still uses the http:// protocol to access them, this way you can upgrade to ws:// or wss://. Those browsers may also inherit CSP, since they keeps the opener instance.
Edit: This problem is not tied to an specific Firefox version, it has been implemented this way for a long time. I has been 5 or 6 releases from the time I went into this problem, it still this way, and will probably stay this way, it's not considered a bug and it's not close to a highly requested feature.
i searched and tried many ways to get my video player working in chrome browsers.
even with a empty cache i get errors;
they worked until i switched video source to binary data. works fine in mozilla both in windows and in linux, without any errors, but not in others. I load this page within an iframe on my homepage.
video source comes from $_[GET] method and then attached to a data-src attribute.
/*plus other functions*/
video=player.querySelectorAll(".play-window")[0].getElementsByTagName("video")[0];
function is_playing(curTime){
return feedback;
};
function can_play(what){
if((!what.canplay||!what.canplaythrough)&&what.loaded==false&&what.src==''){
what.setAttribute('poster',src_err);total.innerHTML='src Error';
}else{is_playing(what.currentTime);
};`` };
window.addEventListener('DOMContentLoaded',function(){
video.src=src_arg_all[0].getAttribute('data-src');video.load();can_play(video);
});
/*plus other functions & event listeners*/
so far i've tested this problem on windows and linux based browsers.
nothing special.
if more details needed i will post them here. thanks for any help in advance.
`if(navigator.userAgent.toLowerCase().includes('chrome')){video.src=src_arg_all[0].getAttribute('data-src');};`
it was so easy it must have slipped my mind. ;-)
Summary
We cannot access camera from an iOS11 (public release) home screen web app using either WebRTC or the file input, details below. How can our users continue to access the camera please?
We are serving the web app page over https.
Update, April
The public release of iOS 11.3 seems to have fixed the issue and file input camera access is working again!
Update, March
As people here have said the Apple docs advise web app camera function is returning in 11.3 along with service workers. This is good but we are not sure yet if we want to everyone to to reinstall again until we can thoroughly test on 11.3GM.
Solution, November
We lost hope Apple want to fix this and moved forward. Modified our web app to remove the iOS "Add to home screen" function and asked affected users to remove any previous home screen icon.
Update, 6 December
iOS 11.2 and iOS 11.1.2 don't fix.
Workarounds, 21 September
Seems we could ask existing customers of the web app
not upgrade to iOS11 - good luck with that :)
take photos in iOS camera and then select them back in the web app
wait for next ios beta
reinstall as a Safari in-browser page (after we remove ATHS logic)
switch to Android
File Input
Our current production code uses a file input which has worked fine for years with iOS 10 and older. On iOS11 it works as a Safari tab but not from the home screen app. In the latter case the camera is opened and only a black screen is shown, hence it is unusable.
<meta name="apple-mobile-web-app-capable" content="yes">
...
<input type="file" accept="image/*">
WebRTC
Safari 11 on iOS11 offers WebRTC media capture which is great.
We can capture a camera image to canvas on a normal web page on desktop and mobile using navigator.mediaDevices.getUserMedia per the sample code linked here.
When we add the page to iPad or iPhone home screen, navigator.mediaDevices becomes undefined and unusable.
<meta name="apple-mobile-web-app-capable" content="yes">
...
// for some reason safari on mac can debug ios safari page but not ios home screen web apps
var d = 'typeof navigator : ' + typeof navigator; //object
d += 'typeof navigator.mediaDevices : ' + typeof navigator.mediaDevices; // undefined
// try alternates
d += 'typeof navigator.getUserMedia : ' + typeof navigator.getUserMedia; // undefined
d += 'typeof navigator.webkitGetUserMedia : ' + typeof navigator.webkitGetUserMedia; // undefined
status1.innerHTML = d;
We have quite similar problem. So far the only workaround we were able to do is to remove the meta tag for it to be "apple-mobile-web-app-capable" and let users to open it in Safari, where everything seems to work normally.
Update: While some earlier published changelogs and postings led me to believe that Web Apps using a manifest.json instead of apple-mobile-web-app-capable would finally have access to a proper WebRTC implementation, unfortunately this is not true, as others here have pointed out and testing has confirmed. Sad face.
Sorry for the inconveniences caused by this and let's hope that one lucky day in a galaxy far, far away Apple will finally give us camera access in views powered by (non-Safari) WebKit...
Yes, as others have mentioned, getUserMedia is only available directly in Safari but neither in a UIWebView nor WKWebView, so unfortunately your only choices are
removing <meta name="apple-mobile-web-app-capable" content="yes"> so your 'app' runs in a normal Safari tab, where getuserMedia is accessible
using a framework like Apache Cordova that grants you access to a device's camera in other ways.
Here's to hoping Apple removes this WebRTC restriction rather sooner than later...
Source:
For developers that use WebKit in their apps, RTCPeerConnection and RTCDataChannel are available in any web view, but access to the camera and microphone is currently limited to Safari.
Good news! The camera finally seems to be accessible from a home screen web app in the first iOS 11.3 beta.
I have made a repo with a few files, which demonstrate that it works:
https://github.com/joachimboggild/uploadtest
Steps to test:
Serve these files from a website accessible from your phone
Open the index.html in iOS Safari
Add to home screen
Open app from home screen. Now the web page is open in full screen, without navigation ui.
Press the file button to select an image from camera.
Now the camera should work normally and not be a black screen. This demonstrates that the functionality works again.
I must add that I use a plain field, not getUserMedia or somesuch. I do not know if that works.
Apparently is solved in "ios 13 beta 1":
https://twitter.com/ChromiumDev/status/1136541745158791168?s=09
Update 20/03/2020: https://twitter.com/firt/status/1241163092207243273?s=19
This seems to be working again in iOS 11.4 if you are using a file input field.
Recently I faced the same problem, the only solution I came up with was to open in the app in browser instead of the normal mode. But only on iOS!
The trick was to create 2 manifest.json files with different configurations.
The normal one for android and one for everything is Apple, manifest-ios.json, the only difference will be on the display property.
Step 1: Add id to the manifest link tag:
<link id="manifest" rel="manifest" href="manifest.json">
Step 2: Added this script to the bottom of the body:
<script>
let isIOS = /(ipad|iphone|ipod|mac)/g.test(navigator.userAgent.toLowerCase());
let manifest = document.getElementById("manifest");
if (isIOS)
manifest.href = 'manifest-ios.json'
</script>
Step 3: in the manifest-ios.json set the display to browser
{
"name": "APP",
"short_name": "app",
"theme_color": "#0F0",
"display": "browser", // <---- use this instead of standard
...
}
Another problem appears such as opening the app multiple times in multple tabs, sometimes.
But hope it helps you guys!
Currently i am developing application using phaser js.
Is this a browser compatibility issue or it is on the phaser js issue
where in the full screen api is not functioning
Here is code snippet that I use
if (phaser.scale.isFullScreen) {
phaser.scale.stopFullScreen();
} else {
phaser.scale.startFullScreen(false);
}
Similar Problem
So i tried what they suggest on the link
phaser.scale.compatibility.supportsFullScreen = true;
phaser.scale.startFullScreen(false, false);
Even the example of the phaser page it not functioning
Phaser Full Screen
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
startFullScreen # phaser.2.6.2.min.js:22
phaser.2.6.2.min.js:22
Phaser.ScaleManager: requestFullscreen failed or device does not
support the Fullscreen API fullScreenError # phaser.2.6.2.min.js:22
I test in on
Chrome 56.0.2924.87
Android 4.4.2
You can’t set the value of supportsFullScreen, that’s up to the user’s browser to decide.
Instead, query it and only start full screen if it is supported.
if (game.scale.compatibility.supportsFullScreen) {
game.scale.startFullscreen();
}
Tobe's answer is correct, but the error message also points out you need to trigger it from an event:
"API can only be initiated by a user gesture."
This may help others that stumble upon this error. Make sure you only call startFullScreen on a user tap.
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/