>  기사  >  웹 프론트엔드  >  내 실시간 전사 브라우저 확장에 대한 도움이 필요합니다 – 작동하지 않습니다

내 실시간 전사 브라우저 확장에 대한 도움이 필요합니다 – 작동하지 않습니다

Patricia Arquette
Patricia Arquette원래의
2024-10-20 16:39:02893검색

Need Help with My Live Transcription Browser Extension – Not Working

안녕하세요 여러분

저는 음성 인식 API를 사용하여 브라우저에서 재생되는 모든 비디오를 실시간으로 기록하는 브라우저 확장 프로그램을 개발하고 있습니다. 그런데 예상대로 작동하지 않는 문제가 발생했습니다. 전사가 표시되지 않고 이유가 무엇인지 잘 모르겠습니다.

지금까지 한 일:
Manifest.json: 오디오를 캡처하고 필요한 스크립트를 실행할 수 있는 권한을 설정했습니다.
Background.js: 배경 스크립트는 chrome.tabCapture를 사용하여 오디오 캡처를 담당합니다.
ContentScript.js: Web Speech API(SpeechRecognition)를 사용하여 캡처된 오디오를 처리하고 텍스트로 변환하고 있습니다.
Popup.js: 팝업은 실시간 전사를 표시해야 합니다.
Brave와 Chrome 브라우저 모두에서 확장 프로그램을 테스트했지만 텍스트 변환이 여전히 작동하지 않습니다.
주요 파일:
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>

문제:
확장 프로그램은 잘 로드되지만 동영상을 복사하려고 하면 아무 일도 일어나지 않습니다.
팝업에 텍스트 변환이 나타나지 않으며 Chrome 콘솔에 명백한 오류가 표시되지 않습니다.
Brave에서도 확장 프로그램을 실행해 보았는데 여전히 같은 결과가 나옵니다.
내가 시도한 것:
브라우저에서 SpeechRecognition API를 확인했는데 지원되는 것 같습니다.
확장 프로그램에 마이크 권한을 부여했습니다.
백그라운드 스크립트가 오디오를 캡처하는 것을 확인했지만 텍스트 변환이 실행되지 않는 것 같습니다.
확장 프로그램을 로컬 및 프로덕션 환경에서 테스트해 보았지만 차이가 없습니다.
가능한 문제:
마이크 권한: 오디오 캡처 권한을 요청하는 방법에 문제가 있나요?
SpeechRecognition API: 브라우저와의 호환성 문제가 있거나 음성 인식을 차단하는 요소가 있나요?
전사 처리: SpeechRecognition 프로세스의 onresult 이벤트가 올바르게 실행되고 있는지 아니면 메시지가 팝업에 표시되지 않는지 잘 모르겠습니다.
어떤 도움이나 조언이라도 대단히 감사하겠습니다! 나는 이 문제에 꽤 오랫동안 갇혀 있었고 이 작업을 수행하고 싶습니다.

미리 감사드립니다!

위 내용은 내 실시간 전사 브라우저 확장에 대한 도움이 필요합니다 – 작동하지 않습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.