Angular 中的视频 - TypeError 问题

Question

我正在尝试在 Angular 中做一些基本的视频流工作。我的代码如下。挑战是我不断收到错误提示... 错误错误：未捕获（承诺）：TypeError：无法读取未定义的属性 'video' 类型错误：无法读取未定义的属性 'video'

如有任何建议，我们将不胜感激。

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

getUserMedia 的承诺句柄中的新 function(stream) 似乎没有得到正确的 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();
      });
  }
}

Angular 中的视频 - TypeError 问题

Video in Angular - TypeError Issue

html5-video

typescript

angular