Len*_*nny 50 camera cordova ionic-framework ionic2
我刚刚设置了我的第一个离子2应用程序(我已经相当广泛地使用了离子1).我正在尝试使用离子原生相机预览插件.
设置很简单:
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
Run Code Online (Sandbox Code Playgroud)
然后我将示例代码复制并粘贴到about页面中:
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
);
Run Code Online (Sandbox Code Playgroud)
我使用以下命令启动了应用程序:
ionic emulate android -lcs
ionic emulate ios -lcs --target='iPhone-6'
Run Code Online (Sandbox Code Playgroud)
起初相机刚刚没有出现然后我跑了chrome://inspect,看到关于Cordova的警告错过了"尝试在模拟器中运行",但这是在Android模拟器中运行时.我也试过iOS,看到了相同的结果.
任何想法为什么cordova没有加载?
这是chrome://inspect在Android模拟器中运行时的完整错误日志:
更新... index.html
(这只是离子产生的标准)
<!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>
Run Code Online (Sandbox Code Playgroud)
小智 146
这已经很晚了但是任何遇到同样问题的人都可能从这个答案中受益.首先尝试通过运行以下命令添加浏览器
ionic platform add browser,然后运行命令ionic run browser.
这是区别
ionic serve and ionic run browser?离子服务 - 将您的应用程序作为网站运行(意味着它没有任何Cordova功能).Ionic运行浏览器 - 在Cordova浏览器平台中运行您的应用程序,它将注入cordova.js和任何具有浏览器功能的插件
您可以参考此链接以了解ionic serve和ionic run browser命令之间的更多区别
更新
从Ionic 3开始,此命令已更改.请改用以下命令;
ionic cordova platform add browser
ionic cordova run browser
您可以通过运行找出您正在使用的离子版本: ionic --version
小智 59
livereload插件无法提供cordova.js文件,并在开发过程中提供// mock cordova文件.
FIX:你需要去node_modules/@ionic/app-scripts/dist/dev-server/serve-config.js
并替换
exports.ANDROID_PLATFORM_PATH = path.join('platforms', 'android', 'assets', 'www');
Run Code Online (Sandbox Code Playgroud)
至
exports.ANDROID_PLATFORM_PATH = path.join('platforms', 'android', 'app', 'src', 'main', 'assets', 'www');
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
89964 次 |
| 最近记录: |