I've got a tiny little issue here O.o I've got my webcam video stream displaying on a webpage... only thing is it only works in Chrome. When I use Firefox it requests permission to share the camera and once accepted the LED on the webcam comes on but my video element remains empty :/ I'm currently testing on Firefox 31 and Chrome 28.
Any ideas or helpful hints would be greatly appreciated ;) Thanks :)
Below is my code used for testing:
<!DOCTYPE html>
<html>
<head>
<title>Web Cam Feed</title>
<style>
#container
{
margin: 0px auto;
width: 640px;
height: 480px;
border: 10px #333 solid;
}
#videoElement
{
width: 640px;
height: 480px;
background-color: #666;
}
</style>
</head>
<body>
<div id="container">
<video autoplay id="videoElement">
</video>
</div>
<script type="text/javascript">
var video = document.querySelector("video");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia)
{
navigator.getUserMedia(
{ video: true },
function (stream)
{
if (video.mozSrcObject !== undefined)
{
video.mozSrcObject = stream;
}
else
{
video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
};
},
function (err)
{
alert('Something broke');
});
}
else
{
alert('No User Media API');
}
</script>
</body>
</html>
After being MIA for a while and getting back into this issue I found that it's not a code issue >.<
It seems to be either my webcam drivers or an issue with Windows 8 or a combination of both because my code worked perfectly on a Windows 7 machine using default Windows drivers, but still on Firefox 31.
Anyways, thanks to alexander farkas for the help. I used some of your code to tweak my own ;)