suchen

Heim  >  Artikel  >  Web-Frontend  >  Benötigen Sie Hilfe mit meiner Live-Transkriptions-Browsererweiterung – funktioniert nicht

Benötigen Sie Hilfe mit meiner Live-Transkriptions-Browsererweiterung – funktioniert nicht

Patricia Arquette
Patricia ArquetteOriginal
2024-10-20 16:39:021016Durchsuche

Need Help with My Live Transcription Browser Extension – Not Working

Hallo zusammen,

Ich habe an einer Browser-Erweiterung gearbeitet, die mithilfe der Spracherkennungs-API alle im Browser abgespielten Videos live transkribieren kann. Allerdings stoße ich auf ein Problem, bei dem es nicht wie erwartet funktioniert – die Transkription wird nicht angezeigt, und ich bin mir nicht sicher, warum.

Was ich bisher getan habe:
Manifest.json: Ich habe die Berechtigungen zum Aufnehmen von Audio und zum Ausführen der erforderlichen Skripte eingerichtet.
Background.js: Das Hintergrundskript ist für die Audioaufnahme mit chrome.tabCapture verantwortlich.
ContentScript.js: Ich verwende die Web Speech API (SpeechRecognition), um das aufgenommene Audio zu verarbeiten und zu transkribieren.
Popup.js: Das Popup soll die Live-Transkription anzeigen.
Ich habe die Erweiterung sowohl auf den Browsern Brave als auch Chrome getestet, aber die Transkription funktioniert immer noch nicht.
Schlüsseldateien:
Manifest.json

{
  "manifest_version": 3,
  "name": "Live Transcription Extension",
  "version": "1.0",
  "description": "A browser extension for live transcription",
  "permissions": [
    "audioCapture",
    "activeTab",
    "storage",
    "tabCapture",
    "microphone"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contentScript.js"]
    }
  ],
  "host_permissions": ["<all_urls>"]
}

background.js

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === "start_transcription") {
    chrome.tabCapture.capture({ audio: true, video: false }, (stream) => {
      if (chrome.runtime.lastError || !stream) {
        console.error("Error capturing audio: ", chrome.runtime.lastError);
        sendResponse({ error: "Failed to capture audio" });
        return;
      }

      sendResponse({ stream });
    });
    return true;
  }
});

ContentScript.js

const startSpeechRecognition = () => {
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  if (!SpeechRecognition) {
    console.error("Speech Recognition API not supported.");
    return;
  }

  const recognition = new SpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = true;
  recognition.lang = "en-US";

  recognition.onresult = (event) => {
    let finalTranscript = '';
    for (let i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        finalTranscript += event.results[i][0].transcript;
      }
    }
    chrome.runtime.sendMessage({ action: 'transcribe', text: finalTranscript });
  };

  recognition.onerror = (event) => {
    console.error("Speech recognition error: ", event.error);
  };

  recognition.start();
};

startSpeechRecognition();

Popup.js

chrome.runtime.onMessage.addListener((message) => {
  if (message.action === 'transcribe') {
    const transcriptionDiv = document.getElementById('transcription');
    transcriptionDiv.innerText += ` ${message.text}`;
  }
});

Popup.html

<!DOCTYPE html>
<html>
<head>
  <title>Live Transcription</title>
</head>
<body>
  <h1>Live Transcription</h1>
  <div id="transcription">
    Transcription will appear here...
  </div>
  <script src="popup.js"></script>
</body>
</html>

Das Problem:
Die Erweiterung wird problemlos geladen, aber es passiert nichts, wenn ich versuche, ein Video zu transkribieren.
Im Popup wird keine Transkription angezeigt und ich sehe keine offensichtlichen Fehler in der Chrome-Konsole.
Ich habe auch versucht, die Erweiterung auf Brave auszuführen, und erhalte immer noch die gleichen Ergebnisse.
Was ich versucht habe:
Habe die SpeechRecognition-API im Browser überprüft – scheint unterstützt zu werden.
Der Erweiterung wurden Mikrofonberechtigungen erteilt.
Es wurde bestätigt, dass das Hintergrundskript den Ton aufnimmt, aber anscheinend keine Transkription auslöst.
Ich habe versucht, die Erweiterung lokal und in der Produktion zu testen, aber es macht keinen Unterschied.
Mögliche Probleme:
Mikrofonberechtigungen: Stimmt etwas nicht mit der Art und Weise, wie ich Berechtigungen für die Audioaufnahme anfordere?
Spracherkennungs-API: Könnte es Kompatibilitätsprobleme mit dem Browser geben oder blockiert etwas die Spracherkennung?
Transkriptionsverarbeitung: Ich bin mir nicht sicher, ob das onresult-Ereignis im SpeechRecognition-Prozess korrekt ausgelöst wird oder ob die Nachricht nicht im Popup ankommt.
Für jede Hilfe oder jeden Rat wäre ich sehr dankbar! Ich bin schon eine ganze Weile damit beschäftigt und würde es gerne zum Laufen bringen.

Vielen Dank im Voraus!

Das obige ist der detaillierte Inhalt vonBenötigen Sie Hilfe mit meiner Live-Transkriptions-Browsererweiterung – funktioniert nicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

json chrome html if for while try using Event JS console this display background issue
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So handhaben Sie die Cookie-Einwilligung in jeder Next.js-AppNächster Artikel：So handhaben Sie die Cookie-Einwilligung in jeder Next.js-App

In Verbindung stehende Artikel

Mehr sehen