Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angular5 – ngx-webcam用于特定视图和分量角6大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我在我的应用程序中使用ngx-webcam来使用网络摄像头捕获图像.我在app.module.ts中有导入库,也在我的视图中,但它给了我这个错误
‘webcam’不是一个已知的元素.如果在app.component html中使用网络摄像头标签,它工作正常,但我想在单独的视图中使用它.这是我的代码

import {WebcamImage} from 'ngx-webcam';

export class CreateMemberComponent implements OnInit {
 private trigger: Subject<void> = new Subject<void>();

 // latest snapshot
 public webcamImage: WebcamImage = null;
public triggerSnapshot(): void {
    this.seconds = 3;
    this.trigger.next();
    this.seconds = null;
  }

  public handleImage(webcamImage: WebcamImage): void {
    console.log('received webcam image',webcamImage);
    this.webcamImage = webcamImage;
  }

  public get triggerObservable(): Observable<void> {
    return this.trigger.asObservable();
  }

这是我的HTML代码

<div class="col-sm-4">
    <div style="text-align:center">
        <div>
          <p>{{seconds}}</p>
          <webcam [trigger]="triggerObservable" (imageCapture)="handleImage($event)"></webcam>
          <br/>
          <button id="snapshotBtn" (click)="triggerSnapshot();">Take A Snapshot</button>
        </div>
      </div>
      <div class="snapshot" *ngIf="webcamImage">
        <h2>Nice one!</h2>
        <img [src]="webcamImage.imageAsDataUrl"/>
      </div>
</div>

请参阅附图以供参考.

angular5 – ngx-webcam用于特定视图和分量角6

解决方法

由于你有一个名为member-profile的模块,你应该像app.module一样导入它的member-profile模块.如果从app.module中删除它,它仍然可以在与member-profile模块关联的组件中工作.

import {WebcamModule} from 'ngx-webcam';

@NgModule({
  imports: [
    WebcamModule
  ],declarations: [CreateMemberComponent,UpdateMemberComponent,MembersListComponent]
})
export class MembersProfileModule { }

这将为你做到这一点.

大佬总结

以上是大佬教程为你收集整理的angular5 – ngx-webcam用于特定视图和分量角6全部内容,希望文章能够帮你解决angular5 – ngx-webcam用于特定视图和分量角6所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: