Webcam Video Stream Working in Chrome but not Firefox

Question

I've got a tiny little issue here Oo 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>

Answer 1

I'm pretty sure, that you need to start the video in firefox by calling the play method, after the loadstart event:

$(function () {
    navigator.getUserMedia(

    // constraints
    {
        video: true,
        audio: false
    },

    // successCallback
    function (localMediaStream) {
        var $video = $('video');

        $video.on('loadstart', function () {
            $video.play();
        });

        $video.prop('src', URL.createObjectURL(localMediaStream));
        //or use $video.prop('srcObject', localMediaStream);
    },

    // errorCallback
    function (err) {
        alert('you need to give us access to your webcam for this. '+err.name);
    });
});

Here is a simple demo .

Answer 2

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

Webcam Video Stream Working in Chrome but not Firefox

Question

2 answers

solution1
0 2014-08-13 12:08:29

solution2
0 ACCPTED 2014-10-17 06:48:45

Webcam Video Stream Working in Chrome but not Firefox

Question

2 answers

solution1 0 2014-08-13 12:08:29

solution2 0 ACCPTED 2014-10-17 06:48:45

solution1
0 2014-08-13 12:08:29

solution2
0 ACCPTED 2014-10-17 06:48:45