Аудиодорожки не останавливаются после остановки аудиовходов — расширение Chrome ⇐ Javascript

[Anonymous]

У меня есть устройство записи экрана в расширении, где я использую пользователя микрофона, с устройством записи экрана все работает нормально, но у меня есть небольшая проблема: после нажатия кнопки «Остановить запись» в расширении или кнопки «Остановить общий доступ» в Chrome он говорит, что микрофон все еще используется, и я не могу его отладить самостоятельно. Я проверил разные способы здесь, в stackoverflow, но, похоже, ни один из них не работает, поэтому я решил задать вопрос.
Вот логика и код (все это находится в contentScript.js).
Когда мы открываем расширение, оно перечисляет различные типы аудио:

Код: Выделить всё

async function listAudioInputSources () {
try {
currentAudioStream = await navigator.mediaDevices.getUserMedia({audio: true});
window.streamReference = currentAudioStream;
const devices = await navigator.mediaDevices.enumerateDevices();
audioInputs = devices.filter(device => device.kind === 'audioinput').map(device => ({
deviceId: device.deviceId,
label: device.label,
volumeLevels: Array(10).fill(false)
}));

if(audioInputs.length > 0) {
audioInputs.forEach(input => setupAudioContext(input.deviceId));
}

audioError = false

chrome.runtime.sendMessage({
action: 'audio-sources-updated',
audios: audioInputs,
micMsg: audioError
});
} catch (error) {
console.error('Error accessing audio devices:', error);
audioError = true
chrome.runtime.sendMessage({ action: "audio-sources-updated", micMsg: audioError });
}
}

После того, как мы щелкнем по одному из аудио, мы вызываем эту функцию, которая устанавливает этот аудио:

Код: Выделить всё

async function switchAudioInput(deviceId) {
if (selectedAudioInput === deviceId) return;

selectedAudioInput = deviceId;

Object.values(audioStreams).forEach(stream => {
stream.getTracks().forEach(track => track.stop());
});

Object.values(audioContexts).forEach(context => context.close());

audioContexts = {};
analyzerNodes = {};
audioStreams = {};

setupAudioContext(deviceId)
}

Код: Выделить всё

async function setupAudioContext (deviceId) {
try {
currentAudioStream = await navigator.mediaDevices.getUserMedia({
audio: {
deviceId: { exact: deviceId },
noiseSuppression: false,
echoCancellation: false,
}
});
initializeAudioContext(deviceId, currentAudioStream);
} catch (error) {
console.log(error)
}
}

И затем мы начинаем запись (в функции ниже у нас также есть событие onstop, где указаны шаги, которые мы выполняем, когда демонстрация экрана прекращается):

Код: Выделить всё

async function startScreenRecording() {
try {
const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: {frameRate: { max: 10 }, width: { max: 1280 }, height: { max: 720 }}});

const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });

mediaStream = new MediaStream([
...screenStream.getTracks(),
...audioStream.getTracks()
]);

startTimer()

mediaRecorder = new MediaRecorder(mediaStream, { mimeType: "video/mp4" });
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};

let ended = false

const videoStream = screenStream.getVideoTracks()[0];
videoStream.addEventListener('ended', () => {
ended = true
mediaRecorder.stop();
chrome.storage.local.set({ state: 'prerecording' })
});

mediaRecorder.onstop = () => {
document.title = title
clearInterval(timer)
recordTime = 0

const blob = new Blob(recordedChunks, { type: "video/mp4" });
if (!isReset) {
if (!ended) chrome.runtime.sendMessage({ action: "opening-video" });

setTimeout(async () => {
const openVideoBackr = window.open(`${baseURL}/record?ext`, '_blank')

window.addEventListener('message', function handleMessage(event) {
if (event.source === openVideoBackr &&  event.data === 'ready') {
openVideoBackr.postMessage({ blob }, baseURL);
window.removeEventListener('message', handleMessage);
}
});

const checkWindowReady = setInterval(() => {
if (openVideoBackr) {
openVideoBackr.postMessage({ blob }, baseURL);
}
}, 100);

setTimeout(() => {
clearInterval(checkWindowReady);
}, 5000);
}, !ended ? 700 : 100)
}
recordedChunks = [];
isReset = false
ended = false
};

mediaRecorder.start();
} catch (error) {
console.error("Error starting screen recording:", error);
}
}

когда мы нажимаем кнопку остановки записи в расширении, мы сначала вызываем эту функцию:

Код: Выделить всё

function stopScreenRecording() {
if (mediaRecorder && mediaRecorder.state !== "inactive") {
mediaRecorder.stop();
if (mediaStream) {
mediaStream.getTracks().forEach(track => track.stop());
mediaStream = null;
}
}
}

Я пробовал разные способы остановки звуковых дорожек, но, похоже, это не сработало.
Я подумал, что одна вещь может заключаться в том, что мы открываем новую вкладку и перенаправляем пользователя на новую tab, в то же время мы останавливаем запись или что-то в этом роде. Я пытался с этим разобраться, но не смог разобраться.
Это, пожалуй, более или менее все основные шаги, но если вам нужна дополнительная информация, я буду рад ее предоставить.
Спасибо за помощь!

Подробнее здесь: https://stackoverflow.com/questions/793 ... -extension