Question

我正在创建一个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音频api中

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

但是在尝试创建源代码时脚本会挂起。

问题是我不确定流是什么类型的（tabCapture api说它是一个LocalMediaStream）。

如何让页面播放音频流？

Answer 1

在loadStream函数中尝试：

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

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

1 个答案: