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

Отключаемый модуль (instance_settings.device_check, дефолт выключен):
запрос доступа к камере/микрофону на LoginPage и в карточке "Как вас
зовут?" (JoinPage), живое зеркальное превью и кнопки вкл/выкл камеры и
микрофона там же. На JoinPage кнопки определяют, с чем гость войдёт в
конференцию (RoomPage.LiveKitRoom audio/video вместо жёстких false) —
на LoginPage только пре-авторизуют разрешение, без UI (карточка ведёт
в лобби, применить выбор некуда). Вход в комнату по умолчанию, как и
раньше, с выключенными микрофоном/камерой.

Публичный GET /api/v1/public/settings отдаёт флаг модуля обеим
страницам до аутентификации.

backend/api/admin.py

@@ -475,6 +475,7 @@ def _to_settings_out(cfg: InstanceConfig, *, transcription_queue_served: bool) -
         consent_required=cfg.consent_required,
         consent_policy_text=cfg.consent_policy_text,
         consent_policy_version=cfg.consent_policy_version,
+        device_check_enabled=cfg.device_check_enabled,
     )
 
 

backend/api/public.py

@@ -0,0 +1,21 @@
+"""Роутер публичных настроек клиента — доступен без аутентификации."""
+
+from typing import Annotated
+
+from fastapi import APIRouter, Depends
+from sqlalchemy.ext.asyncio import AsyncSession
+
+from core.db import get_session
+from schemas.public import PublicSettingsOut
+from services.instance_settings import InstanceSettingsService
+
+router = APIRouter(prefix="/api/v1/public", tags=["public"])
+
+
+@router.get("/settings", response_model=PublicSettingsOut)
+async def public_settings(
+    session: Annotated[AsyncSession, Depends(get_session)],
+) -> PublicSettingsOut:
+    """Флаги инстанса, нужные публичным страницам логина/входа гостя до аутентификации."""
+    cfg = await InstanceSettingsService(session).get()
+    return PublicSettingsOut(device_check_enabled=cfg.device_check_enabled)

backend/core/plugins/config.py

@@ -133,3 +133,8 @@ class InstanceConfig(BaseModel):
     consent_required: bool = False
     consent_policy_text: str = ""
     consent_policy_version: int = 1
+    # Проверка устройств на входе (сессия 33): запрос доступа к микрофону/камере
+    # + превью камеры на странице логина и в карточке «Как вас зовут?» (JoinPage).
+    # Дефолт False сохраняет поведение существующих инсталляций — см.
+    # `services/instance_settings.py`.
+    device_check_enabled: bool = False

backend/main.py

@@ -16,6 +16,7 @@ from api.health import router as health_router
 from api.livekit_webhook import router as livekit_webhook_router
 from api.metrics import prometheus_latency_middleware
 from api.metrics import router as metrics_router
+from api.public import router as public_router
 from api.teams import router as teams_router
 from api.users import router as users_router
 from core.config import get_settings
@@ -76,6 +77,7 @@ def create_app() -> FastAPI:
     app.middleware("http")(prometheus_latency_middleware)
     app.include_router(health_router)
     app.include_router(metrics_router)
+    app.include_router(public_router)
     app.include_router(auth_router)
     app.include_router(users_router)
     app.include_router(teams_router)

backend/schemas/admin.py

@@ -168,6 +168,8 @@ class SettingsOut(BaseModel):
     consent_required: bool
     consent_policy_text: str
     consent_policy_version: int
+    # Проверка устройств на входе (сессия 33) — см. `core/plugins/config.py::InstanceConfig`.
+    device_check_enabled: bool
 
 
 class TestEmailIn(BaseModel):

backend/schemas/public.py

