Chrome Extension Capture Tab Audio

google-chrome-extension, html, javascript, webrtc

Solution

It's now possible to record a stream locally in JS using `MediaRecorder`. There is a demo here and the w3c spec is here

The method `startRecording` in the demo requires `window.stream` to be set to the MediaStream instance.

// The nested try blocks will be simplified when Chrome 47 moves to Stable
var mediaRecorder;
var recordedBlobs;
window.stream = myMediaStreamInstance;
function startRecording() {
  var options = {mimeType: 'video/webm', bitsPerSecond: 100000};
  recordedBlobs = [];
  try {
    mediaRecorder = new MediaRecorder(window.stream, options);
  } catch (e0) {
    console.log('Unable to create MediaRecorder with options Object: ', e0);
    try {
      options = {mimeType: 'video/webm,codecs=vp9', bitsPerSecond: 100000};
      mediaRecorder = new MediaRecorder(window.stream, options);
    } catch (e1) {
      console.log('Unable to create MediaRecorder with options Object: ', e1);
      try {
        options = 'video/vp8'; // Chrome 47
        mediaRecorder = new MediaRecorder(window.stream, options);
      } catch (e2) {
        alert('MediaRecorder is not supported by this browser.\n\n' +
            'Try Firefox 29 or later, or Chrome 47 or later, with Enable experimental Web Platform features enabled from chrome://flags.');
        console.error('Exception while creating MediaRecorder:', e2);
        return;
      }
    }
  }
  console.log('Created MediaRecorder', mediaRecorder, 'with options', options);

  // do UI cleanup here
  mediaRecorder.onstop = function() {/** stop */};
  mediaRecorder.ondataavailable = function() {/** data avail */};
  mediaRecorder.start(10); // collect 10ms of data
  console.log('MediaRecorder started', mediaRecorder);
}

- https://www.w3.org/TR/mediastream-recording/

- https://simpl.info/mediarecorder/

Problem

I'm trying to create a Chrome extension that captures the audio from the active tab and either sends it to another server or makes it accessible via a URL. I'm using the `chrome.tabCapture.capture` API and can successfully get a `MediaStream` of the tab's audio, but I don't know what to do after that. The Chrome docs have nothing about MediaStreams so I've looked through some documentation here and played with the JS debugger to see what methods are available, but can't find a way to send the MediaStream somewhere.

Original source