javascript - Instascan 无法处理 js，显示 "Cannot access video stream (TypeError)"

Question

我想让我的网站扫描二维码。所以，我使用了 instascan，但它显示错误“无法访问视频流 (TypeError)”。

我的代码在下面给出，即 app.js，我检查了我的相机并且已经使用了其他系统但没有工作

var app = new Vue({
  el: '#app',
  data: {
    scanner: null,
    activeCameraId: null,
    cameras: [],
    scans: []
  },
  mounted: function () {
    var self = this;
    self.scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5 });
    self.scanner.addListener('scan', function (content, image) {
      self.scans.unshift({ date: +(Date.now()), content: content });
      document.getElementById("val").value = content;    });
    Instascan.Camera.getCameras().then(function (cameras) {
      self.cameras = cameras;
      if (cameras.length > 1) {
        self.activeCameraId = cameras[1].id;
        self.scanner.start(cameras[1]);
      }
      else if (cameras.length > 0) {
        self.activeCameraId = cameras[0].id;
        self.scanner.start(cameras[0]);
      }
       else {
        console.error('No cameras found.');
      }
    }).catch(function (e) {
      console.error(e);
    });
  },
  methods: {
    formatName: function (name) {
      return name || '(unknown)';
    },
    selectCamera: function (camera) {
      this.activeCameraId = camera.id;
      this.scanner.start(camera);
    }
  }
});

这是控制台上的错误信息

app.js:24 Error: Cannot access video stream (TypeError).
    at new i (instascan.min.js:9)
    at Function.<anonymous> (instascan.min.js:9)
    at n (instascan.min.js:4)
    at Generator._invoke (instascan.min.js:4)
    at Generator.e.<computed> [as throw] (instascan.min.js:4)
    at n (instascan.min.js:4)
    at r (instascan.min.js:4)
    at instascan.min.js:4
(anonymous) @ app.js:24

下面是html文件

</div>
    <div id="app">
            <div class="preview-container">
        <video id="preview"></video>
      </div>
  </div>
        <div class="input-effect">
          <input  class="effect-17" type="text" id= "val" placeholder="Insert code">
        </div>

下面是css文件

#app {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  height: 500px;
  width:100%;
}
.preview-container {
  margin-top: 150px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-left:35%

 /*overflow: hidden;*/
}
input[type="text"]
{font: 40px/60px "Lato", Arial, sans-serif; 
color: #333; 
width: 150%; 
box-sizing: border-box; 
letter-spacing: 1px;
border-left: none;
border-right: none;
border-top:none;
border-bottom-color: grey;
background: #FFFAFA;
margin-top:150px;

}

.effect-17
{
  height:100px;
  margin-left:200px;
  width:70%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: flex;
  position: absolute;

}

我知道不需要 html 和 css 文件，但为了方便起见，我上传了它。

Answer 1

您是否能够授予浏览器权限(或浏览器提示您授予权限)以访问摄像头？例如，在 Chrome 中，系统提示我授予测试站点访问摄像头的权限，它现在显示在 Chrome > Settings > Advanced > Privacy and Security > Site Settings > Camera 中的 allow 列表中。

另外，Instascan ReadMe提到 注意:Chrome 在使用 WebRTC API 时需要 HTTPS。使用此库的任何页面都应通过 HTTPS 提供服务。 您可能需要查看此 stackoverflow answer讨论了如何将 HTTP 视为安全的 HTTPS 以帮助进行测试，以防影响您的设置。