У меня есть проект Ionic, где мне нужен плагин Camera Camera (который я сейчас установил успешно). Но в моем проекте Camera API по-прежнему недоступен, т.е. Я получаю сообщение об ошибке:
ReferenceError: Camera is not defined
at Scope.$scope.takePic
Как мне активировать API-интерфейсы плагинов, которые будут использоваться в проекте Ionic? Документация об этом кажется довольно небезупречной или очень хорошо скрытой.
Выполните следующие действия:
1. Включить ngCordova до cordova.js
Вы можете найти то же описание в документах.
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
2. Добавьте плагин в командной строке
Этот раздел можно найти в документации в разделе вашего конкретного плагина.
ionic plugin add org.apache.cordova.camera
3. Помните, что кордова недоступна при работе в браузере
Поэтому при использовании $cordovaCamera.getPicture библиотека вызывает внутренне navigator.camera.getPicture, которая недоступна при разработке в браузере рабочего стола. Дальнейшее чтение
В настоящее время команда ngCordova/Ionic работает над mocks, которую вы можете использовать, чтобы избежать подобных проблем.
Вы можете скачать ngCordova здесь: http://ngcordova.com/docs/install/
Обновить: теперь Ionic Native, это похоже на ngCordova, но для ES6 и TypeScript.
Откройте терминал в корневом каталоге приложения и добавьте плагин через
cordova plugin add org.apache.cordova.camera
Edit:
новая команда:
cordova plugin rm cordova-plugin-camera //remove
cordova plugin add cordova-plugin-camera //add
Я пытаюсь понять, как использовать стандартные плагины Cordova с самой ионикой, но ионная команда недавно построила ngCordova - обертку angular для общих API-интерфейсов cordova, которая включает в себя Camera api, который вы хотите использовать. Предлагает использовать это: см. их документы для получения дополнительной информации.
Это обычная проблема при тестировании в браузере: http://ngcordova.com/docs/common-issues/
Вам нужно ввести Camera в контроллер, например:
.controller('MyCtrl', function($scope, Camera) {
Обратите внимание, что перед Camera нет знака доллара. Это действительно должно быть документировано более четко.
Кроме того, вам нужно будет добавить factory к вашим services.js:
.factory('Camera', ['$q', function($q) {
return {
getPicture: function(options) {
var q = $q.defer();
navigator.camera.getPicture(function(result) {
// Do any magic you need
q.resolve(result);
}, function(err) {
q.reject(err);
}, options);
return q.promise;
}
}
}])
Вы можете установить плагин запустите:
$ cordova plugin add org.apache.cordova.camera
Теперь, когда у вас установлен плагин, вы можете использовать API-интерфейс камеры из своего Javascript:
function takePicture() {
navigator.camera.getPicture(function(imageURI) {
// imageURI is the URL of the image that we can use for
// an <img> element or backgroundImage.
}, function(err) {
// Ruh-roh, something bad happened
}, cameraOptions);
}
Это заставит пользователя сделать снимок и вернет локальный URL-адрес изображения, которое вы затем сможете использовать внутри тега или использовать для фонового изображения CSS.
Вы можете использовать приведенный ниже код для простой обертки над плагином камеры, что упрощает асинхронное захват фотографий:
module.factory('Camera', ['$q', function($q) {
return {
getPicture: function(options) {
var q = $q.defer();
navigator.camera.getPicture(function(result) {
// Do any magic you need
q.resolve(result);
}, function(err) {
q.reject(err);
}, options);
return q.promise;
} } }]);
Этот factory может использоваться в ваших контроллерах следующим образом:
.controller('MyCtrl', function($scope, Camera) {
$scope.getPhoto = function() {
Camera.getPicture().then(function(imageURI) {
console.log(imageURI);
}, function(err) {
console.err(err);
});
};
Что откроет Камеру при вызове getPhoto() (например, нажатием кнопки).
В зависимости от того, как вы запрашиваете данные с камеры и используете их в своей разметке Angular, вам может потребоваться переименовать изображения в белый список, чтобы Angular разрешал файлы://URL (например, если вы используете ng -src для тега):
module.config(function($compileProvider){
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})