@@ -0,0 +1,18 @@
+"""Схемы публичного эндпоинта настроек клиента (`GET /public/settings`)."""
+
+from pydantic import BaseModel
+
+
+class PublicSettingsOut(BaseModel):
+    """Настройки инстанса, нужные клиенту ДО аутентификации.
+
+    Общая точка для флагов, которые должны быть на руках у страницы логина
+    и гостевой карточки входа (`LoginPage`/`JoinPage`) — обе публичные,
+    `GET /admin/settings` им недоступен (только для админа). Отдельно от
+    `GET /auth/registration-options`: тот про опции конкретно карточки
+    регистрации, а не про настройки инстанса в целом (сессия 33).
+    """
+
+    # Проверка устройств на входе (сессия 33) — см.
+    # `core/plugins/config.py::InstanceConfig.device_check_enabled`.
+    device_check_enabled: bool

backend/services/instance_settings.py

@@ -55,6 +55,7 @@ _KEY_REGISTRATION_EMAIL_DOMAIN = "registration_email_domain"
 _KEY_CONTACT_EMAIL = "contact_email"
 _KEY_MEDIA_LIMITS = "media_limits"
 _KEY_CONSENT_POLICY = "consent_policy"
+_KEY_DEVICE_CHECK = "device_check"
 
 BOOTSTRAP_MANAGED_KEYS: tuple[str, ...] = (
     _KEY_CHAT,
@@ -79,6 +80,7 @@ _DEFAULT_REGISTRATION_EMAIL_DOMAIN_VALUE: dict[str, Any] = {"enabled": False, "d
 `update()` значение переписывается в новую форму (см. `update`)."""
 _DEFAULT_CONTACT_EMAIL_VALUE: dict[str, Any] = {"enabled": False, "email": None}
 _DEFAULT_MEDIA_LIMITS_VALUE: dict[str, Any] = {"publish_quality_cap": "off", "stage_max_tiles": 25}
+_DEFAULT_DEVICE_CHECK_VALUE = {"enabled": False}
 
 DEFAULT_CONSENT_POLICY_TEXT = """Это типовой шаблон для предварительной демонстрации. Текст не проходил проверку юриста и не может использоваться как окончательная редакция без такой проверки. Администратор обязан заменить плейсхолдеры в квадратных скобках и, при необходимости, весь текст — под свою организацию и юрисдикцию.
 
@@ -151,6 +153,7 @@ class SettingsUpdateIn(BaseModel):
     stage_max_tiles: StageMaxTiles | None = None
     consent_required: bool | None = None
     consent_policy_text: str | None = None
+    device_check_enabled: bool | None = None
 
 
 class BootstrapOverrides(BaseModel):
@@ -203,6 +206,7 @@ def build_bootstrap_defaults(
         _KEY_CONTACT_EMAIL: dict(_DEFAULT_CONTACT_EMAIL_VALUE),
         _KEY_MEDIA_LIMITS: dict(_DEFAULT_MEDIA_LIMITS_VALUE),
         _KEY_CONSENT_POLICY: dict(_DEFAULT_CONSENT_POLICY_VALUE),
+        _KEY_DEVICE_CHECK: dict(_DEFAULT_DEVICE_CHECK_VALUE),
     }
     if overrides is None:
         return defaults
@@ -337,6 +341,10 @@ class InstanceSettingsService:
             cfg.hand_queue = HandQueueConfig(enabled=patch.hand_queue_enabled)
             await self._set(_KEY_HAND_QUEUE, cfg.hand_queue.model_dump(mode="json"))
 
+        if patch.device_check_enabled is not None:
+            cfg.device_check_enabled = patch.device_check_enabled
+            await self._set(_KEY_DEVICE_CHECK, {"enabled": patch.device_check_enabled})
+
         if patch.registration_team_choice is not None:
             cfg.registration_team_choice = patch.registration_team_choice
             await self._set(
@@ -605,4 +613,7 @@ def _build_config(rows: dict[str, Any]) -> InstanceConfig:
         consent_policy_version=rows.get(_KEY_CONSENT_POLICY, _DEFAULT_CONSENT_POLICY_VALUE).get(
             "version", 1
         ),
+        device_check_enabled=rows.get(_KEY_DEVICE_CHECK, _DEFAULT_DEVICE_CHECK_VALUE).get(
+            "enabled", False
+        ),
     )

backend/tests/test_instance_settings.py

@@ -75,6 +75,7 @@ _MANAGED_KEYS = (
     "contact_email",
     "media_limits",
     "consent_policy",
+    "device_check",
 )
 
 
@@ -133,6 +134,7 @@ async def test_ensure_bootstrapped_imports_yaml_defaults(
         "contact_email",
         "media_limits",
         "consent_policy",
+        "device_check",
     }
     cfg = await service.get()
     assert cfg.transcriber.provider == "faster_whisper_cpu"
@@ -159,6 +161,9 @@ async def test_ensure_bootstrapped_imports_yaml_defaults(
     assert cfg.consent_required is False
     assert cfg.consent_policy_text != ""
     assert cfg.consent_policy_version == 1
+    # Проверка устройств на входе (сессия 33) — выключена по умолчанию,
+    # существующие инсталляции не должны молча начать спрашивать доступ.
+    assert cfg.device_check_enabled is False
 
 
 async def test_ensure_bootstrapped_is_idempotent_and_keeps_admin_edits(
@@ -193,6 +198,22 @@ async def test_update_hand_queue_enabled(
     assert cfg.hand_queue.enabled is True
 
 
+async def test_update_device_check_enabled(
+    db_session: AsyncSession, clean_instance_settings: None
+) -> None:
+    service = InstanceSettingsService(db_session)
+    await service.ensure_bootstrapped(PLUGINS_YAML)
+
+    cfg = await service.update(SettingsUpdateIn(device_check_enabled=True))
+    assert cfg.device_check_enabled is True
+
+    cfg = await service.get()
+    assert cfg.device_check_enabled is True
+
+    cfg = await service.update(SettingsUpdateIn(device_check_enabled=False))
+    assert cfg.device_check_enabled is False
+
+
 @pytest.mark.parametrize(
     ("preset", "chat_enabled", "ai_enabled", "ai_level"),
     [

backend/tests/test_public_api.py

@@ -0,0 +1,43 @@
+"""Тесты публичного эндпоинта настроек клиента (`/api/v1/public/settings`, сессия 33)."""
+
+import httpx
+import pytest_asyncio
+from sqlalchemy.ext.asyncio import AsyncSession
+
+from services.instance_settings import InstanceSettingsService, SettingsUpdateIn
+
+
+@pytest_asyncio.fixture(autouse=True)
+async def _reset_device_check(db_session: AsyncSession) -> None:
+    """Сбросить `device_check_enabled` перед каждым тестом — общая dev-БД не изолирована
+    от ручных правок администратора (та же дисциплина, что и `_reset_registration_gating`
+    в `test_auth.py`); `db_session` не коммитится в реальную БД, см. `conftest.py`."""
+    await InstanceSettingsService(db_session).update(SettingsUpdateIn(device_check_enabled=False))
+
+
+async def test_public_settings_disabled_by_default(
+    client: httpx.AsyncClient, db_session: AsyncSession
+) -> None:
+    response = await client.get("/api/v1/public/settings")
+    assert response.status_code == 200, response.text
+    assert response.json() == {"device_check_enabled": False}
+
+
+async def test_public_settings_reflects_enabled(
+    client: httpx.AsyncClient, db_session: AsyncSession
+) -> None:
+    await InstanceSettingsService(db_session).update(SettingsUpdateIn(device_check_enabled=True))
+    await db_session.commit()
+
+    response = await client.get("/api/v1/public/settings")
+    assert response.status_code == 200, response.text
+    assert response.json() == {"device_check_enabled": True}
+
+
+async def test_public_settings_requires_no_auth(
+    client: httpx.AsyncClient, db_session: AsyncSession
+) -> None:
+    """Эндпоинт публичный — работает без заголовка `Authorization`, как и обязан
+    (обе страницы, которым он нужен, доступны до входа в систему)."""
+    response = await client.get("/api/v1/public/settings")
+    assert response.status_code == 200, response.text

frontend/src/api/admin.ts

@@ -51,6 +51,9 @@ export interface SettingsOut {
   consent_policy_text: string
   /** Номер редакции текста — растёт при каждом изменении `consent_policy_text`. */
   consent_policy_version: number
+  /** Проверка устройств на входе (сессия 33) — запрос доступа к камере/микрофону
+   * и превью камеры на странице логина и в карточке «Как вас зовут?». */
+  device_check_enabled: boolean
 }
 
 /** Тело частичного обновления настроек инстанса — все поля опциональны. */
@@ -74,6 +77,7 @@ export interface SettingsUpdateIn {
   /** Включение с пустым текстом регламента — backend отвечает 400. */
   consent_required?: boolean
   consent_policy_text?: string
+  device_check_enabled?: boolean
 }
 
 /** Тело запроса тестовой отправки письма (`POST /admin/settings/test-email`). */

frontend/src/api/public.ts

@@ -0,0 +1,13 @@
+/** Публичные настройки инстанса — доступны без аутентификации (`GET /public/settings`). */
+import { apiRequest } from '@/api/client'
+
+/** Флаги, нужные странице логина и гостевой карточке входа до аутентификации. */
+export interface PublicSettingsOut {
+  /** Проверка устройств на входе (сессия 33) — запрос доступа к камере/микрофону
+   * и превью камеры на LoginPage/JoinPage. */
+  device_check_enabled: boolean
+}
+
+export async function getPublicSettings(): Promise<PublicSettingsOut> {
+  return apiRequest<PublicSettingsOut>('/public/settings', { skipAuthRefresh: true })
+}

frontend/src/components/admin/AdminSettingsTab.tsx

@@ -69,6 +69,7 @@ function AdminSettingsForm({ data }: { data: SettingsOut }) {
 
   const [chatEnabled, setChatEnabled] = useState(data.chat_enabled)
   const [handQueueEnabled, setHandQueueEnabled] = useState(data.hand_queue_enabled)
+  const [deviceCheckEnabled, setDeviceCheckEnabled] = useState(data.device_check_enabled)
   const [aiEnabled, setAiEnabled] = useState(data.transcription_enabled)
   const [aiLevel, setAiLevel] = useState<AiLevel>(data.ai_level)
   const [recipients, setRecipients] = useState<SummaryRecipientsMode>(data.summary_recipients)
@@ -140,6 +141,7 @@ function AdminSettingsForm({ data }: { data: SettingsOut }) {
     const payload: SettingsUpdateIn = {}
     if (chatEnabled !== data.chat_enabled) payload.chat_enabled = chatEnabled
     if (handQueueEnabled !== data.hand_queue_enabled) payload.hand_queue_enabled = handQueueEnabled
+    if (deviceCheckEnabled !== data.device_check_enabled) payload.device_check_enabled = deviceCheckEnabled
     if (aiEnabled !== data.transcription_enabled) payload.transcription_enabled = aiEnabled
     if (aiLevel !== data.ai_level) payload.ai_level = aiLevel
     if (recipients !== data.summary_recipients) payload.summary_recipients = recipients
@@ -200,6 +202,26 @@ function AdminSettingsForm({ data }: { data: SettingsOut }) {
             </label>
           </div>
 
+          <div className="toggle-row">
+            <div className="toggle-copy">
+              <strong>Проверка устройств на входе</strong>
+              <span>
+                Запрос доступа к камере и микрофону и превью камеры на странице входа и в
+                карточке «Как вас зовут?» — чтобы разрешение не выскакивало уже внутри
+                конференции. Микрофон и камера в самой конференции по-прежнему выключены при
+                входе
+              </span>
+            </div>
+            <label className="switch">
+              <input
+                type="checkbox"
+                checked={deviceCheckEnabled}
+                onChange={(e) => setDeviceCheckEnabled(e.target.checked)}
+              />
+              <span className="slider" />
+            </label>
+          </div>
+
           <div className="toggle-row">
             <div className="toggle-copy">
               <strong>Транскрибация и суммаризация (AI)</strong>

frontend/src/components/auth/DeviceCheckCard.tsx

@@ -0,0 +1,90 @@
+import type { RefObject } from 'react'
+import { Mic, MicOff, Video, VideoOff } from 'lucide-react'
+import type { DeviceCheckStatus } from '@/hooks/useDeviceCheckAccess'
+import '@/styles/device-check.css'
+
+interface DeviceCheckCardProps {
+  videoRef: RefObject<HTMLVideoElement | null>
+  videoStatus: DeviceCheckStatus
+  audioStatus: DeviceCheckStatus
+  /** `useDeviceCheckAccess().hint` — `null`, пока отказа нет (см. докстринг хука). */
+  hint: string | null
+  /** Одновременно и «войти с камерой/микрофоном включёнными», и (для видео)
+   * реальное состояние превью — см. докстринг `useDeviceCheckAccess`. */
+  videoEnabled: boolean
+  audioEnabled: boolean
+  onToggleVideo: () => void
+  onToggleAudio: () => void
+}
+
+/**
+ * Превью камеры + переключатели «микрофон/камера» — окошко превью и кнопки
+ * составляют одну композицию (кнопки не шире окошка, см. `device-check.css`).
+ * Кнопки без подписи — только пиктограмма (иначе не умещаются под окошком
+ * шириной в половину карточки); машиночитаемое состояние — `aria-label`.
+ * Кликабельны только после реального разрешения (`granted`) — до этого
+ * непонятно, что вообще включать.
+ *
+ * `<video>` рендерится ВСЕГДА (не только при `videoEnabled`) — хук
+ * привязывает `srcObject` к `videoRef.current` синхронно в момент получения
+ * потока, ДО следующего рендера; если бы элемент монтировался условно,
+ * в момент присвоения его ещё не было бы в DOM и поток повис бы никуда не
+ * подключённым. Плейсхолдер лежит поверх, пока превью не готово ИЛИ камера
+ * выключена кнопкой (`!videoEnabled`) — кнопка камеры реально останавливает
+ * поток (см. докстринг хука), а не просто прячет картинку.
+ *
+ * `muted`+`playsInline`+`autoPlay` — обязательны: без них iOS Safari не
+ * запустит воспроизведение живого потока, и вместо своего лица пользователь
+ * увидит чёрный прямоугольник.
+ */
+export function DeviceCheckCard({
+  videoRef,
+  videoStatus,
+  audioStatus,
+  hint,
+  videoEnabled,
+  audioEnabled,
+  onToggleVideo,
+  onToggleAudio,
+}: DeviceCheckCardProps) {
+  const showPlaceholder = videoStatus !== 'granted' || !videoEnabled
+  return (
+    <div className="device-check">
+      <div className="device-check-inner">
+        <div className="device-check-frame">
+          <video ref={videoRef} muted playsInline autoPlay className="device-check-video" />
+          {showPlaceholder && (
+            <div className="device-check-placeholder" aria-hidden="true">
+              <VideoOff className="lucide" />
+            </div>
+          )}
+        </div>
+
+        <div className="device-check-toggles">
+          <button
+            type="button"
+            className={`device-check-toggle${audioEnabled ? ' is-on' : ''}`}
+            disabled={audioStatus !== 'granted'}
+            onClick={onToggleAudio}
+            aria-pressed={audioEnabled}
+            aria-label={audioEnabled ? 'Войти с выключенным микрофоном' : 'Войти с включённым микрофоном'}
+          >
+            {audioEnabled ? <Mic className="lucide" aria-hidden="true" /> : <MicOff className="lucide" aria-hidden="true" />}
+          </button>
+          <button
+            type="button"
+            className={`device-check-toggle${videoEnabled ? ' is-on' : ''}`}
+            disabled={videoStatus !== 'granted'}
+            onClick={onToggleVideo}
+            aria-pressed={videoEnabled}
+            aria-label={videoEnabled ? 'Выключить камеру' : 'Включить камеру'}
+          >
+            {videoEnabled ? <Video className="lucide" aria-hidden="true" /> : <VideoOff className="lucide" aria-hidden="true" />}
+          </button>
+        </div>
+      </div>
+
+      {hint && <p className="field-hint device-check-hint">{hint}</p>}
+    </div>
+  )
+}

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
+}

frontend/src/hooks/usePublicSettings.ts

@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query'
+import { getPublicSettings } from '@/api/public'
+
+/**
+ * Публичные настройки инстанса (`GET /public/settings`) — общая точка для
+ * `LoginPage`/`JoinPage`, обе страницы публичные и `GET /admin/settings` им
+ * недоступен. Один и тот же `queryKey` на обеих страницах — переход
+ * login → join (или наоборот) не бьёт эндпоинт повторно, пока данные свежие.
+ */
+export function usePublicSettings() {
+  return useQuery({ queryKey: ['public-settings'], queryFn: getPublicSettings })
+}

frontend/src/pages/JoinPage.tsx

@@ -10,8 +10,11 @@ import {
 import { ApiError, errorDetail } from '@/api/client'
 import { useAuth } from '@/auth/useAuth'
 import { AppFooter } from '@/components/layout/AppFooter'
+import { DeviceCheckCard } from '@/components/auth/DeviceCheckCard'
 import { LogoMark } from '@/components/ui/LogoMark'
 import { ThemeToggle } from '@/components/ui/ThemeToggle'
+import { useDeviceCheckAccess } from '@/hooks/useDeviceCheckAccess'
+import { usePublicSettings } from '@/hooks/usePublicSettings'
 import { parseJoinQuery } from '@/lib/parseJoinQuery'
 import '@/styles/join.css'
 
@@ -67,6 +70,30 @@ export function JoinPage() {
 
   const autoResolvedRef = useRef(false)
 
+  // Проверка устройств на входе (сессия 33) — только на карточке «Как вас
+  // зовут?» (гостевой шаг), не на вводе ссылки/пароле. Отключаемый модуль,
+  // дефолт выключен — см. `instance_settings.device_check`. Кнопки «войти
+  // с камерой/микрофоном» здесь, в отличие от LoginPage, РЕАЛЬНО определяют
+  // состояние входа — см. `performJoin` (решение оператора, сессия 33).
+  const { data: publicSettings } = usePublicSettings()
+  const deviceCheckModuleEnabled = publicSettings?.device_check_enabled ?? false
+  const deviceCheck = useDeviceCheckAccess(step === 'guest-info' && deviceCheckModuleEnabled)
+  // Деструктурируем то, что нужно эффекту ниже, — `deviceCheck` целиком
+  // пересоздаётся на каждый рендер (не мемоизирован), а `release` сам по
+  // себе стабилен (react-hooks/exhaustive-deps иначе требует весь объект
+  // в зависимостях).
+  const { release: releaseDeviceCheck } = deviceCheck
+  // Карточка «Как вас зовут?» — это условный рендер ОДНОГО и того же
+  // компонента (шаги флоу не размонтируют JoinPage), поэтому размонтирование
+  // хука само по себе камеру не освободит: и уход вперёд (пароль/коннект),
+  // и назад («Назад» → `resetToInput`) должны погасить камеру явно. Эффект
+  // с cleanup по смене `step` ловит оба направления одним местом, а не
+  // отдельным release() в каждом обработчике перехода.
+  useEffect(() => {
+    if (step !== 'guest-info') return
+    return () => releaseDeviceCheck()
+  }, [step, releaseDeviceCheck])
+
   // Прямая ссылка (/j/:slug) или ?q= из редиректа — резолвим сразу, не
   // дожидаясь клика по «Продолжить», но только после того как известен
   // статус сессии (нужен для выбора «гость / авторизованный» флоу).
@@ -138,6 +165,13 @@ export function JoinPage() {
           password: opts.password,
         })
       }
+      // Явное освобождение ДО навигации, а не расчёт на автоматическую
+      // отписку хука при размонтировании: RoomPage.tsx монтируется и сам
+      // запрашивает камеру/микрофон (если enterWithVideo/enterWithAudio)
+      // почти сразу — если наш поток превью к этому моменту ещё не
+      // остановлен, устройство может достаться LiveKit «занятым» (см.
+      // требование задачи про свободную камеру к моменту входа).
+      releaseDeviceCheck()
       navigate(`/room/${encodeURIComponent(resolved.query)}`, {
         replace: true,
         state: {
@@ -149,6 +183,12 @@ export function JoinPage() {
           handQueueEnabled: data.hand_queue_enabled,
           publishQualityCap: data.publish_quality_cap,
           stageMaxTiles: data.stage_max_tiles,
+          // Кнопки превью «войти с камерой/микрофоном» (только гостевой шаг
+          // JoinPage, см. докстринг выше) — при их отсутствии (модуль
+          // выключен, авторизованный пользователь минул guest-info)
+          // остаются false, RoomPage ведёт себя как раньше.
+          enterWithVideo: deviceCheck.videoEnabled,
+          enterWithAudio: deviceCheck.audioEnabled,
         },
       })
     } catch (err) {
@@ -258,7 +298,11 @@ export function JoinPage() {
 
         {step === 'guest-info' && target && (
           <section className="screen-block">
-            <div className="flow-card">
+            <div
+              className="flow-card"
+              onPointerDown={deviceCheck.triggerOnGesture}
+              onKeyDown={deviceCheck.triggerOnGesture}
+            >
               <div className="target-conf">
                 <span className="icon-wrap" aria-hidden="true">
                   {target.isClosed ? <Lock className="icon" aria-hidden="true" /> : <Video className="icon" aria-hidden="true" />}
@@ -269,9 +313,22 @@ export function JoinPage() {
                 </div>
               </div>
 
+              {deviceCheckModuleEnabled ? (
+                <DeviceCheckCard
+                  videoRef={deviceCheck.videoRef}
+                  videoStatus={deviceCheck.videoStatus}
+                  audioStatus={deviceCheck.audioStatus}
+                  hint={deviceCheck.hint}
+                  videoEnabled={deviceCheck.videoEnabled}
+                  audioEnabled={deviceCheck.audioEnabled}
+                  onToggleVideo={deviceCheck.toggleVideoEnabled}
+                  onToggleAudio={deviceCheck.toggleAudioEnabled}
+                />
+              ) : (
                 <div className="flow-icon" aria-hidden="true">
                   <User className="icon" aria-hidden="true" />
                 </div>
+              )}
               <h1>Как вас зовут?</h1>
               <p className="flow-sub">У вас нет аккаунта VidConf — представьтесь, чтобы войти как гость</p>
 
@@ -308,6 +365,7 @@ export function JoinPage() {
                   </div>
                   <p className="field-hint">Укажите, если хотите получить саммари конференции на почту</p>
                 </div>
+
                 <button type="submit" className="btn btn-primary" disabled={!guestName.trim() || joining}>
                   {joining ? 'Входим…' : 'Войти в конференцию'}
                   {!joining && <ArrowRight style={{ width: 18, height: 18 }} aria-hidden="true" />}

frontend/src/pages/LoginPage.tsx

@@ -3,6 +3,8 @@ import { Link, Navigate, useLocation, useNavigate } from 'react-router-dom'
 import { AlertCircle, ArrowRight, Eye, EyeOff, Lock, Mail } from 'lucide-react'
 import { AuthLayout } from '@/components/auth/AuthLayout'
 import { useAuth } from '@/auth/useAuth'
+import { useDeviceCheckAccess } from '@/hooks/useDeviceCheckAccess'
+import { usePublicSettings } from '@/hooks/usePublicSettings'
 import { ApiError } from '@/api/client'
 
 /** Экран входа (см. design/mockups/auth.html, блок «вход в аккаунт»). */
@@ -17,6 +19,21 @@ export function LoginPage() {
   const [error, setError] = useState<string | null>(null)
   const [pending, setPending] = useState(false)
 
+  // Проверка устройств на входе (сессия 33) — отключаемый модуль, дефолт
+  // выключен (см. `instance_settings.device_check`). `enabled=false` держит
+  // хук полностью инертным — старое поведение сохраняется как есть.
+  //
+  // На LoginPage — без видимого превью и кнопок (решение оператора,
+  // сессия 33: LoginPage ведёт в лобби, а не в конкретную конференцию,
+  // применить выбор «войти с камерой» в моменте физически некуда, а
+  // кнопки без действия только путают). Сам ранний запрос доступа
+  // остаётся — это по-прежнему пре-авторизация разрешения, чтобы позже,
+  // уже в конференции, при включении камеры/микрофона не всплывал системный
+  // диалог. Освобождение потока — через `release()` внутри самого хука при
+  // размонтировании страницы (успешный логин уводит на другой маршрут).
+  const { data: publicSettings } = usePublicSettings()
+  const deviceCheck = useDeviceCheckAccess(publicSettings?.device_check_enabled ?? false)
+
   // Уже вошли — незачем показывать форму логина повторно.
   if (status === 'authenticated') {
     return <Navigate to="/lobby" replace />
@@ -55,7 +72,12 @@ export function LoginPage() {
           </Link>
         </div>
 
-        <form onSubmit={handleSubmit} noValidate>
+        <form
+          onSubmit={handleSubmit}
+          noValidate
+          onPointerDown={deviceCheck.triggerOnGesture}
+          onKeyDown={deviceCheck.triggerOnGesture}
+        >
           <div className="field">
             <label htmlFor="login-email">Рабочая почта</label>
             <div className="input-wrap">

frontend/src/pages/RoomPage.tsx

@@ -69,6 +69,15 @@ interface RoomJoinState {
    */
   publishQualityCap?: PublishQualityCap
   stageMaxTiles?: number
+  /**
+   * Выбор пользователя на превью JoinPage (сессия 33, «проверка устройств на
+   * входе») — войти с уже включённым микрофоном/камерой. Отсутствует (→
+   * `false`) для авторизованного входа мимо гостевой карточки, при
+   * выключенном модуле и при переподключении после F5 (эффект ниже) —
+   * тогда действует прежнее поведение `audio={false} video={false}` (0.0.15).
+   */
+  enterWithVideo?: boolean
+  enterWithAudio?: boolean
 }
 
 /**
@@ -460,8 +469,8 @@ export function RoomPage() {
         serverUrl={joinState.livekitUrl}
         token={joinState.token}
         connect
-        audio={false}
-        video={false}
+        audio={Boolean(joinState.enterWithAudio)}
+        video={Boolean(joinState.enterWithVideo)}
         options={roomOptions}
         onConnected={handleConnected}
         onDisconnected={handleDisconnected}

frontend/src/styles/device-check.css

@@ -0,0 +1,75 @@
+/*
+ * VidConf — превью камеры на входе (сессия 33, `JoinPage`; LoginPage
+ * превью не показывает — см. `DeviceCheckCard` не используется там).
+ * Свой файл: компонент самодостаточный, стили ему не нужны нигде за
+ * пределами компонента.
+ */
+
+.device-check { margin: 0 auto var(--space-5); }
+
+/* Окошко превью и кнопки под ним — одна композиция шириной в половину
+   карточки (`.flow-card`, куда компонент вложен): проценты сами масштабируются
+   от фактической ширины родителя без хардкода пикселей. */
+.device-check-inner { width: 50%; margin: 0 auto; }
+
+.device-check-frame {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--color-bg-alt);
+  border: 1px solid var(--color-border);
+}
+
+.device-check-video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  /* Своё видео принято показывать зеркально — так человек видит себя
+     привычно, как в зеркале, а не «как его видят другие». */
+  transform: scaleX(-1);
+}
+
+.device-check-placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-ink-400);
+}
+.device-check-placeholder .lucide { width: 26px; height: 26px; }
+
+/* Кнопки без подписи, только пиктограммы — их совместная ширина равна
+   ширине окошка превью (тот же `.device-check-inner`), за края не выступают. */
+.device-check-toggles {
+  display: flex;
+  gap: var(--space-2);
+  margin-top: var(--space-2);
+}
+
+.device-check-toggle {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-alt);
+  color: var(--color-ink-500);
+  cursor: pointer;
+}
+.device-check-toggle .lucide { width: 18px; height: 18px; }
+.device-check-toggle.is-on {
+  background: var(--color-accent);
+  border-color: transparent;
+  color: var(--color-accent-text);
+}
+.device-check-toggle:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.device-check-hint {
+  text-align: center;
+  margin-top: var(--space-3);
+}