Menu
I just set up my first ionic 2 app (I've used ionic 1 fairly extensively). I'm trying to use the ionic-native camera preview plugin.
The setup was pretty straight forward:
npm install -g ionic cordova ionic start timesnap --v2 ionic platform add android ionic platform add ios ionic plugin add cordova-plugin-camera-preview --save Then I copied and pasted the example code into the about page:
import { CameraPreview, CameraPreviewRect } from 'ionic-native'; // camera options (Size and location) let cameraRect: CameraPreviewRect = { x: 100, y: 100, width: 200, height: 200 }; // start camera CameraPreview.startCamera( cameraRect, // position and size of preview 'front', // default camera true, // tap to take picture false, // disable drag true, // send the preview to the back of the screen so we can addoverlaying elements 1 //alpha ); I launched the app using the following commands:
ionic emulate android -lcs ionic emulate ios -lcs --target='iPhone-6' At first the camera just wasn't showing up then I ran chrome://inspect and saw warnings about Cordova missing "try running in an emulator", but this was while running in an android emulator. I tried iOS too and saw the same results.
Any ideas why cordova isn't loading?
Here is the full error log from chrome://inspect while running in an android emulator:
Update... index.html
(it's just the standard one generated by ionic)
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Ionic App</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico"> <link rel="manifest" href="manifest.json"> <meta name="theme-color" content="#4e8ef7"> <!-- cordova.js required for cordova apps --> <script src="cordova.js"></script> <!-- un-comment this code to enable service worker <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js') .then(() => console.log('service worker installed')) .catch(err => console.log('Error', err)); } </script>--> <link href="build/main.css" rel="stylesheet"> </head> <body> <!-- Ionic's root component and where the app will load --> <ion-app class="trans"></ion-app> <!-- The polyfills js is generated during the build process --> <script src="build/polyfills.js"></script> <!-- The bundle js is generated during the build process --> <script src="build/main.js"></script> </body> </html> 
735
inside the head of your index. html document. The Phonegap builder will find and include the correct cordova. js file for each build (Android, Win phone, iOS).
In cordova there is a config. xml that automatically configures and builds the native project/app and the user doesn't do anything manually. While with a capacitor you can open the project and do changes in it. This can be one of the reasons why Capacitor developed and people should use it.
This is quite late but anyone going through the same problem might benefit from this answer.First try to add browser by running below command ionic platform add browser and then run command ionic run browser.
which is the difference between
ionic serve and ionic run browser?Ionic serve - runs your app as a website (meaning it doesn't have any Cordova capabilities). Ionic run browser - runs your app in the Cordova browser platform, which will inject cordova.js and any plugins that have browser capabilities
You can refer this link to know more difference between ionic serve and ionic run browser command
Update
From Ionic 3 this command has been changed. Use the command below instead;
ionic cordova platform add browser
ionic cordova run browser
You can find out which version of ionic you are using by running: ionic --version
199
The livereload plugin fails to serve cordova.js file and serves // mock cordova file during development.
FIX: You need go to node_modules/@ionic/app-scripts/dist/dev-server/serve-config.js
and replace
exports.ANDROID_PLATFORM_PATH = path.join('platforms', 'android', 'assets', 'www'); to
exports.ANDROID_PLATFORM_PATH = path.join('platforms', 'android', 'app', 'src', 'main', 'assets', 'www'); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
