https://speakerdeck.com/y_i/webcodecs-stuck-point-examples で紹介したWebCodecsを用いた実装のハマりやすいポイントについて、実際に再現する実装とその修正方法のデモのサンプルコードです。 デフォルトでは問題の修正方法の部分についてはコメントアウトしており、その修正を有効にすることで問題が発現しないのが確認できます。
GoogleChromeに--enable-blink-features=WebCodecs,MediaStreamInsertableStreamsオプションをつけて起動する必要がある。
例えばmacだとopen -a /Applications/Google\ Chrome\ Beta.app --args --use-fake-device-for-media-stream --enable-blink-features=WebCodecs,MediaStreamInsertableStreamsのようになる。
また、入力のカメラはVideoEncoderのconfigureの設定に合うものを使うか、設定の方をカメラに合わせる必要がある。
サンプルのコードでは--use-fake-device-for-media-streaフラグを付けて起動した時の偽の映像やFaceTime HDカメラなどが対応している解像度になっている。