MediaRecorder: stop event

The stop event is fired when MediaRecorder.stop() is called, or when the media stream being captured ends. In each case, the stop event is preceded by a dataavailable event, making the Blob captured up to that point available for you to use in your application.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener('stop', event => { });

onstop = event => { };

Event type

A generic Event.

Example

...

  mediaRecorder.onstop = function(e) {
    console.log("data available after MediaRecorder.stop() called.");

    var audio = document.createElement('audio');
    audio.controls = true;
    var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
    var audioURL = window.URL.createObjectURL(blob);
    audio.src = audioURL;
    console.log("recorder stopped");
  }

  mediaRecorder.ondataavailable = function(e) {
    chunks.push(e.data);
  }

...

Specifications

Specification
MediaStream Recording # dom-mediarecorder-onstop

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`stop_event`	49	79	25	No	36	14	49	49	25	36	14	5.0

Name	Web APIs
Version
Badge
Last Updated	2022-04-27T09:33:08Z