title: How to fix _this.video is undefined
body: <p>I'm trying to convert a utility to capture video, originally written in Javascript, into Angular.</p>
  
  <p>I'm getting an error <code>_this.video is undefined</code>. The original package is here: <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos</a>.</p>
  
  <p>Here's my attempt at converting it into Angular:</p>
  
  <p><code>capture-image.component.html</code>:</p>
  
  <pre><code>&lt;div class="camera"&gt;
    &lt;video id="video" [(ngModel)]="video" (canplay)="setVideo()" name="video" ngDefaultControl&gt;Video stream not available.&lt;/video&gt;
    &lt;button id="startbutton" [(ngModel)]="startbutton" (click)="takePicture()" name="startbutton" ngDefaultControl&gt;Take photo&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;canvas id="canvas" [(ngModel)]="canvas" name="canvas" ngDefaultControl&gt;&lt;/canvas&gt;
  &lt;div class="output"&gt;
    &lt;img id="photo" [(ngModel)]="photo" name="photo" ngDefaultControl alt="The screen capture will appear in this box."&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>capture-image.component.ts</code>:</p>
  
  <pre><code>@Component({
    selector: 'app-capture-image',
    templateUrl: './capture-image.component.html',
    styleUrls: ['./capture-image.component.scss'],
    providers: [
      {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() =&gt; CaptureImageComponent),
        multi: true
      }
    ]
  })
  
  export class CaptureImageComponent implements OnInit {
    video: HTMLVideoElement;
    canvas;
    photo;
    startbutton;
    streaming = false;
    width = 320;
    height = 0;
  
    constructor() { }
  
    ngOnInit() {
      navigator.mediaDevices.getUserMedia({video: true, audio: false})
        .then((stream) =&gt; {
          this.video.srcObject = stream;  // &lt;-- GETTING ERROR HERE
          this.video.play();
        })
        .catch(function(err) {
          console.log(err);
        });
        // this.clearPhoto();
  
    }
  
  
    setVideo() {
      if (!this.streaming) {
        this.height = this.video.videoHeight/ (this.video.videoWidth/this.width);
        this.video.width = this.width;
        this.video.height = this.height;
        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.streaming = true; 
      }
    }
  
    clearPhoto() {
      let context = this.canvas.getContext('2d');
      context.fillStyle = "#AAA";
      context.fillRect(0,0,this.canvas.width, this.canvas.height);
  
      var data = this.canvas.toDataURL('image/png');
      this.photo.src = data;
    }
  
    takePicture() {
      let context = this.canvas.getContext('2d');
      if (this.width &amp;&amp; this.height) {
        this.canvas.width = this.width;
        this.canvas.height = this.height;
        context.drawimage(this.video, 0, 0, this.width, this.height);
  
        let data = this.canvas.toDataURL('image/png');
        this.photo.src = data;
      } else {
        this.clearPhoto();
      }
    }
  
  
  }
  
  </code></pre>
  
  <p>This is my first attempt at this project, and I'm sure there are many more other problems buried in my code aside from the <code>_this.video undefined</code> error. Many thanks if any ideas how to fix the <code>_this.video undefined</code> error, or for identifying any other problems. </p>