feat(auth): проверка устройств на входе — запрос доступа и превью камеры

Отключаемый модуль (instance_settings.device_check, дефолт выключен): запрос доступа к камере/микрофону на LoginPage и в карточке "Как вас зовут?" (JoinPage), живое зеркальное превью и кнопки вкл/выкл камеры и микрофона там же. На JoinPage кнопки определяют, с чем гость войдёт в конференцию (RoomPage.LiveKitRoom audio/video вместо жёстких false) — на LoginPage только пре-авторизуют разрешение, без UI (карточка ведёт в лобби, применить выбор некуда). Вход в комнату по умолчанию, как и раньше, с выключенными микрофоном/камерой. Публичный GET /api/v1/public/settings отдаёт флаг модуля обеим страницам до аутентификации.
2026-08-09 18:09:10 +03:00
parent ba01548088
commit 7ee68b17ee
19 changed files with 713 additions and 7 deletions
--- a/frontend/src/hooks/useDeviceCheckAccess.ts
+++ b/frontend/src/hooks/useDeviceCheckAccess.ts
@@ -0,0 +1,277 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { usePersistentUserChoices } from '@livekit/components-react'
+
+export type DeviceCheckStatus = 'idle' | 'pending' | 'granted' | 'denied'
+
+interface UseDeviceCheckAccessResult {
+  videoStatus: DeviceCheckStatus
+  audioStatus: DeviceCheckStatus
+  /** Привязать к `<video>` превью — хук сам управляет `srcObject` по мере
+   * появления/остановки потока камеры. */
+  videoRef: React.RefObject<HTMLVideoElement | null>
+  /** Повесить на карточку (`onPointerDown`/`onKeyDown`) — первое взаимодействие
+   * внутри неё запускает запрос доступа. Идемпотентно, повторные вызовы —
+   * no-op (см. `requestedRef`). */
+  triggerOnGesture: () => void
+  /** Понятная подсказка про отказ в доступе — `null`, пока запроса не было
+   * или обе камера/микрофон доступны. Отказ НЕ блокирует форму — вызывающая
+   * карточка просто показывает текст рядом и позволяет идти дальше. */
+  hint: string | null
+  /** Полный сброс: остановить треки камеры и вернуть весь стейт к исходному
+   * (микрофон отдельного потока не держит, см. `requestAudio`) — звать при
+   * уходе с карточки, сабмите формы и любой ошибке. Безопасно вызывать
+   * многократно. */
+  release: () => void
+  /**
+   * «Войти с включённым микрофоном/камерой» — И предпочтение пользователя
+   * для будущего входа, И (только для видео) реальное состояние превью:
+   * кнопка камеры действительно останавливает/перезапускает поток (индикатор
+   * камеры гаснет), а не просто прячет `<video>` поверх работающего потока —
+   * иначе кнопка «выключить камеру» на этом самом экране обходила бы весь
+   * смысл фичи. Микрофон отдельного живого потока не держит (см. `requestAudio`),
+   * поэтому `audioEnabled` — чистый флаг предпочтения, переключается мгновенно.
+   * По умолчанию `false` — сохраняет поведение существующих инсталляций для
+   * всех, кто кнопки не трогал. Сбрасывается в `release()` — при уходе с
+   * карточки следующий заход в неё (напр. «Назад» → снова резолвить) должен
+   * начинать с чистого состояния, а не с потухшего превью и protection против
+   * повторного запроса.
+   */
+  videoEnabled: boolean
+  audioEnabled: boolean
+  /** Переключить камеру — реально останавливает/перезапускает поток (см. выше). */
+  toggleVideoEnabled: () => void
+  toggleAudioEnabled: () => void
+}
+
+/**
+ * Доступ к камере/микрофону на входе (сессия 33, `LoginPage`/`JoinPage`) —
+ * общая логика для обеих публичных карточек, чтобы не дублировать её между
+ * гостевым и обычным флоу входа (см. промпт сессии).
+ *
+ * Решения и почему:
+ * - **Камера и микрофон запрашиваются НЕЗАВИСИМО** (`requestVideo`, затем
+ *   `requestAudio`, отдельные вызовы `getUserMedia`) — совместный вызов
+ *   `getUserMedia({audio:true, video:true})` падает целиком при отказе в
+ *   ЛЮБОМ из разрешений, а превью камеры и отдельная подсказка про микрофон
+ *   должны работать даже если пользователь разрешил только одно из двух.
+ * - **Микрофон никогда не остаётся активным** — превью только у камеры
+ *   («только превью» из задачи), поток микрофона останавливается сразу
+ *   после получения разрешения (см. `requestAudio`), сам факт разрешения
+ *   при этом остаётся выданным браузером — заново спрашивать не будет.
+ * - **Поток камеры живёт, пока карточка открыта** — останавливается явно
+ *   через `release()` (сабмит/уход/размонтирование/ошибка вызывающей
+ *   стороны) и автоматически при размонтировании самого хука.
+ * - **Автозапуск без жеста, если разрешение уже выдано** (`navigator.permissions`,
+ *   где поддерживается) — тогда `getUserMedia` не покажет системный диалог
+ *   вообще, и ждать клика незачем; иначе (в т.ч. Safari без Permissions API
+ *   для камеры/микрофона) — только по жесту `triggerOnGesture`, иначе Safari
+ *   и мобильные браузеры молча отклоняют вызов при простой загрузке страницы.
+ * - **Устройство по умолчанию — сохранённый выбор пользователя**
+ *   (`usePersistentUserChoices`, тот же ключ localStorage, что и в комнате,
+ *   см. `RoomPage.tsx`); если сохранённого ID больше не существует
+ *   (`OverconstrainedError`) — фолбэк на устройство по умолчанию системы.
+ */
+export function useDeviceCheckAccess(enabled: boolean): UseDeviceCheckAccessResult {
+  const { userChoices } = usePersistentUserChoices()
+  // Не в зависимостях эффектов/колбэков ниже — коллбэки живут в event-хендлерах
+  // (жест), а не в реактивном дереве; актуальное значение достаточно иметь на
+  // момент фактического вызова, ref обновляется отдельным эффектом.
+  const userChoicesRef = useRef(userChoices)
+  useEffect(() => {
+    userChoicesRef.current = userChoices
+  }, [userChoices])
+
+  const [videoStatus, setVideoStatus] = useState<DeviceCheckStatus>('idle')
+  const [audioStatus, setAudioStatus] = useState<DeviceCheckStatus>('idle')
+  const [videoEnabled, setVideoEnabled] = useState(false)
+  const [audioEnabled, setAudioEnabled] = useState(false)
+  const toggleAudioEnabled = useCallback(() => setAudioEnabled((v) => !v), [])
+
+  const videoStreamRef = useRef<MediaStream | null>(null)
+  const videoRef = useRef<HTMLVideoElement | null>(null)
+  const requestedRef = useRef(false)
+
+  // Полный сброс — не только остановка треков, но и статусы/флаги/охрана
+  // повторного запроса. Нужен и на «настоящем» уходе (сабмит/размонтирование),
+  // и на возврате к этой же карточке В ПРЕДЕЛАХ одного монтирования хука
+  // (JoinPage не размонтирует компонент между шагами флоу — см. её докстринг):
+  // без сброса `requestedRef` повторный заход не переспросил бы доступ и
+  // навсегда остался бы с потухшим превью при formально «granted» статусе.
+  const release = useCallback(() => {
+    const stream = videoStreamRef.current
+    if (stream) {
+      stream.getTracks().forEach((track) => track.stop())
+      videoStreamRef.current = null
+    }
+    if (videoRef.current) {
+      videoRef.current.srcObject = null
+    }
+    requestedRef.current = false
+    setVideoStatus('idle')
+    setAudioStatus('idle')
+    setVideoEnabled(false)
+    setAudioEnabled(false)
+  }, [])
+
+  // Размонтирование карточки — последний рубеж освобождения камеры: даже
+  // если вызывающая сторона забудет свой release() на каком-то из путей
+  // выхода, эта отписка не даст камере остаться гореть.
+  useEffect(() => () => release(), [release])
+
+  const requestVideo = useCallback(async () => {
+    if (!navigator.mediaDevices?.getUserMedia) {
+      setVideoStatus('denied')
+      return
+    }
+    setVideoStatus('pending')
+    try {
+      const stream = await openStream('video', userChoicesRef.current.videoDeviceId)
+      videoStreamRef.current = stream
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream
+      }
+      setVideoStatus('granted')
+      // Первичная верификация сразу показывает превью — «включено» по факту
+      // получения потока, а не отдельным действием пользователя.
+      setVideoEnabled(true)
+    } catch {
+      setVideoStatus('denied')
+    }
+  }, [])
+
+  // Кнопка камеры реально управляет потоком — выключение останавливает
+  // треки (индикатор камеры гаснет, ровно то, ради чего вся фича), включение
+  // обратно — свежий `getUserMedia` (разрешение уже выдано, диалога не будет,
+  // локально занимает десятки мс). `videoStatus` при выключении остаётся
+  // `'granted'` намеренно: кнопка не должна блокироваться, доступ никуда не
+  // делся, остановлен только сам поток.
+  const toggleVideoEnabled = useCallback(() => {
+    if (videoEnabled) {
+      const stream = videoStreamRef.current
+      if (stream) {
+        stream.getTracks().forEach((track) => track.stop())
+        videoStreamRef.current = null
+      }
+      if (videoRef.current) {
+        videoRef.current.srcObject = null
+      }
+      setVideoEnabled(false)
+      return
+    }
+    void requestVideo()
+  }, [videoEnabled, requestVideo])
+
+  const requestAudio = useCallback(async () => {
+    if (!navigator.mediaDevices?.getUserMedia) {
+      setAudioStatus('denied')
+      return
+    }
+    setAudioStatus('pending')
+    try {
+      const stream = await openStream('audio', userChoicesRef.current.audioDeviceId)
+      // Только подтверждаем, что микрофон реально работает и разрешение
+      // получено, — держать поток открытым незачем, превью для него нет.
+      stream.getTracks().forEach((track) => track.stop())
+      setAudioStatus('granted')
+    } catch {
+      setAudioStatus('denied')
+    }
+  }, [])
+
+  const requestAccess = useCallback(async () => {
+    if (requestedRef.current) return
+    requestedRef.current = true
+    // Сначала видео — оно ценнее (превью), и лучше показать его как можно
+    // раньше; микрофон следом, отдельным системным диалогом.
+    await requestVideo()
+    await requestAudio()
+  }, [requestVideo, requestAudio])
+
+  // Автозапуск без ожидания жеста — только если браузер уже сообщает
+  // 'granted' по ОБОИМ разрешениям: тогда getUserMedia не покажет диалог,
+  // и ждать клика незачем. Permissions API для camera/microphone
+  // поддерживается не везде (Safari) — в catch/при отсутствии API просто
+  // остаёмся в режиме ожидания жеста, ничего не ломаем.
+  useEffect(() => {
+    if (!enabled) return
+    let cancelled = false
+    async function precheckAndMaybeAutoStart() {
+      const permissions = navigator.permissions
+      if (!permissions?.query) return
+      try {
+        const [camera, microphone] = await Promise.all([
+          permissions.query({ name: 'camera' as PermissionName }),
+          permissions.query({ name: 'microphone' as PermissionName }),
+        ])
+        if (!cancelled && camera.state === 'granted' && microphone.state === 'granted') {
+          void requestAccess()
+        }
+      } catch {
+        // 'camera'/'microphone' — нестандартные имена Permissions API,
+        // часть браузеров (в т.ч. Safari) их не поддерживает вовсе.
+      }
+    }
+    void precheckAndMaybeAutoStart()
+    return () => {
+      cancelled = true
+    }
+  }, [enabled, requestAccess])
+
+  const triggerOnGesture = useCallback(() => {
+    if (!enabled) return
+    void requestAccess()
+  }, [enabled, requestAccess])
+
+  return {
+    videoStatus,
+    audioStatus,
+    videoRef,
+    triggerOnGesture,
+    hint: deviceCheckHint(videoStatus, audioStatus),
+    release,
+    videoEnabled,
+    audioEnabled,
+    toggleVideoEnabled,
+    toggleAudioEnabled,
+  }
+}
+
+/** Открыть поток `kind` на сохранённом устройстве; если его больше нет —
+ * фолбэк на устройство по умолчанию системы (см. докстринг хука выше).
+ *
+ * `usePersistentUserChoices` хранит НЕвыбранное устройство не как пустую
+ * строку, а как литерал `"default"` (`@livekit/components-core`,
+ * `defaultUserChoices`) — это не реальный `deviceId`, и `{deviceId:{exact:
+ * "default"}}` для видео в Chrome падает `OverconstrainedError` на каждом
+ * первом визите (фолбэк ниже это лечит, но лишний неудачный проход того не
+ * стоит) — поэтому сентинел приравнивается к «выбора нет», как и пустая строка. */
+async function openStream(kind: 'video' | 'audio', deviceId: string | undefined): Promise<MediaStream> {
+  const realDeviceId = deviceId && deviceId !== 'default' ? deviceId : undefined
+  const constraints: MediaStreamConstraints =
+    kind === 'video'
+      ? { video: realDeviceId ? { deviceId: { exact: realDeviceId } } : true }
+      : { audio: realDeviceId ? { deviceId: { exact: realDeviceId } } : true }
+  try {
+    return await navigator.mediaDevices.getUserMedia(constraints)
+  } catch (err) {
+    if (realDeviceId && err instanceof DOMException && err.name === 'OverconstrainedError') {
+      return navigator.mediaDevices.getUserMedia(kind === 'video' ? { video: true } : { audio: true })
+    }
+    throw err
+  }
+}
+
+function deviceCheckHint(video: DeviceCheckStatus, audio: DeviceCheckStatus): string | null {
+  const videoDenied = video === 'denied'
+  const audioDenied = audio === 'denied'
+  if (videoDenied && audioDenied) {
+    return 'Доступ к камере и микрофону не разрешён — включить их можно будет прямо в конференции'
+  }
+  if (videoDenied) {
+    return 'Камера недоступна — включить её можно будет прямо в конференции'
+  }
+  if (audioDenied) {
+    return 'Микрофон недоступен — включить его можно будет прямо в конференции'
+  }
+  return null
+}