Вебкамера на моде Ant Design не отображается на мобильном устройстве

Question

Привет, я использую React Webcam (https://github.com/mozmorris/react-webcam) с Ant Design (https://ant.design/components/modal/). Моя цель - показывать веб-камеру, когда переключаешь модал, делаю скриншот и показываю его. Мой проект работает нормально на P C, но на реальном мобильном устройстве реагирующая веб-камера не отображается на модальном. На мобильном телефоне также отсутствует предупреждение «Доступ к камере». После нескольких отладок я выяснил, что на мобильном устройстве реагирующие веб-камеры по-прежнему отображаются как <video autoplay="" playsinline=""></video>, но отображают только белый блок. Вот мой код:

index. js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Приложение. js:

import React from 'react';
import { Button } from 'antd';
import WebcamModal from './WebcamModal';
import 'bootstrap/dist/css/bootstrap.min.css';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false,
      screenshot: null,
    };
    this.saveScreenshot= this.saveScreenshot.bind(this);
    this.closeModal= this.closeModal.bind(this);
    this.closeModal= this.closeModal.bind(this);
  }

  saveScreenshot = (imgUrl) => {
    this.setState({
      screenshot: imgUrl
    })
  };

  showModal = () => {
    this.setState({showModal: true})
  };

  closeModal = () => {
    this.setState({showModal: false})
  };

  render() {
    return(
      <div className='wrapper'>
        {this.state.screenshot
            ? <p>
                <img src={this.state.screenshot} alt=''/>
              </p>
            : ''
        }
        <Button type="primary" onClick={this.showModal}>Open Webcam</Button>
        <WebcamModal
          isShow={this.state.showModal}
          closeModal={this.closeModal}
          saveScreenshot = {this.saveScreenshot}
        />
      </div>
    )
  }
};

WebcamModal. js:

import React from 'react';
import { Modal, Button } from 'antd';
import Webcam from "react-webcam";
import 'antd/dist/antd.css';
import './App.css';

export default class WebcamModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.webcamRef= React.createRef();
        this.closeModal= this.closeModal.bind(this);
        this.screenshot= this.screenshot.bind(this);
    }

    closeModal = () => {
        this.props.closeModal();
    };

    screenshot = () => {
        const screenshot = this.webcamRef.current.getScreenshot();
        this.props.saveScreenshot(screenshot);
        this.props.closeModal();
    };
    render() {
        return(
            <div className='webcam-wrapper'>
                <Modal
                    visible={this.props.isShow}
                    centered
                    closable={false}
                    footer={false}
                    onCancel={this.props.closeModal}
                    bodyStyle={{ padding: 14 }}
                    className='webcam-modal'
                >
                    {this.props.isShow
                        ?
                        <div className='content'>
                            <Webcam
                                audio={false}
                                ref={this.webcamRef}
                            />
                            <Button type="primary" onClick={this.screenshot} style={{marginTop: 20, marginRight: 5}}>Take Screenshot</Button>
                            <Button type="primary" onClick={this.closeModal} style={{marginTop: 20}}>Close</Button>
                        </div>
                        : ''
                    }

                </Modal>
            </div>
        )
    }
};