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.
Related
This is the code I used in the index page. I want to let users record a video using their webcam. When I run the app, all I see is space where the video recorder is supposed to be and the stop button. When I do "inspect source" and hover over the area where the recorder is supposed to be, it gets highlighter, that means its their, I just cant see it. Also there is an error shown in the inspect source code which is shown and the code is shown below that.
<script type="text/javascript">
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
var video = document.querySelector('video');
var cameraStream = '';
if (navigator.getUserMedia) {
navigator.getUserMedia(
{audio: true, video: true}
function(stream)
{
cameraStream = Stream;
video.src = window.URL.createObjectURL(stream);
}
function()
{
document.writeln("problem")
}
);
}
else
{
document.writeln("not support");
}
document.querySelector('#stopbt').addEventListener(
'click',
function(e)
{
video.src="";
cameraStream.stop();
});
</script>
You need a , in between the } and { (in between lines 64 and 65)
Sorry not a semicolon
Try refreshing because the screenshot has an error but it is different code than the code in the question. The code in the question should work because the user friendly description of the error is the correct error that would show in what the code is.
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 am working on implementing getUserMedia for audio/video and then having it saved via local storage through HTML5 api. I have two issues.
The first issue is that when the audio connects it echos my voice very faintly and has a constant static sound (tested in firefox). Is there any known issues with this, I was unable to find an answer of any sort.
As well, is there documentation stopping and putting the mediaStream file into something to be saved via local storage or through ajax/php or anything like that? I am a little lost on how to stop and then keep the file.
MY JavaScript code and HTML code is below... THANK YOU!
<section>
<!-- <audio controls autoplay></audio> -->
<video controls autoplay></video>
<input id="startRecording" type="button" value="Start Recording"/>
<input id="stopRecording" type="button" value="Stop Recording"/>
</section>
window.onload = function() {
function hasGetUserMedia() {
//Note: opera is unprefixed
return !!(navigator.hasGetUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
} //Check for Get User Media in browsers
function startRecording() {
navigator.getUserMedia({audio: true, video: true},function(stream) {audio.src = window.URL.createObjectURL(stream); },onFail);
}
function stopRecording() {
var audio = document.querySelector('video');
audio.src = "";Q
}
var onFail = function(e) {
console.log("ERROR");
}
var audio = document.querySelector('video');
if (hasGetUserMedia()) {
//AWESOME! Do whatever needs to be done
window.URL = (window.URL || window.webkitURL || window.webkitURL || window.mozURL || window.msURL);
navigator.getUserMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia );
var startRecord = document.getElementById('startRecording');
var endRecord = document.getElementById('stopRecording');
startRecord.onclick = startRecording;
endRecord.onclick = stopRecording;
} else {
alert("FAIL");
//Put in fallback for flash/silverlight?
} //Check for getUserMedia()
} //load this stuff onload
It is currently possible to capture video indirectly through the canvas, but the Mediastream Recorder API isn't implemented yet. So sound is going to be hard anyway.
As for the echo's, that is very well possible. See:
https://hacks.mozilla.org/2013/06/webrtc-comes-to-firefox/
So I'm afraid you will have to wait a bit longer still.
after a couple of hours of struggling here I am. I have the following code, which apparently should just start my webcam and prompt the stream on the webpage:
<!doctype html>
<html>
<head>
<title>HTML5 Webcam Test</title>
</head>
<body>
<video id="sourcevid" autoplay>Put your fallback message here.</video>
<div id="errorMessage"></div>
<script>
video = document.getElementById('sourcevid');
navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia;
window.URL = window.URL || window.webkitURL;
function gotStream(stream) {
if (window.URL) {
video.src = window.URL.createObjectURL(stream);
} else {
video.src = stream; // Opera.
}
video.onerror = function(e) {
stream.stop();
};
stream.onended = noStream;
}
function noStream(e) {
var msg = 'No camera available.';
if (e.code == 1) {
msg = 'User denied access to use camera.';
}
document.getElementById('errorMessage').textContent = msg;
}
navigator.webkitGetUserMedia({video: true}, gotStream, noStream);
</script>
</body>
</html>
No errors in the console, but no webcam stream either. Just the "User denied access to use camera.".
I tried another example, too long to show, but again apparently as soon as I try to run the page the stream falls into the .onended function:
function gotStream(stream) {
video.src = URL.createObjectURL(stream);
video.onerror = function () {
stream.stop();
};
stream.onended = noStream;
[...]
Where noStream is a simple function that prints something:
function noStream() {
document.getElementById('errorMessage').textContent = 'No camera available.';
}
So basically when I'm running the second example I'm shown the "No camera available" on the webpage.
I'm running on Chrome Version 22.0.1229.94, I saw somewhere that I needed to enable some flags, but I couldn't find them in my chrome://flags; the flags' name were Enable MediaStream and Enable PeerConnection, but in my version I only have the second one, which I enabled.
Any thoughts? Is the API I'm using old by any means? Can somebody point me to some working example?
Thanks
According to http://www.webrtc.org/running-the-demos the getUserMedia API is available on stable version as of Chrome 21 without the need to use any flag.
I think the error happens because you are trying to instantiate the stream without to define the url stream properly. Consider that you need to access the url stream differently in Chrome and Opera.
I would create the structure of your code as something like below:
function gotStream(stream) {
if (window.URL) {
video.src = window.URL.createObjectURL(stream) || stream;
video.play();
} else {
video.src = stream || stream; // Opera.
video.play();
}
video.onerror = function(e) {
stream.stop();
};
stream.onended = noStream;
}
function noStream(e) {
var msg = 'No camera available.';
if (e.code == 1) {
msg = 'User denied access to use camera.';
}
document.getElementById('errorMessage').textContent = msg;
}
var options = {video: true, toString: function(){return 'video';}};
navigator.getUserMedia(options, gotStream, noStream);
EDIT:
You need to replace the source video element with the media stream. Edited the code above.
video = document.getElementById('sourcevid');
I recommend for reading these two articles:
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
http://dev.opera.com/articles/view/playing-with-html5-video-and-getusermedia-support/
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>