Question

我有一个非常简单的JavaScript，可以将用户网络摄像头中的内容流式传输到HTML5视频元素。 在我今天开始之前它已经完美运行了。我试图在同一页面添加一个canvas元素，并在这样做时为视频元素添加了宽度和高度规范，以便视频和画布能够大小相同。不知怎的，这打破了网络摄像头/视频，所以我还原了变化......它仍然破碎了。

到目前为止，我已尝试清除所有浏览器数据（我在Chrome中工作），重新启动浏览器，重新启动计算机，以及重新（并重新发送和重新）上传文件，无济于事。我根本没有触及javascript，只是它上面的html5，所以我怀疑这是一个html5问题，但我是javascript中的初学者，所以我知道什么？由于我的经验不足，刚刚开始工作需要一段时间，现在我已经对这一发展进行了进一步的退步。我做了什么，我该如何解决？

这里是代码（注意：使用Modernizr来处理getUserMedia的跨平台内容）：

<div id="webapp_content">

    <h4>Webcam Test</h4>

    <p>
    <div id="video_container">
        <video id="video_element" autoplay="true"></video>
    </div>

    <script>
    var video = document.querySelector('#video_element');

    if (Modernizr.getusermedia) {
        var gUM = Modernizr.prefixed('getUserMedia', navigator);
        gUM({video: true}, videoInit, videoError);
    }

    function videoInit(stream) {
        video.src = window.URL.createObjectURL(stream);
    }

    function videoError(e) {
        alert('Error! getUserMedia not available!', e);
    };

    </script>

    <p> 
</div>

Answer 1

问题实际上是Modernizr脚本：显然从现在到我第一次开始使用它之间的某个时间，Modernizr人员将其代码的getusermedia部分设为非核心，因此未包含在他们的标准下载中。

我不确定这是否是原始问题，或者我下载最新版本的Modernizr是否在原始版本之上创建了另一个问题，但从等式中删除Modernizr解决了这个问题。我现在又有一个工作的网络摄像头流 - 虽然只在Chrome中。我以后会担心跨平台的问题。

HTML5网络摄像头流以某种方式破坏了

1 个答案: