Search code examples
htmlhtml5-videowebcam

Webcam Video Stream Working in Chrome but not Firefox


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>

Solution

  • 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 ;)