Доступ к камере в JavaScript: требования HTTPS и руководство по реализации

// --- Запуск видеопотока ---
async function startVideo() {
  try {
    // Проверяем, находимся ли мы в безопасном контексте
    if (!window.isSecureContext) {
      throw new Error('Доступ к камере требует HTTPS. Пожалуйста, используйте безопасное соединение.');
    }

    // Проверяем, поддерживается ли getUserMedia
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
      throw new Error('getUserMedia не поддерживается в этом браузере');
    }

    // Более конкретные ограничения для лучшего пользовательского опыта
    const constraints = {
      video: {
        width: { ideal: 1280 },
        height: { ideal: 720 },
        facingMode: 'user' // 'user' для фронтальной камеры, 'environment' для задней
      },
      audio: false // Только видео для этого примера
    };

    videoStream = await navigator.mediaDevices.getUserMedia(constraints);
    video.srcObject = videoStream;
    
    // Показываем пользователю дружелюбное сообщение
    emotionBox.textContent = "Доступ к камере предоставлен";
    emotionBox.style.color = "#4CAF50";

    connectWebSocket();

    // Ждем открытия сокета перед началом отправки
    socket.addEventListener("open", () => startSendingFrames());
    
  } catch (err) {
    handleCameraError(err);
  }
}

// --- Комплексный обработчик ошибок ---
function handleCameraError(error) {
  console.error("Ошибка доступа к камере:", error);
  
  let errorMessage = "";
  let errorType = error.name || "UnknownError";
  
  switch (errorType) {
    case 'NotAllowedError':
    case 'PermissionDeniedError':
      errorMessage = "Доступ к камере отклонен. Пожалуйста, разрешите доступ к камере и попробуйте снова.";
      break;
      
    case 'NotFoundError':
      errorMessage = "Устройство камеры не найдено. Пожалуйста, подключите камеру и попробуйте снова.";
      break;
      
    case 'NotReadableError':
      errorMessage = "Камера уже используется другим приложением. Пожалуйста, закройте другие приложения, использующие камеру, и попробуйте снова.";
      break;
      
    case 'OverconstrainedError':
      errorMessage = "Ограничения камеры не могут быть выполнены. Попытка с настройками по умолчанию...";
      // Откат к базовым ограничениям
      startVideoWithBasicConstraints();
      return;
      
    case 'TypeError':
      if (error.message.includes('At least one of audio and video must be requested')) {
        errorMessage = "Запрос камеры не удался. Пожалуйста, попробуйте снова.";
      } else {
        errorMessage = "Ошибка доступа к камере: " + error.message;
      }
      break;
      
    case 'SecurityError':
      errorMessage = "Доступ к камере заблокирован из-за ограничений безопасности. Пожалуйста, используйте HTTPS и попробуйте снова.";
      break;
      
    default:
      errorMessage = "Не удалось получить доступ к веб-камере: " + (error.message || "Произошла неизвестная ошибка");
  }
  
  emotionBox.textContent = errorMessage;
  emotionBox.style.color = "#f44336";
}

// --- Откат с базовыми ограничениями ---
async function startVideoWithBasicConstraints() {
  try {
    videoStream = await navigator.mediaDevices.getUserMedia({ video: true });
    video.srcObject = videoStream;
    emotionBox.textContent = "Доступ к камере предоставлен с базовыми настройками";
    emotionBox.style.color = "#FF9800";
    connectWebSocket();
    socket.addEventListener("open", () => startSendingFrames());
  } catch (err) {
    handleCameraError(err);
  }
}

// --- Дружелюбный запрос разрешения на доступ к камере ---
async function requestCameraPermission() {
  const permissionButton = document.getElementById('camera-permission-btn');
  
  if (permissionButton) {
    // Показываем первоначальную инструкцию
    permissionButton.textContent = "Нажмите для включения камеры";
    permissionButton.style.display = "block";
    
    permissionButton.addEventListener('click', async () => {
      permissionButton.textContent = "Запрос доступа к камере...";
      permissionButton.disabled = true;
      
      await startVideo();
      
      // Скрываем кнопку после успешного доступа
      permissionButton.style.display = "none";
    });
  }
}

// --- Проверка статуса разрешения ---
async function checkCameraPermission() {
  try {
    const permission = await navigator.permissions.query({ name: 'camera' });
    
    switch (permission.state) {
      case 'granted':
        await startVideo();
        break;
      case 'denied':
        showPermissionDeniedUI();
        break;
      case 'prompt':
        showPermissionRequestUI();
        break;
    }
    
    permission.onchange = () => {
      checkCameraPermission();
    };
  } catch (error) {
    // API разрешений не поддерживается, откат к прямому запросу
    showPermissionRequestUI();
  }
}

// --- Система визуальной обратной связи ---
function updateCameraUI(status) {
  const cameraIcon = document.getElementById('camera-icon');
  const statusText = document.getElementById('camera-status');
  
  switch (status) {
    case 'requesting':
      cameraIcon.className = 'fas fa-camera fa-spin';
      statusText.textContent = "Запрос доступа к камере...";
      break;
    case 'granted':
      cameraIcon.className = 'fas fa-camera';
      statusText.textContent = "Камера активна";
      break;
    case 'denied':
      cameraIcon.className = 'fas fa-camera-slash';
      statusText.textContent = "Доступ к камере отклонен";
      break;
    case 'error':
      cameraIcon.className = 'fas fa-exclamation-triangle';
      statusText.textContent = "Ошибка камеры";
      break;
    case 'stopped':
      cameraIcon.className = 'fas fa-camera';
      statusText.textContent = "Камера остановлена";
      break;
  }
}

