Maison > interface Web > js tutoriel > le corps du texte

Besoin d'aide avec l'extension de navigateur My Live Transcription – Ne fonctionne pas

Patricia Arquette
Libérer: 2024-10-20 16:39:02
original
1015 Les gens l'ont consulté

Need Help with My Live Transcription Browser Extension – Not Working

Bonjour à tous,

J'ai travaillé sur une extension de navigateur qui devrait transcrire en direct toute vidéo diffusée dans le navigateur à l'aide de l'API de reconnaissance vocale. Cependant, je rencontre un problème qui fait que cela ne fonctionne pas comme prévu : la transcription n'apparaît pas et je ne sais pas pourquoi.

Ce que j'ai fait jusqu'à présent :
Manifest.json : j'ai configuré les autorisations pour capturer l'audio et exécuter les scripts nécessaires.
Background.js : le script d'arrière-plan est responsable de la capture audio à l'aide de chrome.tabCapture.
ContentScript.js : J'utilise l'API Web Speech (SpeechRecognition) pour traiter l'audio capturé et le transcrire.
Popup.js : Le popup est censé afficher la transcription en direct.
J'ai testé l'extension sur les navigateurs Brave et Chrome, mais la transcription ne fonctionne toujours pas.
Fichiers clés :
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>"]
}
Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Popup.js

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

Copier après la connexion

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>

Copier après la connexion

Le problème :
L'extension se charge bien, mais rien ne se passe lorsque j'essaie de transcrire une vidéo.
Aucune transcription n'apparaît dans la fenêtre contextuelle et je ne vois aucune erreur évidente dans la console Chrome.
J'ai également essayé d'exécuter l'extension sur Brave et j'obtiens toujours les mêmes résultats.
Ce que j'ai essayé :
J'ai vérifié l'API SpeechRecognition sur le navigateur : elle semble être prise en charge.
Autorisations de microphone accordées à l'extension.
Confirmé que le script d'arrière-plan capture l'audio, mais il ne semble pas déclencher la transcription.
J'ai essayé de tester l'extension localement et en production, mais cela ne fait aucune différence.
Problèmes possibles :
Autorisations du microphone : y a-t-il un problème dans la façon dont je demande des autorisations pour la capture audio ?
API SpeechRecognition : pourrait-il y avoir des problèmes de compatibilité avec le navigateur, ou quelque chose bloque-t-il la reconnaissance vocale ?
Gestion de la transcription : je ne sais pas si l'événement onresult dans le processus SpeechRecognition se déclenche correctement ou si le message n'arrive pas à la fenêtre contextuelle.
Toute aide ou conseil serait grandement apprécié ! Je suis bloqué là-dessus depuis un bon moment et j'adorerais que cela fonctionne.

Merci d'avance !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal