Angular5 Instascan -打开相机不工作<video>

Question

Angular5 - Instascan -显示摄像机视图(视频标签)不工作。但我的相机开着。

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") });

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

您应该在角的AfterViewInit钩子中运行该代码。另外，您应该使用ViewChild装饰器来获取ElementRef，而不是使用document。像您在这里所做的那样访问DOM是违反良好实践的。