イヤホン装着時でもリアルタイム文字起こしが出来るようにしたい

実現したいこと

現在、Web Speech APIのSpeechRecognitionを使用してブラウザでリアルタイム文字起こしを行っています。Web会議などを文字起こしする際、SpeechRecognitionはマイクからの入力のみを受け付けているため、文字起こしをする側がイヤホンをつけていると通話相手の話す内容が文字起こしされないという問題が発生しました。
BlackHoleという仮想オーディオデバイスを使用し、PCの音声出力を入力に直接渡すことで、この問題の一応の解決はしました。しかし理想的にはブラウザ側だけで、js(vue)のコードを変更するだけで問題解決を実現したいです。
このに関して知見がある方がいらっしゃいましたらアドバイスだけでもいただけると嬉しいです。よろしくお願いします。

文字起こしのコード

Vue
1// Web Speech API
2      self.speech = new webkitSpeechRecognition();
3      self.speech.lang = 'ja-JP';
4      self.speech.interimResults = true; // リアルタイム文字起こし用
5      self.speech.start();
6      self.speech.onresult = function (e) {
7        // 文字起こし実行中ならば
8        if (self.speechCount % 2) {
9          var results = e.results;
10          self.recognizingText = "";
11          for (var i = e.resultIndex; i < results.length; i++) {
12            // 息継ぎ
13            if (results[i].isFinal) {
14              self.script += results[i][0].transcript + '\n';
15              self.scriptTime += '[' + self.min + ':' + self.sec + '] ' + results[i][0].transcript + '\n';
16              self.recognizingText = "";
17            // 発声中
18            } else {
19              let regonizing = results[i][0].transcript;
20              self.recognizingText += regonizing;
21            }
22          }
23        }
24      }
25      // ちょっと止まるとonendが発火して文字起こしが止まるので再開させる
26      self.speech.onend = () => {
27        // 終了していたら再開させない
28        if (!self.speechFinished) {
29          // self.audio = new Audio();
30          // self.audio.src = "news.mp3";
31          self.speech.start();
32          // self.audio.play()
33        }
34      }
35    },