javascript - How can I get audio stream playing in a tab in chrome extension manifest v3 - Stack Overflow

admin管理员组

文章数量:1424893

In order to capture output audio stream from a tab in manifest v2 one could use chrome.tabCapture.capture API in the background script to get the stream. But, in manifest v3 tabCapture has been moved to foreground and it isn't available in background script. Neither it is available in content scripts.

After trying out a few things, I could finally make tabCapture work in popup script. However, in my use case popup can't remain open for a long time for the stream to get captured. Instead, I stumbled upon getMediaStreamId method of tabCapture which gives me a streamId. So, I came up with this:

chrome.tabs.query({
  active: true,
  currentWindow: true
}, (tabs) => {
  var tab = tabs[0];
  chrome.tabCapture.getMediaStreamId({consumerTabId: tab.id}, (streamId) => {
    chrome.tabs.sendMessage(tab.id, { action: 'streamId', streamId: streamId });
  });
});

In order to capture output audio stream from a tab in manifest v2 one could use chrome.tabCapture.capture API in the background script to get the stream. But, in manifest v3 tabCapture has been moved to foreground and it isn't available in background script. Neither it is available in content scripts.

After trying out a few things, I could finally make tabCapture work in popup script. However, in my use case popup can't remain open for a long time for the stream to get captured. Instead, I stumbled upon getMediaStreamId method of tabCapture which gives me a streamId. So, I came up with this:

chrome.tabs.query({
  active: true,
  currentWindow: true
}, (tabs) => {
  var tab = tabs[0];
  chrome.tabCapture.getMediaStreamId({consumerTabId: tab.id}, (streamId) => {
    chrome.tabs.sendMessage(tab.id, { action: 'streamId', streamId: streamId });
  });
});

In the above script which is present in popup.js file, after getting the streamId, I send that to the content script. And I'm stuck here on to how to create a stream out of this streamId so that the stream can be captured/recorded. The documentation mentions using getUserMedia() but I haven't been lucky there. This is what I could e up with via a little help from other SO questions (but it doesn't work, I get this error DOMException: Error starting tab capture):

navigator.mediaDevices.getUserMedia({
  audio: {
    mandatory: {
      chromeMediaSource: 'tab',
      chromeMediaSourceId: streamId
    }
  }
})

How can I make tabCapture work in manifest v3, is what I'm trying to find out.

• javascript
• google-chrome-extension
• getusermedia
• chrome-extension-manifest-v3
• mediadevices

Share Improve this question Follow asked Jan 6, 2022 at 20:09 Rahul SharmaRahul Sharma 6,00555 gold badges3030 silver badges5151 bronze badges 7

• Add an extension iframe to the web page (see web_accessible_resources) and capture the audio inside. – woxxom Commented Jan 6, 2022 at 20:15
• If the site is displaying a stream and you want to record it, there is an API to do so; you can clone the stream and render it through canvas as well and modify it how you'd like. – BGPHiJACK Commented Jan 6, 2022 at 20:18
• @BGPHiJACK No, site isn't displaying a stream. – Rahul Sharma Commented Jan 6, 2022 at 20:22
• Hi @wOxxOm, I tried opening the popup.html inside an iframe. But the moment tabCapture.capture API gets called, I get an error like this: Extension has not been invoked for the current page which is obvious since the src of the iframe is chrome-extension://<extension_runtime_id>/popup.html. Could you provide more details around the way you suggested? – Rahul Sharma Commented Jan 7, 2022 at 8:54
• Show your UI inside the iframe from the beginning so the click is handled in the same context. The initial UI can be small i.e. just a button, auto-resized on a click inside or when hovered. – woxxom Commented Jan 7, 2022 at 10:22

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 1

here's an solution for capturing audio within the extension pop up, as opposed to the service worker.

manifest.json

{
    "name": "Audio Share",
    "version": "0.1",
    "manifest_version": 3,
    "permissions": [
        "tabs",
        "activeTab",
        "tabCapture"
    ],
    "host_permissions": [
        "https://*/"
    ],
    "action": {
        "default_popup": "home.html",
        "default_action": "home.js"
    }
}

home.js

function saveToFile(blob, name) {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    a.href = url;
    a.download = name;
    a.click();
    URL.revokeObjectURL(url);
    a.remove();
}

function captureTabAudio() {
    chrome.tabCapture.capture({audio: true, video: false}, (stream) => {

        // these lines enable the audio to continue playing while capturing
        context = new AudioContext();
        var newStream = context.createMediaStreamSource(stream);
        newStream.connect(context.destination);

        const recorder = new MediaRecorder(stream);
        const chunks = [];
        recorder.ondataavailable = (e) => {
            chunks.push(e.data);
        };
        recorder.onstop = (e) => saveToFile(new Blob(chunks), "test.wav");
        recorder.start();
        setTimeout(() => recorder.stop(), 5000);
    })
}

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById("share-audio-button").addEventListener("click", function ()
        captureTabAudio();
    })
});

home.html

<html>
    <head>
        <script src="home.js"></script>
    </head>

    <body>
        <h1>Audio Share</h1>
        <button id="share-audio-button">Share Audio</button>
    </body>
</html>

The sidePanel API is the most exciting feature released this year. Unlike the popup, it remains open and it has access to all chrome APIs.

本文标签： javascriptHow can I get audio stream playing in a tab in chrome extension manifest v3Stack Overflow