Heim > Web-Frontend > js-Tutorial > Hauptteil

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

Patricia Arquette
Freigeben: 2024-10-20 16:39:02
Original
1015 Leute haben es durchsucht

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>"]
}
Nach dem Login kopieren

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;
  }
});

Nach dem Login kopieren

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();

Nach dem Login kopieren

Popup.js

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!

Quelle:dev.to
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage