Chrome Extension tabCapture API Audio Stream для воспроизведения на странице HTML

Я создаю хром-расширение, которое захватывает аудио с вкладки, используя хром tabCapture API. Я хотел бы воспроизвести этот аудиопоток на другой странице html в надежде на то, что в итоге создаст для него визуализатор.

Я записываю аудио в фоновом режиме script так

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

аудиопоток захватывается с любой страницы, на которую было нажата расширение. Открывается другая вкладка, и аудиопоток отправляется на нее как сообщение.

javascript для страницы visualizer.html

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

но script просто зависает при попытке создать источник.

Проблема в том, что я не совсем уверен, какой тип потока (tabCapture api говорит о своем LocalMediaStream).

Как я могу заставить страницу воспроизводить аудиопоток?

Ответ 1