// --- Интеллектуальная логика повтора ---
async function startVideoWithRetry(maxRetries = 3, delay = 1000) {
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      await startVideo();
      return; // Успех, выход из функции
    } catch (error) {
      if (attempt === maxRetries) {
        handleCameraError(error);
        return;
      }
      
      // Повторять только для определенных типов ошибок
      if (error.name === 'OverconstrainedError' || error.name === 'NotReadableError') {
        console.log(`Повторный запрос доступа к камере (попытка ${attempt}/${maxRetries})...`);
        await new Promise(resolve => setTimeout(resolve, delay));
        delay *= 2; // Экспоненциальный бэкофф
      } else {
        handleCameraError(error);
        return;
      }
    }
  }
}

// --- Постепенное улучшение ---
function initializeCameraFeature() {
  // Проверяем, поддерживается ли API камеры
  if (!navigator.mediaDevices) {
    showUnsupportedBrowserMessage();
    return;
  }
  
  // Проверяем, находимся ли мы в безопасном контексте
  if (!window.isSecureContext) {
    showSecureContextRequiredMessage();
    return;
  }
  
  // Инициализируем функцию камеры
  requestCameraPermission();
}

// --- Полная реализация камеры ---
class CameraManager {
  constructor(videoElement, statusElement) {
    this.video = videoElement;
    this.statusElement = statusElement;
    this.stream = null;
    this.retryCount = 0;
    this.maxRetries = 3;
    
    this.initialize();
  }
  
  async initialize() {
    try {
      await this.checkRequirements();
      this.setupUI();
      await this.requestPermission();
    } catch (error) {
      this.handleError(error);
    }
  }
  
  async checkRequirements() {
    if (!navigator.mediaDevices) {
      throw new Error('API камеры не поддерживается в этом браузере');
    }
    
    if (!window.isSecureContext) {
      throw new Error('Для доступа к камере требуется HTTPS');
    }
  }
  
  setupUI() {
    // Настраиваем кнопку разрешения и отображение статуса
    this.updateStatus('ready', 'Нажмите для включения камеры');
  }
  
  updateStatus(status, message) {
    this.statusElement.textContent = message;
    
    // Обновляем UI в зависимости от статуса
    switch (status) {
      case 'ready':
        this.statusElement.style.color = '#2196F3';
        break;
      case 'requesting':
        this.statusElement.style.color = '#FF9800';
        break;
      case 'active':
        this.statusElement.style.color = '#4CAF50';
        break;
      case 'error':
        this.statusElement.style.color = '#f44336';
        break;
      case 'denied':
        this.statusElement.style.color = '#9C27B0';
        break;
    }
  }
  
  async requestPermission() {
    try {
      this.updateStatus('requesting', 'Запрос доступа к камере...');
      
      const constraints = {
        video: {
          width: { ideal: 1280 },
          height: { ideal: 720 },
          facingMode: 'user'
        }
      };
      
      this.stream = await navigator.mediaDevices.getUserMedia(constraints);
      this.video.srcObject = this.stream;
      
      this.updateStatus('active', 'Камера активна');
      this.retryCount = 0; // Сброс счетчика повторов
      
      // Запускаем ваше WebSocket-соединение и отправку кадров
      this.startStreaming();
      
    } catch (error) {
      this.handleError(error);
    }
  }
  
  startStreaming() {
    // Ваша существующая логика подключения WebSocket
    connectWebSocket();
    socket.addEventListener("open", () => startSendingFrames());
  }
  
  handleError(error) {
    console.error('Ошибка камеры:', error);
    
    switch (error.name) {
      case 'NotAllowedError':
        this.updateStatus('denied', 'Доступ к камере отклонен. Пожалуйста, разрешите доступ и попробуйте снова.');
        this.setupRetryButton();
        break;
        
      case 'NotFoundError':
        this.updateStatus('error', 'Устройство камеры не найдено. Пожалуйста, подключите камеру и попробуйте снова.');
        break;
        
      case 'NotReadableError':
        this.updateStatus('error', 'Камера уже используется. Пожалуйста, закройте другие приложения, использующие камеру, и попробуйте снова.');
        break;
        
      case 'OverconstrainedError':
        if (this.retryCount < this.maxRetries) {
          this.retryCount++;
          this.updateStatus('requesting', `Повтор с базовыми настройками... (${this.retryCount}/${this.maxRetries})`);
          setTimeout(() => this.requestWithBasicConstraints(), 1000);
        } else {
          this.updateStatus('error', 'Ограничения камеры не могут быть выполнены. Пожалуйста, проверьте возможности вашего устройства.');
        }
        break;
        
      case 'SecurityError':
        this.updateStatus('error', 'Для доступа к камере требуется HTTPS. Пожалуйста, используйте безопасное соединение.');
        break;
        
      default:
        this.updateStatus('error', `Ошибка камеры: ${error.message || 'Неизвестная ошибка'}`);
    }
  }
  
  async requestWithBasicConstraints() {
    try {
      this.stream = await navigator.mediaDevices.getUserMedia({ video: true });
      this.video.srcObject = this.stream;
      this.updateStatus('active', 'Камера активна с базовыми настройками');
      this.startStreaming();
    } catch (error) {
      this.handleError(error);
    }
  }
  
  setupRetryButton() {
    const button = document.createElement('button');
    button.textContent = 'Повторить доступ к камере';
    button.className = 'retry-button';
    button.addEventListener('click', () => this.requestPermission());
    
    // Очищаем текст статуса и добавляем кнопку
    this.statusElement.textContent = '';
    this.statusElement.appendChild(button);
  }
  
  stop() {
    if (this.stream) {
      this.stream.getTracks().forEach(track => track.stop());
      this.video.srcObject = null;
      this.stream = null;
    }
    this.updateStatus('ready', 'Камера остановлена');
  }
}

// Использование:
// const cameraManager = new CameraManager(videoElement, statusElement);