Angular via typescript中的类型“Blob”错误消息中不存在getTracks

Question

我是一名使用了带角度6的webrtc的新手。当我研究WebRTC API并构建一个简单的页面来显示/停止本地测试中的网络摄像头流。我在开发中收到错误消息。有我的开发环境：

Angular 6.1.0 Angular-cli 6.1.2 打字稿2.9.2

我构建“停止”按钮来执行函数stopBtn（）。但是typescript编译器会在构建应用程序时抛出错误消息：

错误TS2339：属性'getTracks'在类型'MediaStream |上不存在Blob | MediaSource的”。 “Blob”类型中不存在“getTracks”属性。

stopBtn（）函数代码：

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简单代码：

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

此页面可以正确显示流。 我通过stackoverflow或谷歌搜索了这个错误消息的许多关键字。但是没有得到任何好的答案。所以希望有人能为我解决它。谢谢。

Answer 1

TypeScript认为this.video.srcObject可能是MediaStream，Blob或MediaSource，只有MediaStream有getTracks方法，所以TypeScript警告你this.video.srcObject可能没有getTracks方法。如果你知道this.video.srcObject实际上是MediaStream，那么使用类型断言：

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