Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/23.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs Cordova摄像头插件没有';不能在react js组件中工作_Reactjs_Camera_React Router_Cordova Plugins_Phonegap - Fatal编程技术网

Reactjs Cordova摄像头插件没有';不能在react js组件中工作

Reactjs Cordova摄像头插件没有';不能在react js组件中工作,reactjs,camera,react-router,cordova-plugins,phonegap,Reactjs,Camera,React Router,Cordova Plugins,Phonegap,我正在用react js和react路由器构建一个PhoneGap混合应用程序,该应用程序使用cordova摄像头插件。我正在使用PhoneGap开发者应用程序在iPhone上测试该应用程序。问题是相机没有显示在按钮上。任何帮助都将不胜感激。以下是摄像头组件代码: import React from 'react'; import '../css/poc-form.css'; import '../css/POCButton.css'; class Camera extends React.C

我正在用react js和react路由器构建一个PhoneGap混合应用程序,该应用程序使用cordova摄像头插件。我正在使用PhoneGap开发者应用程序在iPhone上测试该应用程序。问题是相机没有显示在按钮上。任何帮助都将不胜感激。以下是摄像头组件代码:

import React from 'react';
import '../css/poc-form.css';
import '../css/POCButton.css';

class Camera extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        value: '' };

      this.takePicture = this.takePicture.bind(this);
    }

takePicture(event) {
      alert('take a picture');
      navigator.camera.getPicture(onSuccess, onFail, {  
        quality: 50, 
        destinationType: Camera.DestinationType.DATA_URL, 
        sourceType: Camera.SourceType.CAMERA
     });  

     function onSuccess(imageData) { 
        var image = document.getElementById('myImage'); 
        image.src = "data:image/jpeg;base64," + imageData; 
     }  

     function onFail(message) { 
        alert('Failed because: ' + message); 
     } 
    event.preventDefault();
}


 render() {
      return (
        <div>
          <link rel="stylesheet" type="text/css" href="poc.css"/>
        <h1>Client ID Scanner</h1>
            <button id = "takePicture" className = "POCButton" onClick={this.takePicture} >Take Picture</button>
            <img id = "myImage" ></img>
        </div>
      );
    }
  }
  export default Camera;
从“React”导入React;
导入“../css/poc form.css”;
导入“../css/POCButton.css”;
类。组件{
建造师(道具){
超级(道具);
此.state={
值:'};
this.takePicture=this.takePicture.bind(this);
}
拍照(活动){
警惕(“拍照”);
navigator.camera.getPicture(onSuccess,onFail,{
质量:50,
destinationType:Camera.destinationType.DATA\u URL,
sourceType:Camera.sourceType.Camera
});  
函数onSuccess(imageData){
var image=document.getElementById('myImage');
image.src=“data:image/jpeg;base64,”+imageData;
}  
函数onFail(消息){
警报('失败原因:'+消息);
} 
event.preventDefault();
}
render(){
返回(
客户端ID扫描器
拍照
);
}
}
导出默认摄像机;

1.一旦您在浏览器中运行应用程序,然后在react项目中使用npm run build--p进行构建,一旦完成构建,请复制react项目中的www文件夹

2.完成以下操作

3.在xcode中创建cordova示例应用程序后,只需将此摄像头插件添加到项目中即可 cordova插件添加cordova插件摄像头

  • 然后在cordova应用程序的暂存文件夹中,请将以下WWW文件夹粘贴到cordova项目中

  • 5.然后最终在ipod或idevices中运行cordova项目。它会起作用。希望它能帮助您

    Hi@arvind,当我使用window.cordova.plugins.camera-inside-react组件时,webpack不允许我构建,并且说摄像头不可用。我如何告诉您解决此错误,因为一旦加载cordova,摄像头插件将可用。我正在使用Phonegap,在我按照您的指示将构建文件复制到Phonegap的www文件夹后,cordova将在运行时加载。