CODEWITHSUNDEEP
reactjscamerareact-routercordova-pluginsphonegap
Jela
Jela

Reputation: 51

Cordova camera plugin doesn't work in react js component

I'm building a PhoneGap hybrid app with react js and react-router that uses cordova camera plugin. I'm testing the app on iPhone using PhoneGap developer app. The problem is that the camera doesn't show on the button click. Any help would be greatly appreciated. Here is the Camera component code:

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;

Upvotes: 1

Views: 1174

Answers (1)

arvind grey
arvind grey

Reputation: 160

1.once you run the app in the browser then take build using npm run build -- -p in react project and once its get completed built ,please copy the www folder in your react project

2.done the following https://cordova.apache.org/docs/en/latest/guide/cli/

3.once you created cordova sample app in xcode just add this camera plugin to the project cordova plugin add cordova-plugin-camera https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/

  1. then in staging folder of your cordova app, please paste the following WWW folder in the cordova project

5.then finally run the cordova project in ipod or idevices.it will work.hope it helps you

Upvotes: -1

Related Questions