The MediaRecorder.onstop
event handler (part of the MediaRecorder API) handles the stop
event, allowing you to run code in response to media recording via a MediaRecorder
being stopped.
The stop
event is thrown either as a result of the MediaRecorder.stop()
method being invoked, 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
MediaRecorder.onstop = function(event) { ... } MediaRecorder.addEventListener('stop', function(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 | Status | Comment |
---|---|---|
MediaStream Recording The definition of 'MediaRecorder.onstop' in that specification. |
Working Draft | Initial definition |
Browser compatibility
The compatibility table in 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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
onstop | Chrome Full support 49 | Edge Full support 79 | Firefox Full support 25 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android Full support 49 | Chrome Android Full support 49 | Firefox Android Full support 25 | Opera Android Full support 36 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
Legend
- Full support
- Full support
- No support
- No support
See also
- Using the MediaRecorder 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