CODEWITHSUNDEEP
angulartypescriptwebrtcangular6
clover hsc
clover hsc

Reputation: 83

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

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.

Upvotes: 6

Views: 3552

Answers (1)

Matt McCutchen
Matt McCutchen

Reputation: 30929

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

Upvotes: 12

Related Questions