Cancelling renders

:::warning 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:

tsx

const Component: React.FC = () => null;

const composition = {
  component: Component,
  durationInFrames: 100,
  fps: 30,
  width: 100,
  height: 100,
  id: 'my-composition',
};

// ---cut---
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:

tsx

const Component: React.FC = () => null;

const composition = {
  component: Component,
  durationInFrames: 100,
  fps: 30,
  width: 100,
  height: 100,
  id: 'my-composition',
};

// ---cut---
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;
  }
}

Using AbortController

Detecting if a render was cancelled

See also