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 come 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.
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>