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 RecordingThe 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.
Update compatibility data on GitHub
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
- [[../../../../../../../mdn.github.io/web-dictaphone/index|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
MediaRecorder.onstop by Mozilla Contributors is licensed under CC-BY-SA 2.5.