Question

我在这里遇到一个小问题哦我在网页上显示了我的网络摄像头视频流......唯一的问题是它只适用于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>

Answer 1

我很确定，你需要在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。

Answer 2

在成为MIA一段时间并回到此问题后，我发现这不是代码问题＆gt;。＆lt;

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

无论如何，多亏了亚历山大·法卡斯的帮助。我用了一些代码来调整自己的代码;）

网络摄像头视频流在Chrome中运行，但不在Firefox中运行

2 个答案: