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

Posted 2023-02-21

【中文标题】如何在 react.js 中的 Web 应用程序中添加摄像头？

【英文标题】：How to add the camera on a web application in react.js?

【发布时间】：2019-09-19 05:50:59

【问题描述】：

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

我目前正在用 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>

【参考方案1】：

你试过了吗=>

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

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