JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"></script>
<div id="result"></div>
<button class="play">Start</button>
<button class="stop">Stop</button>
<button class="resume">Resume</button>
<button class="salvar">Salvar</button>
<div class="contador"></div>
JavaScript
var mediaConstraints = {
audio: true
};
var mediaRecorder;
var blobURL;
function onMediaSuccess(stream) {
window.streamReference = stream;
$(function() {
mediaRecorder = new MediaStreamRecorder(stream);
mediaRecorder.mimeType = 'audio/wav';
mediaRecorder.audioChannels = 1;
mediaRecorder.ondataavailable = function(blob) {
// POST/PUT "Blob" using FormData/XHR2
blobURL = URL.createObjectURL(blob);
$("#result").append('<audio controls src="' + blobURL + '"></audio><br><a href="' + blobURL + '" target="_blank">' + blobURL + '</a>');
};
mediaRecorder.start(5000 * 5000);
setTimeout(function() {
mediaRecorder.stop();
}, 120 * 1000); //Se não clicar em parar, a gravação para automaticamente em 2 minutos.
});
}
function onMediaError(e) {
console.error('media error', e);
}
function onStop() {
mediaRecorder.stop();
mediaRecorder.stream.stop();
}
var interval;
function contadorIncremento() {
var count = 1;
interval = setInterval(function() {
if (count > 1)
$('.contador').html("setInterval: Ja passou " + count++ + " segundos!");
else
$('.contador').html("setInterval: Ja passou " + count++ + " segundo!");
}, 1000);
}
function stopContadorIncremento() {
clearTimeout(interval);
$('.contador').html("");
}
$(function() {
$(".play").on("click", function() {
navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
contadorIncremento();
});
$(".stop").on("click", function() {
mediaRecorder.stop();
stopContadorIncremento();
if (window.streamReference) {
window.streamReference.getAudioTracks().forEach(function(track) {
track.stop();
});
window.streamReference.getVideoTracks().forEach(function(track) {
track.stop();
});
...