在 Chrome 扩展中使用转录功能捕获和播放选项卡音频时遇到问题

Question

我正在开发一个 Chrome 扩展程序，我想从浏览器选项卡捕获音频和麦克风输入，将此流发送到转录服务（在我的例子中为 Azure），并同时通过系统扬声器播放它。但是，我在通过扬声器播放选项卡音频时遇到问题，并且启用音频播放会干扰转录服务，可能会创建反馈循环。

我想要实现的目标：

1. 从 Chrome 选项卡捕获音频和麦克风输入。
2. 通过 Azure 的语音 SDK 使用此音频进行转录。
3. 通过系统扬声器播放捕获的选项卡音频。

**转录对于音频和麦克风输入的效果都非常好。

问题：

• 当我尝试播放捕获的音频（

  tabAudioMediaStream

  ）时，没有声音输出。
• 启用声音输出似乎会影响转录质量，可能是由于反馈循环造成的。转录服务开始发送无法识别的文本作为响应。

代码片段：

这是我的代码的相关部分：

在background.js中获取Media StreamId

chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    if (tabs.length > 0) {
      chrome.tabCapture.getMediaStreamId({
        targetTabId: tabs[0].id,
        consumerTabId: tabs[0].id
      }).then(tabStreamId => {
        console.log("StreamId: ", tabStreamId);
        chrome.tabs.sendMessage(tabs[0].id, {type: "tabStreamId", tabStreamId});
      })

    }
  });

然后，MediaStreamId 被传递到内容脚本，该脚本随后捕获麦克风流，然后传递到 azure 转录服务。这是相关代码。

const constraints = {
    audio: { echoCancellation: true },
};

    navigator.mediaDevices.getUserMedia({
        audio: {
            mandatory: {
                chromeMediaSource: "tab",
                chromeMediaSourceId: tabStreamId,
            },
        },
        video: false
    }).then(tabAudioMediaStream => {

        // continueToPlayCapturedAudio(tabAudioMediaStream.clone());
        if (tabAudioMediaStream.getAudioTracks().length === 0) {
            console.error("No audio tracks in tab stream");
            return;
        }
         // Attempt to play audio directly - this did not produce sound
        // let audio = new Audio();
        // audio.srcObject = tabAudioMediaStream;
        // audio.play();

        let tabAudioMediaSourceNode = audioContext.createMediaStreamSource(tabAudioMediaStream);
        // I expected this connection to play the audio through the speakers, but it's not working instead affecting transcription service response
        // tabAudioMediaSourceNode.connect(audioContext.destination);

        navigator.mediaDevices.getUserMedia(constraints)
            .then(micAudioMediaStream => {
                // Handle microphone audio stream
                let micAudioMediaSourceNode = audioContext.createMediaStreamSource(micAudioMediaStream);
                
                return micAudioMediaSourceNode
            }).then(micAudioMediaSourceNode => {

                tabAudioMediaSourceNode.connect(destination);
                micAudioMediaSourceNode.connect(destination);

                output = new MediaStream();
                output.addTrack(destination.stream.getAudioTracks()[0]);
                // start the transcription service using the stream
                startAzureTranscriptionService(output);
            })
    })

continueToPlayCapturedAudio()

manifest.js 权限。我用的是MV3

  "permissions": [
    "storage",
    "identity",
    "tabs",
    "tabCapture",
    "activeTab"
  ],

我正在寻求以下方面的指导：

为什么这两种方法都无法通过扬声器播放音频？
Web Audio API 或 Chrome 扩展环境中是否还有我可能遗漏的其他注意事项或配置？ 任何解决此问题的见解或建议将不胜感激。

期望通过扬声器播放音频。尝试了几种方法，但都不起作用，反而开始影响转录服务的响应。

问题：

尝试通过扬声器播放选项卡音频时没有声音。
尝试播放音频会干扰转录服务，导致转录质量不佳或输入无法识别。

Answer 1

我也遇到同样的问题，请问你解决了吗？