Cannot find name "MediaStreamTrackProcessor" "MediaStreamTrackGenerator" というエラーがでて困った時の対処方法

TL;DR;

TypeScriptの使用するときにMediaStreamTrackProcessorがないよ、と言われて込まったときは@types/dom-mediacapture-transformを追加する

現状(2024.3)

2024年3月時点ではMediaStreamTrackProcessorはWorking Draftの段階で、それを使うかどうかって話なのですが、Chromeでは実装されてるので使ってみたいところです
しかしまだDraftでもあってTypeScriptに取りこまれたわけではないので、以下のコードを書くとエラーになります

const main = async() => {
    let videoProcessor:MediaStreamTrackProcessor<VideoFrame>;
    let audioProcessor:MediaStreamTrackProcessor<AudioData>;
    const stream = await navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true,
    });
    videoProcessor = new MediaStreamTrackProcessor({track: stream.getVideoTracks()[0]})
    audioProcessor = new MediaStreamTrackProcessor({track: stream.getAudioTracks()[0]})
}

main()

エラー

src/main.ts:3:24 - error TS2304: Cannot find name 'MediaStreamTrackProcessor'.
。。。

定義がないということです。定義書けばいいということですが、辛いです
定義どこかにないのっていうのも探すの辛かったです、というのが、この記事の趣旨です

解決法

型定義モジュールを追加しましょう

$ yarn add --dev @types/dom-mediacapture-transform 

依存するwebcodecsの定義もいれてくれます、よかったですね!
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/dom-mediacapture-transform

まとめ

MediaStreamTrackProcessorとMediaStreamTrackGeneratorをTypeScriptで使用するためには型定義のモジュールが必要になります
DraftとはいえGoogleがいれてきてるので近い将来の利用頻度も増えるとは思います
今のうちから利用したい!という時の解決になることもあるかもしれないので、記事にしました
(for me)

過去を考えるとJavaScriptでStream使うのかっていうのは時代を感じざるをえません