麦克风访问和录音在 Telegram Mini 应用程序 Web 视图中不起作用

Question

我正在开发一个 Telegram Mini 应用程序，需要麦克风访问来录制音频并转录它。我一直在尝试使用

MediaRecorder

API 来实现此功能。但是，当应用程序在 Telegram Mini 应用程序 Web 视图（应用程序内浏览器）中运行时，录制的音频要么是空的，要么无法按预期运行

这是我用来请求麦克风访问并使用 MediaRecorder 录制音频的基本设置：

const AudioRecorderComponent = () => {
  const [isRecording, setIsRecording] = useState(false);
  const [audioBlob, setAudioBlob] = useState(null);

  const startRecording = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      const mediaRecorder = new MediaRecorder(stream);
      const chunks = [];

      mediaRecorder.ondataavailable = (event) => {
        chunks.push(event.data);
      };

      mediaRecorder.onstop = () => {
        const audio = new Blob(chunks, { type: 'audio/wav' });
        setAudioBlob(audio);
        stream.getTracks().forEach(track => track.stop());
      };

      mediaRecorder.start();
      setIsRecording(true);

      // Stop recording after 5 seconds as a test
      setTimeout(() => {
        mediaRecorder.stop();
        setIsRecording(false);
      }, 5000);
    } catch (error) {
      console.error("Microphone access error:", error);
    }
  };

  return (
    <div>
      <button onClick={startRecording} disabled={isRecording}>
        {isRecording ? 'Recording...' : 'Start Recording'}
      </button>
      {audioBlob && <audio controls src={URL.createObjectURL(audioBlob)} />}
    </div>
  );
};

export default AudioRecorderComponent;

问题

Telegram Mini App 是否支持通过 MediaRecorder 访问麦克风？我找不到专门针对 Telegram Mini Apps 解决此问题的文档。 是否有任何解决方法或替代方法可以在 Telegram 的网络视图中可靠地访问麦克风？ 有没有人在 Telegram Mini 应用程序中成功实现录音，如果是的话，你使用了什么方法？

我尝试过的 在不同环境中测试：该代码在常规浏览器（移动和桌面）中完美运行，但在 Telegram Mini App Web 视图中无法运行。 检查权限：我验证了是否正在请求并授予麦克风权限。 MediaRecorder API 似乎初始化没有错误，但录制的 Blob 始终具有相同的大小，并且没有声音播放。 用于调试的控制台日志： 在 ondataavailable 事件中添加了日志以检查块大小 - 在 Telegram Web 视图中每个块的大小为 0。 已验证环境中支持 navigator.mediaDevices 和 MediaRecorder，如缺少初始化错误所示。

Answer 1

在 Telegram Mini 应用程序中运行录音功能可能会很棘手，因为应用程序内浏览器的 Web 视图环境具有一定的限制，包括对某些 API 的限制以及跨设备行为的潜在变化。以下是一些故障排除和解决方法建议：

1. 检查用户权限问题 某些应用内浏览器可以以不同的方式处理权限。 Telegram Web 视图可能不完全支持 getUserMedia 权限请求，从而导致 MediaRecorder 出现问题。尝试像这样显式处理权限请求：

   尝试{ const Stream =等待 navigator.mediaDevices.getUserMedia({ 音频: true }); } 捕获（错误）{ console.error("麦克风权限被拒绝：", error); }

2. 查看应用程序限制 应用程序可能对后台进程或连续音频访问有限制，尤其是在 iOS 上，应用程序内浏览器的权限受到更多限制。

3. 实施回退处理 在某些情况下，可能不支持 Web 视图中的音频处理。您可以尝试检测网络视图是否支持所需的

   if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { alert("此环境不支持录音。"); }

4. 使用audio/mp4而不是audio/wav Telegram 网页视图可能更适合 MP4 音频而不是 WAV。要更改 Blob 类型：