Question

Angular5 - Instascan - 显示摄像机视图（视频标记）不工作。但我的相机是开着的。

app.component.ts

     <p class="UP"> Click Here For Closet Sub Menu</p>
        <p class="DOWN">Click Here For Open</p>

        <ul class="menu">
            <li><a href="#" class='toggle'>A</a>
                <ul class="submenu">
                    <li><a href="#">a 1</a></li>
                    <li><a href="#">a 2</a></li>
                    <li><a href="#">a 3</a></li>
                    <li><a href="#">a 4</a></li>
                </ul>
</li>

            <li><a href="#" class='toggle'>B</a>    <ul class="submenu">
                    <li><a href="#">b 1</a></li>
                    <li><a href="#">b 2</a></li>
                    <li><a href="#">b 3</a></li>
                    <li><a href="#">b 4</a></li>
                </ul></li>

            <li><a href="#" class='toggle'>C</a>    <ul class="submenu">
                    <li><a href="#">c 1</a></li>
                    <li><a href="#">c 2</a></li>
                    <li><a href="#">c 3</a></li>
                    <li><a href="#">c 4</a></li>
                </ul></li>

        </ul>

app.component.html

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

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

Answer 1

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

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

您应该在Angular的AfterViewInit挂钩中运行该代码。此外，您应该使用ViewChild装饰器来抓取ElementRef，而不是使用document。像你一样在这里访问DOM是违反良好做法的。

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

1 个答案: