I have a web page that requests use of the microphone. I understand that getUserMedia() has little or no support for mobile browsers but i'm trying to figure out a way of letting the viewer know that they need to visit the site on a supported browser. I'm trying not to use screensize media queries as support my slowly come in.
var onSuccess = function (stream) {
alert('success');
};
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
var constraints = {
video: false,
audio: true
};
if (navigator.getUserMedia) {
navigator.getUserMedia (
constraints,
onSuccess,
function (error) {
alert("Error: you need to allow access to use the microphone.",error)
});
};
It's strange because the page loads fine as if getUserMedia() is available but no "allow access" message pops up?
You should need to alert if there's no getUserMedia also:
var onSuccess = function(stream) {
alert('Success!');
}
var onError = function(error) {
alert('Error :(');
}
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({ video: false, audio: true }, onSuccess, onError);
} else {
onError();
}
Also take a look to MediaDevices.getUserMedia
Related
I'm trying to use the getUserMedia method to access my webcam and track my face with clmtrackr (https://github.com/auduno/clmtrackr).
Some weeks ago it was working but since Chrome update to v50 I encounter issues, it uses the replacement video instead of calling my webcam.
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
// check for camerasupport
if (navigator.getUserMedia) {
var videoSelector = {video : true};
if (window.navigator.appVersion.match(/Chrome\/(.*?) /)) {
var chromeVersion = parseInt(window.navigator.appVersion.match(/Chrome\/(\d+)\./)[1], 10);
if (chromeVersion < 20) {
videoSelector = "video";
}
};
navigator.getUserMedia(videoSelector, function( stream ) {
if (video.mozCaptureStream) {
video.mozSrcObject = stream;
} else {
video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
}
video.play();
}, function() {
//it uses this alt video
insertAltVideo(video);
alert("There was some problem trying to fetch video from your webcam, using a fallback video instead.");
});
} else {
insertAltVideo(video);
alert("Your browser does not seem to support getUserMedia, using a fallback video instead.");
}
PS : It works as I want on Firefox
Thanks in advance
navigator.getUserMedia no longer works in Chrome (it returns undefined), use the newer MediaDevices interface:
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
var videoTracks = stream.getVideoTracks();
console.log('Got stream with constraints:', constraints);
console.log('Using video device: ' + videoTracks[0].label);
stream.onended = function() {
console.log('Stream ended');
};
window.stream = stream; // make variable available to console
video.srcObject = stream;
})
.catch(function(error) {
// ...
}
See more:
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en
https://developers.google.com/web/updates/2015/10/media-devices?hl=en
Is there a way in javascript to check if Browser(Any Browser) is waiting for user to Allow permission for Microphone or Camera?
Note:- Based on this, I want to determine if media permission was already saved. i.e. if permission is saved then the popup will not appear.
EDIT
MEDIA = ( navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia ||
navigator.getUserMedia );
get_user_media: function() {
jQuery("instruction_image_id").show();
(MEDIA.bind(navigator))(
{audio: true, video: false},
media_success(),
media_error()
);
}
media_success: function() {
jQuery("instruction_image_id").hide();
}
EDIT
Note:- I need a Cross Browser solution. THIS(Marked as duplicate) thread's solution works well only with Chrome.
The time between waiting can be checked here, see start and end of permission:
// Start the permission.
navigator.getUserMedia (
// constraints
{
video: true,
audio: true
},
// successCallback
function(localMediaStream) {
// End the permission
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata = function(e) {
// Do something with the video here.
};
},
// errorCallback
function(err) {
if(err === PERMISSION_DENIED) {
// Explain why you need permission and how to update the permission setting
}
}
);
I have an odd problem with code that works in Chrome, but not Firefox. For whatever reason, it says that the variable (success) is undefined, even though it is clearly defined before the function is ever called. Take a look:
createRoom.addEventListener('click',function(e){
e.preventDefault();
var success = function(myStream){
ownVideo.src = URL.createObjectURL(myStream);
// create a room
WebRTC.createRoom();
};
navigator.getUserMedia({audio: true, video: true}, gotStream, gotError);
});
After success is defined, I run getUserMedia which, upon running successfully will run gotStream, which will then run success. Why won't Firefox accept the definition of success? Halp.
according to mozila,
// you code should be
navigator.getUserMedia({audio: true, video: true}, success, gotError);
may be, function gotStream is running for chrome.
here is the running sample from Mozila's reference page :
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if (navigator.getUserMedia) {
navigator.getUserMedia (
// constraints
{
video: true,
audio: true
},
// successCallback
function(localMediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
// Do something with the video here, e.g. video.play()
},
// errorCallback
function(err) {
console.log("The following error occured: " + err);
}
);
} else {
console.log("getUserMedia not supported");
}
I making a web application that need to record stream from the pc/mobile mic/camera using java script and html5(no flash). how i can do it?
There are two methods, getusermedia and the legacy method using an input, which is what ios6 allows:
Old way:
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">
Current way:
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
var video = document.querySelector('video');
if (navigator.getUserMedia) {
navigator.getUserMedia({audio: true, video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
}, onFailSoHard);
} else {
video.src = 'somevideo.webm'; // fallback.
}
These samples were copied from here. HTML5Rocks has many working samples as well.
navigator.getUserMedia ( constraints, successCallback, errorCallback );
Short description with example
API
Supported browsers
I can't display the video stream in Google Chrome (v21)
Code
<html>
<head>
<script>
window.addEventListener('DOMContentLoaded', function() {
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
if(navigator.getUserMedia) {
navigator.getUserMedia({video: true, audio: true}, function(stream) {
var video = document.getElementById('sourcevid');
video.src = stream;
}, function(error) {
console.error(error.code);
});
} else {
console.log('Not supported in this browser.');
}
}, false);
</script>
</head>
<body>
<video id="sourcevid" autoplay>Put your fallback message here.</video>
</body>
</html>
Please help me understand where the problem is.
I had the same problem and I fixed it by calling the play method on the video element. Even if you add the autoplay attribute, it won't work. My best guess for that is that at the moment of loading the video tag the source is empty so it can't start.
navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia;
var success = function(stream){
var video = document.getElementById('myVideo');
video.src = webkitURL.createObjectURL(stream);
//Even if autoplay is true you need to call the play method
video.play();
}
var error = function(err){
console.log(err)
}
navigator.getUserMedia({video:true, audio:true}, success, error);
This won't work unless you have the flag for Chrome Enable PeerConnection enabled...
1) Go to the web address about:flags in Chrome
2) Find Enable PeerConnection
3) Enable it
4) Restart Chrome
5) ???
6) Profit...?
I got similar issue but it is just resolved by adding source with blank initially.
<video id="sourcevid" src="" autoplay>Put your fallback message here.</video>