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.
Related
I'm on localhost and trying to use the MediaDevices.getUserMedia method in Chrome. I receive the error as titled. I understand that in Chrome it is only possible to use this function with a secure origin and that localhost is considered a secure origin. Also, this works in Firefox.
This is how I'm using it as shown on the Google Developers website https://developers.google.com/web/updates/2015/10/media-devices?hl=en:
var constraints = window.constraints = {
audio: false,
video: true
};
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
callFactory.broadcastAssembly(stream);
...
});
On some latest browsers navigator.getUserMedia does not perform well. So, try using navigator.mediaDevices.getUserMedia. Or, better you check if navigator.mediaDevices.getUserMedia is available for the browser use navigator.mediaDevices.getUserMedia or else use navigator.getUserMedia.
navigator.getWebcam = (navigator.getUserMedia || navigator.webKitGetUserMedia || navigator.moxGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(function (stream) {
//Display the video stream in the video object
})
.catch(function (e) { logError(e.name + ": " + e.message); });
}
else {
navigator.getWebcam({ audio: true, video: true },
function (stream) {
//Display the video stream in the video object
},
function () { logError("Web cam is not accessible."); });
}
Hope this will solve your problem.
Try enabling: chrome://flags/#enable-experimental-web-platform-features
Worked for me in chromium
I too had the same problem in my chrome browser.
first check your phone is supported by testing it in https://test.webrtc.org/
if your phone passes all the cases, then check step 2
step 2:
If your hosting a webpage or running a third party webpage,see whether camera permissions are enabled on your phone.
Also the main issue is WEBRTC is not supported in HTTP site and it is supported only in HTTPS site
This is the https site which allows web
This is the http site which gives a error
I got stuck in the same issue. One solution is to follow and download the extension Web Server for Chrome shared in the comment above by #ellerynz, or
if you have python installed you could also do
python -m SimpleHTTPServer [port]
After you hit enter, you should see the following message:
Serving HTTP on 0.0.0.0 port 8000 ...
Open the browser and put
http://127.0.0.1:[port]
Have you tried to include adapter.js polyfill ? Check this page :
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Browser_compatibility
It looks like this or enabling chrome://flags/#enable-experimental-web-platform-features as per #Simon Malone's note, is needed for Chrome.
I was having this problem too and changing flags didn't seem to work. I came across this chrome extension — Web Server for Chrome in Google's WebRTC tutorial which seemed to do the trick.
Use navigator.getUserMedia() instead.
navigator.getUserMedia(constraints, successCallback, errorCallback);
I'm using the following code in an HTML5 page. When I run my page on Android and PC (chrome), the code works fine and I get the correct JavaScript alert(); but when I run the same page on an iOS device like iPhone or iPad, I don't get anything (no alert() at all).
This is my code:
navigator.getUserMedia = ( navigator.getUserMedia || // use the proper vendor prefix
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.getUserMedia({video: true}, function() {
alert('camera is supported in your browser');
}, function() {
alert('camera is not supported in your browser!');
});
Is there something that I'm missing?
Any help would be appreciated.
It will work in fall 2017, once iOS11 is released.
I'm rather new to the whole WebRTC thing, and I've been reading a ton of articles and about different APIs about how to handle video recording. It seems the more I read the more confusing the whole thing is. I know I can use solutions such as Nimbb, but I'd rather keep everything "in house", so to speak.
The way I've got the code right now, the page loads and the user clicks a button to determine the type of input (text or video). When the video button is clicked, the webcam is initialized and turned on to record. However, the stream from the webcam doesn't show up in the page itself. It seems this is because the src of the video is actually an object. The weird thing is that when I try to get more info about the object by logging to console, I only get an object attribute called currentTime. How does this object create the actual source for the video element? I've tried many different variations of the code below to no avail, so I'm just wondering what I'm doing wrong.
var playerId = 'cam-'+t+'-'+click[1]+'-'+click[2];
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
if(navigator.getUserMedia){
function onSuccess(stream){
var video = document.getElementById(playerId);
var vidSource;
if(window.webkitURL || window.URL){
vidSource = (window.webkitURL) ? window.webkitURL.createObjectURL(stream) : window.URL.createObjectURL(stream);
}else{
vidSource = stream;
}
video.autoplay = true;
video.src = vidSource;
}
function onError(e){
console.error('Error: ', e);
}
navigator.getUserMedia({video: true, audio: true}, onSuccess, onError);
}else{
//flash alternative
}
The webkit check actually was the problem as pointed out by mido22 in the comments
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.');
}
I am playing around with getUserMedia to gain access to the users microphone in Chrome(Version 28.0.1500.72 m). I am able to record and play back the users input when they use an internal microphone with internal speakers.
As soon as I plug in a usb microphone headset I am no longer able to record the users input. I have switched the device in the chrome setting under privacy and content settings. So chrome does see the newly plugged in microphone. I have restarted chrome and tried it again after plugging in the mic as well. Still no user input.
Thanks In Advance.
Below is the current code I am using.
window.AudioContext = window.AudioContext||window.webkitAudioContext;
var html5Recorder;
var audioContext = new AudioContext();
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if(navigator.getUserMedia){
navigator.getUserMedia({audio:true},handleAudioStream, audioError)
}else{
console.log('Use Flash')
}
function handleAudioStream(stream){
var mediaStream = audioContext.createMediaStreamSource(stream);
mediaStream.connect( audioContext.destination );
html5Recorder = new HTML5Recorder(mediaStream);
html5Recorder.stop();
html5Recorder.clear();
}
function audioError(error){
console.log(error);
}
function record(){
html5Recorder.record();
}
function stopRecording(){
html5Recorder.stop();
html5Recorder.exportWAV(function(e){
console.log(e);
console.log(window.URL.createObjectURL(e));
document.getElementById('audio1').src = window.URL.createObjectURL(e);
HTML5Recorder.forceDownload(e);
});
}
This was a bug in the current chrome build I was using (28). Chrome canary works fine.
Can you check the sampling rate on the two audio devices?
There is an existing bug that the non-default microphone only works if the sample rate is the same as the default microphone: https://code.google.com/p/chromium/issues/detail?id=164058.
Also, are you on OSX or Linux? The comments in the bug make it look like it should be fixed on Windows.
Try selecting the USB mic as the default one. Chrome does not mange audio devices and it always uses the default mic.