Question

我目前正在尝试创建网络DataMatrix扫描仪。可悲的是我还没有使用Javascript之类的东西，所以我的知识非常有限。我希望你们能为我指明正确的方向。

我的HTML / Javascript如下：

<!DOCTYPE html>
<link href="Content/Scanner.css" rel="stylesheet" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <img src="....." class="HeaderLogo" />
    <hr class="HeaderLogoUnderline" />
    <br />
    <video id="video" class="screen" autoplay></video>
    <br />
    <input type="button" id="btn" value="Start/Stop" class="StartStopButton" onclick="startScanner()"/>
    <br />
    <br />
    <div id="console" class="console">
        <textarea class="ScrollableTextbox" name="note" id="note"></textarea>
    </div>


    <script>
        var _scannerIsRunning = false;

        function startScanner() {
            var targ = document.getElementById("note");
            targ.value += '\n' + 'Started: startScanner().';

            video = document.getElementById('video');
            targ.value += '\n' + 'Found Video Tag.';
            video.style.width = document.width + 'px';
            video.style.height = document.height + 'px';
            video.setAttribute('autoplay', '');
            video.setAttribute('muted', '');
            video.setAttribute('playsinline', '');
            targ.value += '\n' + 'Video Tag configured.';

            var constraints = {
                audio: false,
                video: {
                    width: 480,
                    height: 320,
                    facingMode: "environment"
                }
            }
            targ.value += '\n' + 'Constraints set.';

            navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
                video.srcObject = stream;
                video.play();
                targ.value += '\n' + 'VideoStream started.';
            });
        }
    </script>
</body>
</html>

当我测试页面时，它可以在Edge中完美运行。任何其他浏览器也会请求使用摄像头的许可，但不会在视频元素中显示任何视频流（尽管浏览器清楚地显示了摄像头正在运行。而且，我的网络摄像头旁边的LED也会亮起）。此外，在此行之后：

video.srcObject = stream;

如果检查video.srcObject对象，我可以观察到流上升的持续时间。

这一切让我觉得这只是显示流的问题？

任何帮助将不胜感激。

非常感谢。

UserMedia API-显示视频

0 个答案: