MediaRecorder.resume() — Methode · JavaScript-Referenz

Signatur

MediaRecorder.prototype.resume()

Beschreibung

resume() setzt eine Aufnahme fort, die vorher mit MediaRecorder.prototype.pause() angehalten wurde. Der Zustand (state) wechselt dabei von "paused" zurück zu "recording". Neue Mediendaten werden an die bestehende Aufnahme angehängt, es entsteht also keine neue Datei. Die Aufnahme läuft einfach ohne die pausierte Zeitspanne weiter.

Beim Aufruf läuft Folgendes ab:

Ist state gleich "inactive", wird eine InvalidStateError-DOMException geworfen.
Ist state bereits "recording", passiert nichts.
Andernfalls wechselt state zu "recording", das Sammeln von Daten wird fortgesetzt und am MediaRecorder wird das Ereignis resume ausgelöst.

Typische Einsatzfälle sind Pause-/Weiter-Schaltflächen in Diktier- und Sprachnachrichten-Apps, Bildschirmaufnahmen, bei denen private Inhalte ausgeblendet werden sollen, und Aufnahmen, die automatisch pausieren, wenn der Tab in den Hintergrund wechselt.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Ob das Fortsetzen geklappt hat, erkennt man am Ereignis resume oder daran, dass recorder.state === "recording" gilt.

Beispiele

Pause-/Weiter-Schaltfläche für eine Sprachaufnahme

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const recorder = new MediaRecorder(stream);
const chunks = [];

recorder.addEventListener('dataavailable', (e) => chunks.push(e.data));
recorder.start();

const toggleBtn = document.querySelector('#toggle');
toggleBtn.addEventListener('click', () => {
  if (recorder.state === 'recording') {
    recorder.pause();
    toggleBtn.textContent = 'Weiter';
  } else if (recorder.state === 'paused') {
    recorder.resume();
    toggleBtn.textContent = 'Pause';
  }
});

Auf das resume-Ereignis reagieren (addEventListener und onresume)

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const recorder = new MediaRecorder(stream);

recorder.addEventListener('pause', () => console.log('Aufnahme pausiert'));
recorder.addEventListener('resume', () => console.log('Aufnahme läuft weiter:', recorder.state));
// alternativ: recorder.onresume = () => { ... };

recorder.start();
recorder.pause();
setTimeout(() => recorder.resume(), 2000);

Aufnahme pausiert Aufnahme läuft weiter: recording

Sicheres Fortsetzen mit Zustandsprüfung

const safeResume = (recorder) => {
  try {
    if (recorder.state === 'paused') {
      recorder.resume();
      return true;
    }
    return false; // läuft bereits oder ist inaktiv
  } catch (err) {
    if (err.name === 'InvalidStateError') {
      console.warn('Aufnahme ist nicht aktiv, resume() nicht möglich.');
    }
    return false;
  }
};

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const recorder = new MediaRecorder(stream);
console.log(safeResume(recorder)); // inactive
recorder.start();
recorder.pause();
console.log(safeResume(recorder));

false true

Automatisch pausieren, wenn der Tab verborgen ist

const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
recorder.start(1000); // alle 1000 ms ein Datenblock

document.addEventListener('visibilitychange', () => {
  if (document.hidden && recorder.state === 'recording') {
    recorder.pause();
  } else if (!document.hidden && recorder.state === 'paused') {
    recorder.resume();
  }
});

// Wichtig · Fallstricke

InvalidStateError: Wird resume() aufgerufen, solange state gleich "inactive" ist (also vor start() oder nach stop()), wirft die Methode eine DOMException. Prüfen Sie deshalb vorher recorder.state.
Das Ereignis resume wird asynchron ausgelöst. Direkt nach dem Aufruf ist state zwar schon "recording", Listener laufen aber erst im nächsten Task.
Die pausierte Zeitspanne fehlt in der Datei, es gibt dort keine Stille und kein Standbild. Manche Browser schreiben bei WebM-Dateien nach Pausen fehlerhafte oder fehlende Metadaten zur Dauer. Das kann die Suche im Player stören.
Eine Pause hält nur den Recorder an, nicht die Quelle. Mikrofon bzw. Kamera bleiben aktiv, und die Aufnahmeanzeige des Browsers bleibt sichtbar. Um die Hardware wirklich freizugeben, beenden Sie die Spuren mit track.stop().
Kompatibilität: Die Methode wird von allen aktuellen Browsern unterstützt, Safari erst ab 14.1. Die unterstützten MIME-Typen unterscheiden sich je nach Browser, prüfen Sie sie mit MediaRecorder.isTypeSupported(). Die Methode ist nur in sicheren Kontexten (HTTPS) sinnvoll nutzbar, weil getUserMedia() dort vorausgesetzt wird.

Siehe auch

MediaRecorder.pause() MediaRecorder.stop() MediaRecorder.start() MediaRecorder.requestData() MediaRecorder.isTypeSupported()