Chrome扩展程序tabCapture API音频流在HTML页面中播放

Question

我正在创建一个Chrome扩展程序，使用Chrome的tabCapture API从选项卡中捕获音频。我希望在另一个HTML页面中播放此音频流，以便最终为其创建一个可视化工具。

我在后台脚本中以如下方式捕获音频：

chrome.browserAction.onClicked.addListener(function(activeTab) {
  var constraints = {
    audio: true,
    video: false,
  };

  var visualizerPage = chrome.extension.getURL("/views/visualizer.html");

  chrome.tabCapture.capture(constraints, function(stream) {
    console.log("\ngot stream");
    console.log(stream);

    chrome.tabs.create({
      url: visualizerPage
    }, function(tab) {

      chrome.tabs.sendMessage(tabID, {
        "message": "stream",
        "stream": stream
      });
    });
  });

音频流是从扩展程序所在的页面捕获的。会打开另一个选项卡，然后将音频流作为消息发送到该选项卡。

visualizer.html页面的JavaScript代码如下：

function loadStream(stream) {
  // what do I have to put here to play the stream?
}

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.message === "stream") {
    var stream = request.stream;

    if (!stream) {
      console.log("stream is null");
      return;
    }

    console.log(stream);
    loadStream(stream);
  }
  else if (request.message === "statusChanged") {
    console.log("statusChanged");
  }
});

目前我所拥有的是将音频流通过音频上下文加载到Web Audio API中。

var context = new AudioContext();
var source = context.createMediaStreamSource(stream);

但是脚本在尝试创建源时卡住了。

问题是我不太确定流的类型（tabCapture API表示它是LocalMediaStream）。

如何让页面播放音频流？

- Jake Runzer

---

你在创建新实例之前有检查过吗？像这样："if (typeof AudioContext !== "undefined") { context = new AudioContext(); } else if (typeof webkitAudioContext !== "undefined") { context = new webkitAudioContext(); }" 或者你尝试过另一个版本的Chrome浏览器吗？ - Dayton Wang

我已经定义了AudioContext：window.AudioContext = window.AudioContext || window.webkitAudioContext;我没有尝试过其他版本的Chrome浏览器，但我正在使用最新的稳定版本。 - Jake Runzer

如果它可以在其他版本的Chrome上运行，那么对我来说似乎是一个bug。然后我认为你应该在crbug上提交一个bug报告。 - Dayton Wang

@JakeRunzer，你可以尝试在“loadStream”方法中添加以下代码行：console.log('I am hit');var audio = new Audio(window.URL.createObjectURL(stream));audio.play();，并告诉我你是否能够听到传输的音频。基于此，我将能够更好地回答你的问题... - mido

似乎在sendMessage（）中传递流，另一标签页接收到的流并不完全相同。也许您可以通过从visualizer.html页面调用chrome.tabCapture.capture（）来解决此问题。但请注意，在开始捕获之前，您尚未切换活动选项卡。可以使用以下方式完成：chrome.tabs.create（{...，active: false}，...）; - MaxXx1313

Answer 1

在 loadStream 函数中尝试以下内容：

var audio = new Audio();
audio.src = URL.createObjectURL(stream);
audio.play();

- Haitham Adnan Mubarak