Instascan不在js上工作，显示“无法访问视频流(TypeError)”

Question

我希望我的网站扫描QR视频流，我使用了code.So，但它显示错误“无法访问视频流(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提到了Note: Chrome requires HTTPS when using the WebRTC API. Any pages using this library should be served over HTTPS.，您可能想要查看此stackoverflow answer，它讨论了如何将HTTPS视为安全的HTTPS，以便在影响您的设置的情况下帮助测试。