Chrome 扩展选项卡捕获 API 音频流以在 HTML 页面中播放答案

【问题标题】：Chrome Extension tabCapture API Audio Stream to Play in HTML PageChrome 扩展选项卡捕获 API 音频流以在 HTML 页面中播放
【发布时间】：2015-04-24 08:22:01
【问题描述】：

我正在创建一个 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");
  }
});

到目前为止，我所做的是使用音频上下文将音频流加载到网络音频 api

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

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

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

如何让页面播放音频流？

【问题讨论】：

您在创建新实例之前是否检查过：“if (typeof AudioContext !== "undefined") { context = new AudioContext(); } else if (typeof webkitAudioContext !== "undefined") { context = new webkitAudioContext(); }”或者您是否尝试过其他版本的 chrome 浏览器？
我已经用 window.AudioContext = window.AudioContext || 定义了 AudioContext window.webkitAudioContext;我没有尝试过其他版本的 chrome 浏览器，但我使用的是最新的稳定版本。
如果它与其他版本的 Chrome 一起工作，对我来说这听起来是个错误。那么我认为你应该在crbug 上提交一份文件。
@JakeRunzer 您可以尝试在loadStream 方法中添加行console.log('I am hit');var audio = new Audio(window.URL.createObjectURL(stream)); audio.play();，并告诉您是否能够听到传输的音频，基于此我将能够更好地回答.. .
似乎当您在 sendMessage() 中传递一个流时，另一个选项卡会收到不完全相同的流。可能您可以通过从 Visualizer.html 页面调用 chrome.tabCapture.capture() 来解决它。但请注意，在开始捕获之前您尚未切换活动选项卡。可以使用：chrome.tabs.create({..., active: false }, ...);

标签： javascript html google-chrome-extension html5-audio web-audio-api

【解决方案1】：

在 loadStream 函数中试试这个：

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

【讨论】：