Sobes.tech
Middle

Hoe werd het verzenden van spraakberichten in de chat gerealiseerd? Hoe kregen ze toestemming voor toegang tot de microfoon?

sobes.tech AI

Antwoord van AI

Для реализации отправки голосовых сообщений в чате обычно используют Web Audio API и MediaRecorder API.

  1. Получение разрешения на доступ к микрофону:

Используется метод navigator.mediaDevices.getUserMedia({ audio: true }), который запрашивает у пользователя разрешение на использование микрофона. Если пользователь разрешает, возвращается поток аудио.

async function getMicrophoneAccess() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    return stream;
  } catch (err) {
    console.error('Доступ к микрофону отклонён', err);
    return null;
  }
}
  1. Запись аудио:

С помощью MediaRecorder можно записывать аудио из полученного потока. Например:

const stream = await getMicrophoneAccess();
if (stream) {
  const mediaRecorder = new MediaRecorder(stream);
  const chunks = [];

  mediaRecorder.ondataavailable = e => chunks.push(e.data);
  mediaRecorder.onstop = () => {
    const audioBlob = new Blob(chunks, { type: 'audio/webm' });
    // Отправить audioBlob на сервер или воспроизвести
  };

  mediaRecorder.start();

  // Остановить запись через некоторое время
  setTimeout(() => mediaRecorder.stop(), 5000);
}
  1. Отправка голосового сообщения:

После записи аудио в Blob его можно отправить на сервер через fetch или WebSocket, а затем воспроизвести у получателя.

Таким образом, ключевые шаги — запрос разрешения через getUserMedia, запись через MediaRecorder и передача аудиоданных.