how to use cordova camera plugin with framework7 react

Questions
1

Hello,
I’ve been trying for a long time to integrate Cordova’s camera plugin with the React library but whether it’s in the app.js, app.jsx, or cordova-app.js file, nothing even works the line

Blockquote ```
document.addEventListener(“deviceready”, onDeviceReady, false);
function onDeviceReady() {
console.log(navigator.camera);
}

So if you could tell me how to implement the cordova plugins, I would be delighted because in the official doc or even on different website, nothing explains to me how to implement them in the react or vue framework7.

Only for Framework7 Core but for React, Vue or Svelte nothing.

Please answer me as soon as possible.

And little suggestions for experienced contributors, you should add the installation and initialization of cordova plugin for the React, Vue and Svelte libraries in the official doc ??

Thank you.
1 Like
2

please someone should help :pray: with this question its not only camera plugin but cordova plugins as a whole its getting furstrating

3

Would be good to see some more complete code examples on where exactly and what do you try

4

Hello,
As in the post written above, I am trying to implement the cordova plugin but it is psoe with all the different cordova plugins in the application made with the Framework7 React but it also arises with Vue or Svelte.

I knew how to do it with Framework7 v1 and v2 in JsCore, but with version 5 and the React, Vue and Svelte libraries, I have no explanation of the procedure.

Here is the whole code of the page that calls the cordova camera plugin and when I build it with cordova and run it on my smartphone it shows me a totally blank page.

     import React from 'react';
    import {
      Page,
      Navbar,
      NavTitle,
      NavTitleLarge,
      Link,
      Toolbar,
      Block,
      Row,
      Button,
      Col,
    } from 'framework7-react';

    import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
    import { faCamera } from '@fortawesome/free-solid-svg-icons';

    export default class extends React.Component {

      constructor(props) {
        super(props)

        this.state = {  

        }
      }

      componentDidMount() {
        document.addEventListener("deviceready", this.onDeviceReady, false);
      }

      onDeviceReady() {
      navigator.camera.getPicture(this.cameraSuccess, this.cameraError, this.cameraOptions);
          }

          cameraOptions(srcType) {
            var options = {
              quality: 50,
              destinationType: Camera.DestinationType.DATA_URL,
              sourceType: srcType,
              encodingType: Camera.EncodingType.JPEG,
              mediaType: Camera.MediaType.PICTURE,
              allowEdit: true,
              correctionOrientation: true
            }
          }

          cameraSuccess(imgURI) {
            var image = document.getElementById('ImageId');
            image.src = imgURI;
          }

          cameraError(message) {
            alert('Erreur: ' + message);
          }

      render() {
        return (
        <Page name="home">
        <Navbar>
          <NavTitle><b className="navbartitle">Title</b></NavTitle>
        </Navbar>
        <Row>
          <Col width="10"></Col>
          <Col width="80">
            <p className="ParamCom1 NameProf1">Appuyer sur le button pour prendre une photo avec la Camera de votre téléphone.</p>
              </Col>
              <Col width="10"></Col>
            </Row>
            <Row>
             <Col width="10"></Col>
             <Col width="80">
               <Button raised fill>
                  <FontAwesomeIcon icon={faCamera} size="2x" color="white" />
               </Button>
             </Col>
             <Col width="10"></Col>
            </Row>
            <Row>
              <Col width="20"></Col>
              <Col width="60">
                <img id="ImageId" src='' />
              </Col>
              <Col width="20"></Col>
            </Row>
          </Page>
            )
          }
        };

The “onDeviceReady” function works because the console.log reacts but otherwise the navigator.camera.getPicture object does not work, I ask you where the problem could come from.

My English is from google translate so sorry if I’m not clear enough.

Thank you for your help.

5
  1. Why you open/request camera on page mounted. I guess will be correct if user press some button here
  2. onDeviceReady callback not needed here, because obviously page loaded already AFTER device ready
  3. cameraOptions you pass to navigator.camera.getPicture should be an object with properties, but you send a method
6

i installed more than one cordova plugin but after building my react code and i log window.cordova.plugins it shows only the browsertab plugin therefore making the below flashlight plugin not to respond

window.cordova.plugins.flashlight.available(function(isAvailable) {
if (isAvailable) {
alert(“flashlight is on”);
// switch on
window.cordova.plugins.flashlight.switchOn(
function() {}, // optional success callback
function() {}, // optional error callback
{intensity: 0.3} // optional as well
);

    // switch off after 3 seconds
    setTimeout(function() {
      window.cordova.plugins.flashlight.switchOff(); // success/error callbacks may be passed
    }, 3000);
 
  } else {
    alert("Flashlight not available on this device");
  }
});
}