WebRTC Webcam not working on Safari and Microsoft Edge - javascript

I want to access the webcam and audio device to record video using WebRTC. However, it's only working on Chrome and Firefox.
Interestingly, it's not working on Edge and Safari. It asks for camera use permission, when we grant permission, the camera doesn't load and I get the following error in console.
ERROR Message on Safari and Edge
navigator.getUserMedia error: ReferenceError
My Code looks like this
async init(constraints) {
try {
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
const stream = await navigator.mediaDevices.getUserMedia(constraints);
this.handleSuccess(stream);
} else {
this.setState({
error:
'Your Browser is not supported. Please use latest version of Chrome, Safari, Firefox or Edge.',
});
}
if (!MediaRecorder) {
this.setState({
error:
'Your Browser is not supported. Please use latest version of Chrome, Safari, Firefox or Edge.',
});
}
} catch (e) {
this.setState({
error:
'We could not find any audio/video recording device. Please make sure you have given permission to use webcam and microphone.',
});
console.error('navigator.getUserMedia error:', e.name);
}
}
Any suggestions to load the camera perfectly in all these browsers.

Looks like you are having the issue in the MS Edge legacy browser. Correct me if I am misunderstanding.
I try to test the official sample code in the MS Edge legacy browser (44.18362.449.0) and it works fine.
WebRTC samples getUserMedia
I suggest you can test this example in the MS Edge browser and let us know whether it worked or not.
If it works then you can modify your code based on the official sample from their Github page.
If you are using an older version of the MS Edge browser then I suggest you update with the latest version and again test the issue.

Related

Cannot record video+audio on iPhone Safari

I have used RecordRTC for capturing the video+audio from the browser.
For Android devices, it's working perfectly as expected. But in iPhone devices especially on the safari browser, it's not recording as expected.
Browser console produces the following error.
Your browser does not support Media Recorder API. Please try other modules e.g. WhammyRecorder or StereoAudioRecorder.
Could someone please help me out like:
Does Safari support basic video capturing?
It is better to use StereoAudioRecorder which is made in RecordRTC.js as Recorder for Safari.
This is the document of StereoAudioRecorder.
You're going to have to read this first :)
https://recordrtc.org/StereoAudioRecorder.html
const option = {
type: 'video',
recorderType: StereoAudioRecorder
};
const recorder = new RecordRTC(mic, options);
recorder.startRecording();
I hope this will help you.
https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
MediaRecorder was introduced in iOS14 (Safari 14), if you have an older version, this can be your problem.

getUserMedia not working for IOS, how to access microphone on IOS from website?

I have recently tried using the getUserMedia function from the navigator.mediaDevices.getUserMedia function. I am trying to access the microphone from a website that I created (www.speechbud.com) so that a speech to text transcription can be performed. This is working on PC and mobile(android) but doesn't seem to work for IOS. I have checked many previous articles and it says that from IOS 11 getUserMedia should work, however it is still not working. Is IOS still not compatible, and if that's the case, how am I supposed to access the microphone from a website?
I have checked previous articles and tried using different npm packages, with no luck.
getUserMedia({video: false, audio: true},function (err, stream) {
if (err) {
console.log('failed');
stream.end(); // end the stream
} else {
micStream.setStream(stream);
if (keepMic) {`enter code here`
preservedMicStream = micStream;
}
}
});
TLDR; I would like to basically be able to access the microphone from an IOS device upon a button click for live transcription.
THANKS!

NotReadableError: Failed to allocate videosource

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.

HTML 5 Geolocation in China

I'm using the following code in an application in order to retrieve the users location.
function getGeoCoords() {
var deferred = $.Deferred();
navigator.geolocation.getCurrentPosition(deferred.resolve, deferred.reject);
return deferred.promise();
}
This is used by the following:
return deferred.pipe(function() {
console.log('Getting user location. . .');
return getGeoCoords();
}).pipe(function (position)) {
. . .
This code has been tested and works well in all browsers, except Chrome.
It seems that it is also constrained to China. Other browsers tested there (even IE) worked without a hitch. But for some reason, I am unable to use the Geolocation API to retrieve the location of a user in China on Chrome.
Any thoughts?
take a look https://www.zhihu.com/question/20473051
in short, the reason is that the chrome needs to send the location infomation to a google server, but the server may be blocked in china
Six years later I still can't make this work in Chrome.
But there are working examples, so how do they do that?
Here's what my problem is in particular:
I'm in China and I need to make a website that displays a map with a "Get my location" button. To simplify, if I run the following code in debugger, in some environments it will not get my location. Can anyone tell me why?
navigator.geolocation.getCurrentPosition(success => console.log(success), err => console.error(err))
I can get the location in these environments:
My Macbook uses 4G from my phone (hotspot), Safari browser.
PC uses internet from LAN, Edge browser.
I CANNOT get the location in these environments:
My Macbook uses internet from LAN, Safari browser.
PC uses internet from LAN, Chrome version 68 as well as the Chinese QQ browser:
Error: {
code:2,
message:"Network location provider at 'https://www.googleapis.com/' : No response received."
}
PC uses internet from LAN, Chome 103 or Firefox: No success and no error received.
In all cases, location services are enabled and VPN is not used.
I know, googleapis.com is not available in China. But Baidu, Gaode Amap, or QQ Map should work on Chrome and they don't.

Detect Firefox MP4 support (Now Firefox has partial support)

I'm attempting to display a video in Firefox. The video has to be in MP4, converting the video isn't an option. However this will only work in some situations as Firefox relies on OS level support for MP4, rather than built in support.
It's ok that it won't always work, but I want to be able to detect when it will fail.
I've tried several existing solutions on StackOverflow ( How to check if the browser can play mp4 via html5 video tag? )
My current testing code reads:
var mp4Supported = (!!document.createElement('video').canPlayType('video/mp4; codecs=avc1.42E01E,mp4a.40.2'));
if (!mp4Supported) { console.log("MP4 not supported") } else { console.log("MP4 supported") };
However since Firefox now does (technically) support MP4, this seems to always return true, whether the video can be decoded or not.
Console output from the above on Firefox where there's no native support for MP4:
"MP4 supported"
Media resource <My resource URL> could not be decoded.
Does anyone know of a reliable way to detect successful running now that Firefox has partial support?

Categories