Skip to main content

Cancelling renders

warning

Very experimental feature - expect bugs and breaking changes at any time.
Track progress on GitHub and discuss in the #web-renderer channel on Discord.

Both renderMediaOnWeb() and renderStillOnWeb() support cancellation via the AbortSignal API.

Using AbortController​

Create an AbortController and pass its signal to the render function:

Cancel after timeout
tsx
import {renderMediaOnWeb} from '@remotion/web-renderer';
 
const abortController = new AbortController();
 
// Cancel after 10 seconds
setTimeout(() => abortController.abort(), 10000);
 
const {getBlob} = await renderMediaOnWeb({
  signal: abortController.signal,
  composition,
});

Detecting if a render was cancelled​

When a render is cancelled, an error is thrown. To distinguish between a user-initiated cancellation and an actual error, check if the signal was aborted:

Handle cancellation in catch block
tsx
import {renderMediaOnWeb} from '@remotion/web-renderer';
 
const abortController = new AbortController();
 
try {
  const {getBlob} = await renderMediaOnWeb({
    signal: abortController.signal,
    composition,
  });
} catch (error) {
  if (abortController.signal.aborted) {
    // Render was cancelled by the user, handle gracefully
    console.log('Render was cancelled');
  } else {
    // Handle actual errors
    throw error;
  }
}

See also​