Chrome扩展：捕获选项卡音频

Question

我正在尝试创建一个Chrome扩展程序，用于捕获活动选项卡中的音频，并将其发送到另一台服务器或通过URL进行访问。

我正在使用chrome.tabCapture.capture API，并成功地获取了选项卡音频的MediaStream，但是之后我不知道该怎么做。

Chrome文档中没有关于MediaStreams的内容，因此我查看了一些文档这里，并尝试调试JavaScript以查看有哪些可用方法，但找不到将MediaStream发送到其他位置的方法。

- dzelemba

---

Mozilla 开发者网络可能是你的朋友：https://developer.mozilla.org/zh-CN/docs/WebRTC/MediaStream_API - Vinícius Gobbo A. de Oliveira

您可以通过webrtc peer connection发送音频。您可以在捕获时仅指定音频，并仅为SDP选项发送音频。 - Benjamin Trent

抱歉，我应该提到所有这些都发生在本地网络上，因此 WebRTC 似乎有些过度了。有没有简单的方法可以通过本地 URL 或其他方式使流可用？@bwtrent - dzelemba

WebRTC仍然非常简单。但是，可能有一种方法可以简单地发布创建的流blob，我只是不确定如何做到这一点。 - Benjamin Trent

MediaStreamRecorder正在积极开发中，并且有一个实验性的实现。crbug.com/262211 - Daniel Herr

@BenjaminTrent 我赞成使用WebRTC来获取数据并在服务器上进行处理。我试图搜索互联网以查看它是否真正有效。我尝试了MediaStreamRecorder的解决方案，但结果视频质量非常差（每个间隔从视频对象中取帧，将其传递到画布元素中，然后截取屏幕截图）。 - Vinay

Answer 1

现在可以使用MediaRecorder在JS中本地记录流。这里有一个演示链接，W3C规范在这里。

在演示中，方法startRecording需要将window.stream设置为MediaStream实例。

// 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);
}

1. https://www.w3.org/TR/mediastream-recording/
2. https://simpl.info/mediarecorder/

- gtzilla