通过打字稿在 Angular 中的类型“Blob”错误消息中不存在 getTracks

Question

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

Angular 6.1.0
Angular-cli 6.1.2
打字稿 2.9.2

我构建了“停止”按钮来执行函数 stopBtn()。但是打字稿编译器会在构建应用程序时抛出错误消息：

错误 TS2339：属性“getTracks”不存在于类型“MediaStream | 斑点| 媒体资源”。“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 或 google 搜索了许多关键字来查找此错误消息。但是没有得到任何好的答案。所以希望有人能帮我解决。谢谢你。

Answer 1

打字稿认为，this.video.srcObject可能是一个MediaStream，一个Blob，或者MediaSource，只有MediaStream有getTracks法，因此打字稿警告您this.video.srcObject可能没有一个getTracks方法。如果您知道这this.video.srcObject实际上是 a MediaStream，则使用类型断言：

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