WebRTC移动端音频捕获失败：适配全浏览器实现Web Speech API实时字幕

核心问题分析 #

• 移动端权限触发限制：移动端浏览器强制要求媒体权限请求必须由用户主动手势（点击/触摸）触发，原代码提前初始化识别的逻辑不符合该规则。
• 音频资源冲突：复用WebRTC的localMediaAudioContext会导致移动端浏览器的音频资源锁定冲突，引发捕获失败。
• 错误处理缺失：未针对audio-capture核心错误做针对性处理，也没有权限拒绝后的引导逻辑。

修复后的完整代码 #

let recognition;
let isRecognitionActive = false;
let mediaStream; // 单独管理音频流，避免与WebRTC资源冲突

// 初始化语音识别
function initSpeechRecognition() {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    if (!SpeechRecognition) {
        console.error('当前浏览器不支持Web Speech API');
        return;
    }

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

    recognition.onstart = function() {
        console.log('语音识别已启动');
        isRecognitionActive = true;
    };

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

    recognition.onerror = function(event) {
        console.error('语音识别错误:', event.error);
        isRecognitionActive = false;
        
        if (event.error === 'audio-capture') {
            console.log('音频捕获失败，请检查麦克风权限');
            requestMicrophonePermission();
        } else if (event.error === 'no-speech') {
            console.log('未检测到语音，重新启动识别');
            restartRecognition();
        }
    };

    recognition.onend = function() {
        console.log('语音识别已结束');
        isRecognitionActive = false;
        // 仅在非主动停止时重启
        if (isRecognitionActive !== false) {
            restartRecognition();
        }
    };
}

// 单独请求麦克风权限，符合移动端安全要求
async function requestMicrophonePermission() {
    try {
        mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
        console.log('麦克风权限已获取');
    } catch (err) {
        console.error('麦克风权限请求失败:', err);
        alert('需要麦克风权限才能使用实时字幕功能，请在浏览器设置中开启');
    }
}

// 安全重启识别，避免频繁请求触发浏览器限制
function restartRecognition() {
    if (!isRecognitionActive && recognition) {
        setTimeout(() => {
            recognition.start();
        }, 1000);
    }
}

// 发送转录文本到WebRTC
function sendSpeechTranscript(transcript) {
    console.log('发送转录文本到WebRTC:', transcript);
    $('#transcript').text('You : ' + transcript);
    if (transcript) {
        setTimeout(() => {
            $('#transcript').text('');
        }, 6000);
    }
}

// 绑定用户点击事件，触发所有初始化与权限流程
$('#CaptionClickevent').on('click', async function() {
    if (isRecognitionActive) return;

    $(this).addClass('selected');
    if (!recognition) {
        initSpeechRecognition();
    }
    // 确保权限获取后再启动识别
    await requestMicrophonePermission();
    recognition.start();
    console.log('启动语音识别');
});

关键优化点 #

• 分离音频资源：不再复用WebRTC的AudioContext，单独请求麦克风流，避免资源锁定冲突。
• 严格遵循用户触发规则：所有权限请求和识别启动都绑定到用户点击事件，符合移动端浏览器安全策略。
• 增强错误处理：针对audio-capture错误添加权限引导，明确告知用户问题原因。
• 兼容性检测：提前检查浏览器支持性，避免无效初始化。
• 安全重启机制：添加延迟重启逻辑，避免频繁请求触发浏览器限制。

移动端额外注意事项 #

• HTTPS环境：所有移动端浏览器要求必须在HTTPS环境下访问媒体设备，确保部署环境符合要求。
• Safari适配：iOS Safari的webkitSpeechRecognition无法保持持续权限，每次触发都需重新确认权限。
• 浏览器选择：部分国产Android浏览器对Web Speech API支持有限，建议引导用户使用Chrome或Edge移动端浏览器。

内容的提问来源于stack exchange，提问作者maranR