Видео в формате Angular - ошибка TypeError

Question

Я пытаюсь выполнить базовую работу с видеопотоком в Angular. Мой код ниже. Проблема в том, что я продолжаю получать и ошибка, которая говорит ... ОШИБКА Ошибка: Uncaught (в обещании): 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

Новый function(stream) в дескрипторе обещания для 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();
      });
  }
}