Question

我一直在尝试为网络摄像头可视化创建一个角度组件，并且相机正常工作，但是当我尝试使用网络摄像头读取hiro标记以显示3d界面时，它没有出现，我没有知道是html还是打字稿错误，无论如何，我都要发布两个文件的代码。如果有人可以帮助我，将对我有很大帮助，建议和反馈总是很好的。 PS：我使用角度的网络摄像头库打开相机 camera.component.html的代码

<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/2.0.5/aframe/build/aframe-ar.js"></script>
<div id="app">
  <div>
    <webcam>
    <video #video id="video" width="640" height="480" autoplay>
      <a-scene embedded arjs>
        <a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
        <a-marker-camera preset='hiro'></a-marker-camera>
      </a-scene>
    </video>
  </webcam>
</div>
  <div><button mat-button id="snap" (click)="capture()">Snap Photo</button></div>
  <canvas #canvas id="canvas" width="640" height="480"></canvas>
  <ul>
      <li *ngFor="let c of captures">
          <img src="{{ c }}" height="50" />
      </li>
  </ul>
</div>

这是Camera.component.ts的代码

import { ViewChild } from '@angular/core';
import { ElementRef } from '@angular/core';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-camera',
  templateUrl: './camera.component.html',
  styleUrls: ['./camera.component.css']
})
export class CameraComponent implements OnInit {

  @ViewChild("video")
  public video: ElementRef;

  @ViewChild("canvas")
  public canvas: ElementRef;

  public captures: Array<any>;

  public constructor() {
      this.captures = [];
  }

  public ngOnInit() { }

  public ngAfterViewInit() {
      if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
              this.video.nativeElement.src = window.URL.createObjectURL(stream);
              this.video.nativeElement.play();
          });
      }
  }

  public capture() {
      var context = this.canvas.nativeElement.getContext("2d").drawImage(this.video.nativeElement, 0, 0, 640, 480);
      this.captures.push(this.canvas.nativeElement.toDataURL("image/png"));
  }

}

Angle的网络摄像头模块未显示Aframe的3D模型

0 个答案: