网络摄像头视频流在 Chrome 而不是 Firefox 中工作答案

【问题标题】：Webcam Video Stream Working in Chrome but not Firefox网络摄像头视频流在 Chrome 而不是 Firefox 中工作
【发布时间】：2014-10-06 11:37:07
【问题描述】：

我这里有个小问题 O.o 我的网络摄像头视频流显示在网页上……唯一的问题是它只能在 Chrome 中使用。当我使用 Firefox 时，它会请求共享摄像头的权限，一旦接受，网络摄像头上的 LED 就会亮起，但我的视频元素仍然是空的：/ 我目前正在 Firefox 31 和 Chrome 28 上进行测试。

任何想法或有用的提示将不胜感激；）谢谢:)

以下是我用于测试的代码：

<!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>

【问题讨论】：

标签： html html5-video webcam

【解决方案1】：

在做了一段时间的 MIA 之后，我又回到这个问题上，发现这不是代码问题 >。

这似乎是我的网络摄像头驱动程序或 Windows 8 的问题或两者兼而有之，因为我的代码在使用默认 Windows 驱动程序的 Windows 7 机器上完美运行，但仍然在 Firefox 31 上运行。

无论如何，感谢 alexander farkas 的帮助。我用你的一些代码来调整我自己的；）

【讨论】：

【解决方案2】：

我很确定，您需要在 loadstart 事件之后通过调用 play 方法在 firefox 中启动视频：

$(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);
    });
});

这是simple demo。

【讨论】：