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");
}
Related
I am trying to call a function from within navigator.mediaDevices.GetUserMedia and it ain't working.
This is what I have
navigator.mediaDevices.getUserMedia({audio: true}, startUserMedia, function(e) {
__log('No live audio input: ' + e);
});
This is my function
function startUserMedia(stream) {
var input = audio_context.createMediaStreamSource(stream);
__log('Media stream created.' );
__log("input sample rate " +input.context.sampleRate);
__log('Input connected to audio context destination.');
recorder = new Recorder(input, {
numChannels: 1
});
__log('Recorder initialised.');
}
I'm trying to update this call, since before it was:
navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
__log('No live audio input: ' + e);
});
and guess what, that works. But this new "mediaDevices", I can't make it work somehow. It says:
Uncaught TypeError: recorder is undefined
It is not making the call to the "startUserMedia" function. If I add a "alert("hello")" inside the function, it doesn't executes.
This works though:
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
startUserMedia();
}).catch(function(err) {});
but it doesn't recognizes my recorder
recorder = new Recorder(input, { numChannels: 1 });
Anyone can lend a hand?
Found the answer thanks to Derek there.
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
audio_context = new AudioContext;
__log('Audio context set up.');
if (navigator.mediaDevices) { // if navigator.mediaDevices exists, use it
navigator.mediaDevices.getUserMedia({audio: true}).then(startUserMedia, function(e) {
__log('No live audio input: ' + e);
});
} else {
navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
__log('No live audio input: ' + e);
});
}
This way I can check both if the browser supports getUserMedia or not. Either way, it fires the prompt that asks the user for the browser's media permission.
The StartUserMedia function gets called in both instances.
i have a webcam script but it doesnt seem to work i also dont get any console errors can some one please help me to see what m i doing wrong
Photo.js
(function(){
var video = document.getElementById('video'),
vendorURL = window.URL || window.webkitURL;
navigator.getMedia = navigator.getUserMedia ||
navigator.WebKitGetUserMedia||
navigator.msGetUserMedia;
navigator.getMedia({
video:true,
audio:false
}, function(stream) {
video.src = vendorURL.createObjectURL(stream);
video.play();
}, function(error) {
//an error occured
//error.code
});
});
index.html
<div class="booth">
<video id="video" width="400" height="300"></video>
</div><!-- end booth -->
and here is a fiddle Fiddle
This tutorial is script is taken from
https://youtu.be/gA_HJMd7uvQ?t=456
There are two issues at javascript at Question. 1) The IIFE is not actually called; you can call the immediately invoked function expression by including opening and closing parentheses () before closing parenthesis ) 2) w and k at navigator.WebKitGetUserMedia should be lowercase characters navigator.webkitGetUserMedia
(function() {
var video = document.getElementById('video'),
vendorURL = window.URL || window.webkitURL;
navigator.getMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || /* substituted `w` for `W`, `k` for `K` */
navigator.msGetUserMedia;
navigator.getMedia({
video: true,
audio: false
}, function(stream) {
video.src = vendorURL.createObjectURL(stream);
video.play();
}, function(error) {
console.log(error)
//an error occured
//error.code
});
}()); // added `()` before closing `)`
jsfiddle https://fiddle.jshell.net/heLs62sg/1/
It looks like you have wrapped this code in a closure which wont run unless you specifically call it from somewhere.
(function(){
// Code will not execute automatically
});
Note the extra parenthesis on the final line in the following example:
(function(){
// Code will execute automatically
})();
Alternatively, you could assign your code to a variable and manually call it, eg:
var func = (function(){
// Some Code in here
});
func();
I suspect that this is the root cause of your problem, but I cant say for sure that your webcam code works but this should be a step in the right direction.
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 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