Question

我希望我的网站扫描QR码。因此，我使用了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浏览器中，系统提示我向测试站点授予对摄像机的访问权限，该摄像机现在显示在allow的{{1}}列表中。

此外，Instascan ReadMe提到Chrome > Settings > Advanced > Privacy and Security > Site Settings > Camera，您可能需要检查一下stackoverflow answer，该讨论讨论如何将HTTP视为安全HTTPS，以帮助进行测试以防影响设置。 / p>

Instascan无法处理js，显示“无法访问视频流（TypeError）”

1 个答案: