javascript - Angular5 Instascan - 打开相机不工作 <视频>

Question

Angular5 - Instascan - 显示相机 View (视频标签)不起作用。但我的相机是打开的。

<小时/>

app.component.ts

constructor(){    
this.Instascan= require('instascan'); 

let scanner = new this.Instascan.Scanner({ video: document.getElementById("preview") });

scanner.addListener('scan', function (content) {
  console.log(content);
});
this.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);
});
}

app.component.html

<video id="preview"></video>

Instascan --- https://github.com/schmich/instascan

Answer 1

let scanner = new this.Instascan.Scanner({ video: document.getElementById("preview") });

问题是，当 View 尚未初始化时，您正在构造函数中执行上述代码。 document.getElementById("preview") 将返回 null，因为此时没有找到任何元素。因此，您尝试使用它的东西从未正确初始化。

您应该在 Angular 的 AfterViewInit Hook 中运行该代码。另外，您应该使用 ViewChild 装饰器来获取 ElementRef，而不是使用 document。像您在这里所做的那样访问 DOM 是不正确的做法。