Question

我在最新的Chrome版本（78.0.3904.108）中使用Instascan库。我的HTML页面（index.html）具有非常基本的设置：

<head>
    <script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script> <!--Qr code scanner-->
    <script type="text/javascript" src="user.js"></script>
</head>
<body>
    <p><button id="btn_start" onclick="start()">Start</button></p>
    <video id="preview"></video>
</body>

还有我的JavaScript（user.js）

var scanner = new Instascan.Scanner({ video: document.getElementById('preview') });

function start() {
    Instascan.Camera.getCameras()
        .then((cameras) => {
            scanner.start(cameras[0]);
        })
}

当我按下开始键时，我可以在调试器中看到scanner.start是由我的网络摄像头执行的。控制台中未显示任何错误。但是，视频元素什么也没显示。

如何使视频元素显示我的摄像头看到的内容？

Answer 1

请找到以下工作示例，您必须将此代码粘贴到工作空间中才能看到此工作：

 let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
      scanner.addListener('scan', function (content) {
        console.log(content);
      });
      Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
          scanner.start(cameras[0]);
        } else {
          console.error('No cameras found.');
        }
      }).catch(function (e) {
        console.error(e);
      });

<script src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
<video id="preview"></video>

Instascan没有引发任何错误，但不显示视频预览

1 个答案: