Ant Design modal 上的网络摄像头未在移动设备上显示答案

【问题标题】：Webcam on Ant Design modal does not show on mobile deviceAnt Design modal 上的网络摄像头未在移动设备上显示
【发布时间】：2020-06-07 16:32:02
【问题描述】：

您好，我正在使用带有 Ant Design (https://ant.design/components/modal/) 的 React Webcam (https://github.com/mozmorris/react-webcam)。我的目标是在切换模式时显示网络摄像头，截取并显示它。我的项目在 PC 上正常工作，但在真正的移动设备上，反应网络摄像头没有显示在模式上。移动设备上也没有“访问相机权限”警告。经过几次调试，我发现在移动设备中，react 网络摄像头仍然呈现为<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'));

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>
        )
    }
};

【问题讨论】：

你能创建一个代码沙箱吗？

标签： reactjs antd

【解决方案1】：

您的应用可能使用的是 HTTP 而不是 HTTPS，而且在移动设备上，它甚至不会询问您的权限。我遇到了同样的问题，并通过Micro找到了这个简单的答案。

【讨论】：