getTracks dose not exist on type 'Blob' error message in Angular via typescript

user_10324413 0
Viewed 2246

I am a newbie in use webrtc with angular6. when I research WebRTC APIs and build a simple page to show/stop webcam stream in local test. I get a error message in development. There is my development environment:

Angular 6.1.0
Angular-cli 6.1.2
Typescript 2.9.2

I build "stop" button to execute function stopBtn(). But typescript compiler will throw the error message in building app :

error TS2339: Property 'getTracks' does not exist on type 'MediaStream | Blob | MediaSource'. Property 'getTracks' does not exist on type 'Blob'.

stopBtn() function code :

private video: HTMLVideoElement;
.......
ngOnInit() {
  this.video = <HTMLVideoElement>this.el.nativeElement.querySelector('#video');
}
........
getDevice() {.....}
getStream() {.....}
gotStream() {.....}
.......
stopBtn() {
  if (this.video.srcObject) {
    this.video.srcObject.getTracks().forEach( stream => stream.stop());
    this.video.srcObject = null;
  }
}

html simple code: 

<video id="video" autoplay></video>
<button id="stopbtn" type="button" (click)="stopBtn()">Stop</button>

This page can show stream correctly.
I had search many keywords for this error message by stackoverflow or google. But do not get any good answer for it. So hope someone can resolve it for me. Thank you.

angular6 webrtc angular typescript
1 Answers

TypeScript believes that this.video.srcObject could be a MediaStream, a Blob, or a MediaSource, and only MediaStream has the getTracks method, so TypeScript is warning you that this.video.srcObject might not have a getTracks method. If you know that this.video.srcObject is actually a MediaStream, then use a type assertion:

(<MediaStream>this.video.srcObject).getTracks().forEach( stream => stream.stop());
user_44686170
Related