javascript - Chrome Extension tabCapture API Audio Stream to Play in HTML Page - Stack Overflow

admin管理员组

文章数量:1024615

I am creating a chrome extension which captures audio from a tab using the chrome tabCapture API. I would like to play this audio stream in another html page in hopes of eventually creating a visualizer for it.

I capture the audio in a background script like so

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

the audio stream is captured from whatever page the extension was clicked on. Another tab is opened, and the audio stream is sent to it as a message.

The javascript for the visualizer.html page is

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

What I have so far is to load the audio stream into the web audio api using an audio context

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

but the script just hangs when trying to create the source.

The problem is I am not really sure what type the stream is (tabCapture api says its a LocalMediaStream).

How can I get the page to play the audio stream?

I am creating a chrome extension which captures audio from a tab using the chrome tabCapture API. I would like to play this audio stream in another html page in hopes of eventually creating a visualizer for it.

I capture the audio in a background script like so

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

the audio stream is captured from whatever page the extension was clicked on. Another tab is opened, and the audio stream is sent to it as a message.

The javascript for the visualizer.html page is

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

What I have so far is to load the audio stream into the web audio api using an audio context

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

but the script just hangs when trying to create the source.

The problem is I am not really sure what type the stream is (tabCapture api says its a LocalMediaStream).

How can I get the page to play the audio stream?

• javascript
• html
• google-chrome-extension
• html5-audio
• web-audio-api

Share Improve this question Follow asked Feb 23, 2015 at 3:33 Jake RunzerJake Runzer 1,00533 gold badges1818 silver badges3636 bronze badges 5

• Have you checked before create the new instance like: "if (typeof AudioContext !== "undefined") { context = new AudioContext(); } else if (typeof webkitAudioContext !== "undefined") { context = new webkitAudioContext(); }" or did you try another version chrome browser? – Dayton Wang Commented Feb 23, 2015 at 19:11
• I have defined the AudioContext with window.AudioContext = window.AudioContext || window.webkitAudioContext; I have not tried another version of chrome browser but I am on the latest stable build. – Jake Runzer Commented Feb 23, 2015 at 20:59
• If it works with other versions of Chrome, it sounds a bug to me. Then I think you should file one on crbug. – Dayton Wang Commented Feb 23, 2015 at 22:25
• @JakeRunzer can you try adding the lines console.log('I am hit');var audio = new Audio(window.URL.createObjectURL(stream)); audio.play(); in the loadStream method, and tell if you are able to hear the transmitted audio, based on that I would be able to answer better... – mido Commented Mar 4, 2015 at 10:03
• 1 Seems that when you pass a stream in sendMessage() another tab receive not exactly same stream. May be you can workaround it by calling chrome.tabCapture.capture() from visualizer.html page. But note, that you have not switch active tab before start capturing. it can be done with: chrome.tabs.create({..., active: false }, ...); – MaxXx1313 Commented Oct 1, 2015 at 13:34

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

Try this in loadStream function:

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

I am creating a chrome extension which captures audio from a tab using the chrome tabCapture API. I would like to play this audio stream in another html page in hopes of eventually creating a visualizer for it.

I capture the audio in a background script like so

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

the audio stream is captured from whatever page the extension was clicked on. Another tab is opened, and the audio stream is sent to it as a message.

The javascript for the visualizer.html page is

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

What I have so far is to load the audio stream into the web audio api using an audio context

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

but the script just hangs when trying to create the source.

The problem is I am not really sure what type the stream is (tabCapture api says its a LocalMediaStream).

How can I get the page to play the audio stream?

I am creating a chrome extension which captures audio from a tab using the chrome tabCapture API. I would like to play this audio stream in another html page in hopes of eventually creating a visualizer for it.

I capture the audio in a background script like so

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

the audio stream is captured from whatever page the extension was clicked on. Another tab is opened, and the audio stream is sent to it as a message.

The javascript for the visualizer.html page is

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

What I have so far is to load the audio stream into the web audio api using an audio context

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

but the script just hangs when trying to create the source.

The problem is I am not really sure what type the stream is (tabCapture api says its a LocalMediaStream).

How can I get the page to play the audio stream?

• javascript
• html
• google-chrome-extension
• html5-audio
• web-audio-api

Share Improve this question Follow asked Feb 23, 2015 at 3:33 Jake RunzerJake Runzer 1,00533 gold badges1818 silver badges3636 bronze badges 5

• Have you checked before create the new instance like: "if (typeof AudioContext !== "undefined") { context = new AudioContext(); } else if (typeof webkitAudioContext !== "undefined") { context = new webkitAudioContext(); }" or did you try another version chrome browser? – Dayton Wang Commented Feb 23, 2015 at 19:11
• I have defined the AudioContext with window.AudioContext = window.AudioContext || window.webkitAudioContext; I have not tried another version of chrome browser but I am on the latest stable build. – Jake Runzer Commented Feb 23, 2015 at 20:59
• If it works with other versions of Chrome, it sounds a bug to me. Then I think you should file one on crbug. – Dayton Wang Commented Feb 23, 2015 at 22:25
• @JakeRunzer can you try adding the lines console.log('I am hit');var audio = new Audio(window.URL.createObjectURL(stream)); audio.play(); in the loadStream method, and tell if you are able to hear the transmitted audio, based on that I would be able to answer better... – mido Commented Mar 4, 2015 at 10:03
• 1 Seems that when you pass a stream in sendMessage() another tab receive not exactly same stream. May be you can workaround it by calling chrome.tabCapture.capture() from visualizer.html page. But note, that you have not switch active tab before start capturing. it can be done with: chrome.tabs.create({..., active: false }, ...); – MaxXx1313 Commented Oct 1, 2015 at 13:34

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

Try this in loadStream function:

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

本文标签： javascriptChrome Extension tabCapture API Audio Stream to Play in HTML PageStack Overflow