Question

我正在尝试在Angular中进行一些基本的视频流工作。我的代码如下。挑战是我不断得到错误，并说... 错误错误：未捕获（承诺）：TypeError：无法读取未定义的属性“视频” TypeError：无法读取未定义的属性“视频”

任何建议将不胜感激。

import {
  Component,
  OnInit,
  ViewChild,
  ElementRef
} from '@angular/core';


@Component({
  selector: 'app-scanner',
  templateUrl: './scanner.component.html',
  styleUrls: ['./scanner.component.css']
})
export class ScannerComponent implements OnInit {
  @ViewChild('video') video: HTMLMediaElement;

  constructor() {}

  ngOnInit() {
    this.cameraCheck();
  }



  cameraCheck() {
    navigator.mediaDevices
      .getUserMedia({
        video: {
          facingMode: 'environment'
        }
      })
      .then(function(stream) {
        this.video.srcObject = stream;
        this.video.setAttribute('playsinline', 'true'); // required to tell iOS safari we don't want fullscreen
        this.video.play();
      });
  }
}

<div>
  <video #video></video>
</div>

Answer 1

在function(stream)的Promise句柄中，新的getUserMedia似乎没有获得正确的this引用。因此，错误。将其更改为使用箭头功能应该可以解决该问题。

示例：

cameraCheck() {
    navigator.mediaDevices
      .getUserMedia({
        video: {
          facingMode: 'environment'
        }
      })
      .then((stream) => {
        this.video.srcObject = stream;
        this.video.setAttribute('playsinline', 'true'); // required to tell iOS safari we don't want fullscreen
        this.video.play();
      });
  }
}

角度视频-TypeError问题

1 个答案: