javascript - Angular5 Instascan-打开相机无法正常工作<video>

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

最佳答案

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

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

您应该在Angular的AfterViewInit挂钩中运行该代码。另外，您应该使用ViewChild装饰器来获取ElementRef，而不要使用document。像您在此处那样访问DOM是违反最佳实践的。

关于javascript - Angular5 Instascan-打开相机无法正常工作<video>，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48220807/