MediaRecorder: stop event
The stop
event of the MediaRecorder
interface 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.
js
addEventListener("stop", (event) => {});
onstop = (event) => {};
Event type
A generic Event
.
Example
js
mediaRecorder.onstop = (e) => {
console.log("data available after MediaRecorder.stop() called.");
const audio = document.createElement("audio");
audio.controls = true;
const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
const audioURL = window.URL.createObjectURL(blob);
audio.src = audioURL;
console.log("recorder stopped");
};
mediaRecorder.ondataavailable = (e) => {
chunks.push(e.data);
};
Specifications
Specification |
---|
MediaStream Recording # dom-mediarecorder-onstop |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
stop event |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
See also
- Using the MediaStream Recording API
- Web Dictaphone: MediaRecorder + getUserMedia + Web Audio API visualization demo, by Chris Mills (source on GitHub.)
- simpl.info MediaStream Recording demo, by Sam Dutton.
Navigator.getUserMedia