Ant Design模态上的网络摄像头不会显示在移动设备上

Question

嗨，我正在使用React网络摄像头(https://github.com/mozmorris/react-webcam)与蚂蚁设计(https://ant.design/components/modal/)。我的目标是在切换模式时显示网络摄像头，截图并显示它。我的项目在PC上正常工作，但在真实的移动设备上，react网络摄像头不显示在模式上。手机上也没有"访问摄像头权限"警告。经过几次调试，我发现在移动设备中，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>
)
}
};

Answer 1

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