如何在所有移动浏览器中为 WebRTC 应用程序捕获音频以使用 Web Speech API 启用字幕？

Question

我已经实现了一个 WebRTC 应用程序，其中包含使用 Web Speech API 语音识别功能从用户音频生成的实时字幕。虽然桌面浏览器运行顺利，但移动浏览器始终遇到“音频捕获失败”错误。有人可以指导我的 WebRTC 应用程序中的所有移动浏览器实现一致的音频捕获功能吗？

这是我的代码：-

let recognition;
let audioContext; 

let isRecognitionActive = false;

    // Function to create the AudioContext on user gesture
    function createAudioContext() {

        audioContext = localMediaAudioContext; // from my webrtc local audio context
        console.log('NewAudioContext',audioContext)
      }
// Function to initialize speech recognition
function initSpeechRecognition() {
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia ) {

    recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
  recognition.lang = 'en-US';

  recognition.continuous = true;
  recognition.interimResults = true; // Set to false to improve recognition responsiveness

  recognition.onstart = function() {
    console.log('Speech recognition started');
    isRecognitionActive = true;
  };

  recognition.onresult = function(event) {
    const transcript = event.results[event.results.length - 1][0].transcript; 


    sendSpeechTranscript(transcript);
  };

  recognition.onerror = function(event) {
    console.error('Speech recognition error:', event.error);
    if (event.error === 'no-speech') {
      console.log('No speech detected. Restarting recognition...');
      // Restart speech recognition when no speech is detected
      if (!isRecognitionActive) {
        recognition.start();
      }
    }
  };

  recognition.onend = function() {
    console.log('Speech recognition ended');
    // Set recognition active to false when recognition ends
    isRecognitionActive = false;
    // Continue speech recognition indefinitely
    if (!isRecognitionActive) {
      recognition.start();
    }
  };

}
}


// Function to send speech transcript over WebRTC
function sendSpeechTranscript(transcript) {
  // Implement your logic to send the transcript over WebRTC
  console.log('Sending transcript over WebRTC:', transcript);
 
  var data;
  setTimeout(() => {
    $('#transcript').text('You : ' + transcript);
  }, 2000);
  // $('#recognized-text').text('You : ' + transcript);

    if(transcript){
      setTimeout(function() {
        $('#transcript').text('');
      }, 6000);
    }

}

// Call the initSpeechRecognition function to initialize speech recognition
    initSpeechRecognition();

// Attach click event listener to start speech recognition when #idCaption is clicked
$('#CaptionClickevent').on('click', function(){
    // Start speech recognition if not already active
    if (!isRecognitionActive) {
       $(this).addClass('selected');
       if (!audioContext) {
        createAudioContext();
      }
      recognition.start();
          console.log('start recognition');
    }


});

Answer 1

您可以研究 getUserMedia 方法在移动设备浏览器上的行为方式。毕竟，移动设备浏览器与电脑浏览器不同。