如何在react.js中的web应用程序上添加摄像头？

Question

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

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

我有这个错误：

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

我知道使用“react-html5-camera-photo”库，带有“getusermedia”的相机不支持带有chrome或firebox的iPhone，所以我在Safari下工作，但尽管经过多次尝试，我找不到解决方案。我还看了如何在我的iPhone上授予Safari权限，但我找不到解决方案。

因此，如果您知道如何在react.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？