telegram web app, не отображается видео с веб-камеры на ios

Question

Возникла проблема отображения видео с веб-камеры внутри телеграм аппки на яблоке. На андроиде и на пк всё работает, на яблоке видео в браузере тоже отображается, но при заходе в телеграм аппку с яблока нет вывода изображения с вебки (хотя даю разрешение на использование камеры), даже не знаю в чем может быть проблема. В eruda в консоли нет ошибок, тег video есть в разметке. Буду благодарен за любые ответы, которые хоть как-то потенциально могут решить проблему Проект написан на react, использовал face-api.js для наложения кепки на голову в режиме реального времени. Ссылка на аппку https://t.me/test4525623_bot/mtsMask Ссылка на проект https://danchikslaziet.github.io/testTG

Код App.js (других компонентов по сути нет)

import React, { useEffect, useRef } from 'react';
import {detectAllFaces} from 'face-api.js';
import Webcam from "react-webcam";
import * as faceapi from 'face-api.js';
import imgPath from './images/overlay-cap.png';
import './App.css';

const App = () => {
  const webcamRef = useRef(null);
  const canvasRef = useRef(null);
  const hatImageRef = useRef(null);


  useEffect(() => {
    function parseQuery(queryString) {
      let query = {};
      let pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&');
      for (let i = 0; i < pairs.length; i++) {
          let pair = pairs[i].split('=');
          query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
      }
      return query;
    }

    let app = window.Telegram.WebApp;
    let query = app.initData;
    let user_data_str = parseQuery(query).user;
    // let user_data = JSON.parse(user_data_str)
    app.expand();
    app.ready();
    console.log(user_data_str);

    const startFaceDetection = async () => {
      const MODEL_URL = process.env.PUBLIC_URL + '/models';
      await faceapi.loadTinyFaceDetectorModel(MODEL_URL);
      await faceapi.loadFaceLandmarkModel(MODEL_URL);
      await faceapi.loadFaceRecognitionModel(MODEL_URL);
      await faceapi.loadSsdMobilenetv1Model(MODEL_URL);
      
      const videoEl = webcamRef.current.video;
      const canvas = canvasRef.current;

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

      setInterval(async () => {
        const detections = await detectAllFaces(videoEl).withFaceLandmarks();
        context.clearRect(0, 0, canvas.width, canvas.height);

        detections.forEach((detection) => {
          const hatImage = hatImageRef.current;
          hatImage.style.display = 'none';
          hatImage.style.position = 'absolute';

          const landmarks = detection.landmarks;
          const leftEyeBrow = landmarks.getLeftEyeBrow();
          const rightEyeBrow = landmarks.getRightEyeBrow();

          const leftPoint = leftEyeBrow[0];
          const rightPoint = rightEyeBrow.splice(-1)[0];
          const width = (rightPoint.x - leftPoint.x)*2;

          canvas.width = width;
          canvas.height = 91;
          canvas.style.width = width + 'px';
          canvas.style.left =  (leftPoint.x - width * 0.10) - 10 + 'px';
          canvas.style.top = (leftEyeBrow[0].y - width * 0.55) + 'px';

          context.drawImage(hatImage, 0, 0, canvas.width, 91);
        });
      }, 300);
    };
    startFaceDetection();
  }, []);

  return (
    <div className='App'>
      <Webcam
        className='App__video'
        ref={webcamRef}
        mirrored={false}
        style={{
          position: 'absolute',
          left: 0,
          top: 0,
          zIndex: 1,
        }}
      />
      <canvas
        ref={canvasRef}
        style={{
          position: 'absolute',
          zIndex: 100,
          aspectRatio: '171 / 91'
        }}
        />
      <img
        ref={hatImageRef}
        src={imgPath} // Путь к изображению кепки
        className='cap'
        alt="Hat"
        style={{
          zIndex: 100,
        }}
      />
    </div>
  );
};

export default App;

БЛОГ НА HUSL

telegram web app, не отображается видео с веб-камеры на ios

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