Obtain MediaStream from input device

Question

Looking for experience working with media devices:

I'm working on recording on cache and playback from Microphone source; Firefox & Chrome using HTML5.

This is what I've so far:

var constraints = {audio: true, video: false};

var promise = navigator.mediaDevices.getUserMedia(constraints);

I've been checking on official documentation from MDN on getUserMedia but nothing related to storage the audio from the constraint to cache.

No such question has been asked previously at Stackoverflow; I'm wondering if's possible.

Thanks you.

Please elaborate more on what you are trying to do. Cache it where? For what? — loganfsmyth, Jan 26 '18 at 03:36
I'm trying to record 10 seconds from microphone, store them, play them back to the user. — wwwanaya, Jan 26 '18 at 03:41
Where does the code at the Question attempt to record audio input? — guest271314, Jan 26 '18 at 03:49

score 3 · Answer 1 · answered Jan 26 '18 at 04:54

You can simply use the MediaRecorder API for such task.

In order to record only the audio from your video+audio gUM stream, you will need to create a new MediaStream, from the gUM's audioTrack:

// using async for brevity
async function doit() {
  // first request both mic and camera
  const gUMStream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
  // create a new MediaStream with only the audioTrack
  const audioStream = new MediaStream(gUMStream.getAudioTracks());
  // to save recorded data
  const chunks = [];
  const recorder = new MediaRecorder(audioStream);
  recorder.ondataavailable = e => chunks.push(e.data);
  recorder.start();
  // when user decides to stop
  stop_btn.onclick = e => {
    recorder.stop();
    // kill all tracks to free the devices
    gUMStream.getTracks().forEach(t => t.stop());
    audioStream.getTracks().forEach(t => t.stop());
  };
  // export all the saved data as one Blob
  recorder.onstop = e => exportMedia(new Blob(chunks));
  // play current gUM stream
  vid.srcObject = gUMStream;
  stop_btn.disabled = false;
}
function exportMedia(blob) {
  // here blob is your recorded audio file, you can do whatever you want with it
  const aud = new Audio(URL.createObjectURL(blob));
  aud.controls = true;
  document.body.appendChild(aud);
  document.body.removeChild(vid);
}
doit()
  .then(e=>console.log("recording"))
  .catch(e => {
    console.error(e);
    console.log('you may want to try from jsfiddle: https://jsfiddle.net/5s2zabb2/');
  });

<video id="vid" controls autoplay></video>
<button id="stop_btn" disabled>stop</button>

And as a fiddle since stacksnippets don't work very well with gUM...

Obtain MediaStream from input device

1 Answers1