CODEWITHSUNDEEP
angulartypescripthtml5-video
Artemis J
Artemis J

Reputation: 371

Video in Angular - TypeError Issue

I'm trying to do some basic video stream work in Angular. My code is below. Challenge is I keep getting and error that says... ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'video' of undefined TypeError: Cannot read property 'video' of undefined

Any suggestions would be appreciated.

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>

Upvotes: 0

Views: 635

Answers (1)

ashish.gd
ashish.gd

Reputation: 1768

The new function(stream) in the promise handle for getUserMedia doesn't seem to be getting the correct this reference. Hence the error. Changing it to use an arrow function should solve the issue.

Example:

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();
      });
  }
}

Upvotes: 2

Related Questions