0

Hi i am using React Webcam (https://github.com/mozmorris/react-webcam) with Ant Design (https://ant.design/components/modal/). My goal is display webcam when toggle a modal, take screenshot and display it. My project works normally on PC but on real mobile device, react webcam does not show on the modal. There's also no "access camera permission" warning on mobile. After few debug, i figure out that in mobile device, the react webcams still render as <video autoplay="" playsinline=""></video> but only display a white block. Here is my code:

index.js:

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

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

App.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>
        )
    }
};
1
  • could you create a code sandbox?
    – blueseal
    Feb 24, 2020 at 14:46

1 Answer 1

0

Your app probably is using HTTP instead of HTTPS, and, on mobile, it'll not even ask you for the permissions. I ran into the same problem and found this simple answer by Micro.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.