如何在 react.js 的 Web 应用程序上添加相机

Question

我来找你，因为我有一个我无法解决的问题。

我目前正在 react.js 中构建一个 Web 应用程序，并且正在尝试实现相机功能。在我的计算机上的本地主机中，一切正常，但我无法在手机上启动相机模式。

我有这个错误：

"相机错误：在当前上下文中，用户代理或平台不允许该请求，可能是因为用户拒绝了权限。">

我知道使用"react-html5-camera-photo"库，带有"getusermedia"的相机在带有chrome或firebox的iPhone上不受支持，所以我在Safari下工作，但尽管进行了多次尝试，我还是找不到解决方案。我还研究了如何在iPhone上授予Safari的权利，但我找不到解决方案。

因此，如果您知道如何在手机上获得相机功能.js，我就是一个接受者！

提前感谢您的回答！

我的代码 ：

onTakePhoto (dataUri) {
  // Do stuff with the dataUri photo...
  //console.log('takePhoto');
  console.log(dataUri);
  this.setState(() => ({dataUri}));
  storage.ref('images').putString(dataUri, 'base64', {contentType:'image/jpg'}).then(function(snapshot) {
    console.log('takePhoto')
  });
}
render() {
    return (
            <div style={style}>
            <Link to='/'>
                <button>Back</button>
            </Link>
            <br/>
            <br/>
            <progress value={this.state.progress} max="100"/>
            <br/>
            <Camera
              onTakePhoto = { (dataUri) => { this.onTakePhoto(dataUri); } }
            />
                <button onClick={this.screenshot.bind(this)}>Capture</button>
                <br/>
                <br/>
                { this.state.url ? <img src={this.state.url} /> : null }
            </div>

Answer 1

你试过这个吗 =>

navigator.getMedia = ( navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia ||
                         navigator.msGetUserMedia);

来源 => https://developer.mozilla.org/fr/docs/WebRTC/Prendre_des_photos_avec_la_webcam ？