Stopping input stream causes errors with MediaStreamTrackProcessor

[Darin Dimitrov]

I am capturing video from a chrome tab and piping it to a transformer:

const options = {

    video: { 

        width: window.innerWidth, 

        height: window.innerHeight

    }

};

const stream = await navigator.mediaDevices.getDisplayMedia(options);
const videoTrack = stream.getVideoTracks()[0];
const trackProcessor = new MediaStreamTrackProcessor({ track: videoTrack });
const trackGenerator = new MediaStreamTrackGenerator({ kind: 'video' });
const transformer = new TransformStream({
    transform(videoFrame, controller) {
        controller.enqueue(videoFrame);
    }
});

trackProcessor.readable.pipeThrough(transformer).pipeTo(trackGenerator.writable);
const streamAfter = new MediaStream([trackGenerator]);

const mediaRecorder = new MediaRecorder(streamAfter);
mediaRecorder.start();

setTimeout(() => {
    mediaRecorder.stop();
    streamAfter.getTracks().forEach(track => track.stop());

    // At this stage I get errors
}, 5000);

After stopping the video tracks, I get the following error:

Uncaught (in promise) DOMException: Failed to execute 'write' on 'UnderlyingSinkBase': Stream closed
A VideoFrame was garbage collected without being closed. Applications should call close() on frames when done with them to prevent stalls.

What is the proper way to inform the transformer that the input stream is closed so that it doesn't attempt to write to the output? How to handle this situation?

[Dave Pratnamac]

I have the same error when I pause and play again the video source.

[Dave Pratnamac]

ok I found it. as long as the pipeTrough() function run, the frame should not be cloased or it creates some race.

On Tuesday, March 22, 2022 at 8:09:06 AM UTC-7 Darin Dimitrov wrote:

[Joaquin Paz]

Same here, I'm having issues stopping transformations on a stream, working on a video calls app and activating/disabling transformers for virtual backgrounds.

What is the correct way to stop the pipeThrough?

[Joaquin Paz]

So, I manage to resolve the issue by catching the pipeThrough.

In the previous example by Dave
trackProcessor.readable.pipeThrough(transformer).pipeTo(trackGenerator.writable).catch(()=>{/* Catch error to avoid propagation on stream end */});

[Kofi Ocran]

Even though this doesn't break the application, I assume this error is still displayed. Anyone knows how to prevent this error altogether?