How can I open the apple's app Camera from a link in safari ?
Something like :
<a href='apple:camera'>Open camera APP</a>
it's about using the qrcode.
I am not sure if you can achieve this.
Check this link
Nonetheless, can you you try the following solution (I think it opens the gallery not photo app)?
<script type="text/javascript" charset="utf-8">
window.location = "photos-redirect://";
</script>
or
<script type="text/javascript" charset="utf-8">
window.location = "photos://";
</script>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<title>Avacados</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ar.marketscale.com/test/test.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<a style="display:none" id="ar-link" href="intent://arvr.google.com/scene-viewer/1.0?file=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf&mode=ar_only&link=https://www.google.com&sourceid=chrome&ie=UTF-8&title=Acocados#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=https://developers.google.com/ar;end;">Avovados</a>
<footer>
<script type="text/javascript">
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
$(document).ready(function(){
setTimeout(function(){
// $('#ar-link').trigger('click');
$('#ar-link').click(function() {
this.click();
}).click();
},1000);
});
} else {
window.location.href = "https://ar.marketscale.com/test/testfallback.css"
}
</script>
</footer>
<!-- đ Include both scripts below to support all browsers! -->
<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
src="https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js">
</script>
<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
src="https://unpkg.com/#google/model-viewer/dist/model-viewer-legacy.js">
</script>
</body>
</html>
I am using Scene Viewer and triggering the explicit intent from HTML. It's running in ar_only. The goal is when you visit this website it launches AR automatically. I have a URL and I have a QR code that points to that URL.
When you scan the QR code it starts AR no problem. When you type in the URL it sends you to the fallback website. I know the phone is compatible because it works when you scan the QR code. I have also tried this on other phones and it gives me the same results.
I think Javascript is the issue. I'm using it to "click" or run this automatically. Any ideas on what could be going on?
the link is ar.marketscale.com/test/ar_avacado.html
here is a QR code that links to that URL:
QR CODE
IN my Phonegap ios project i have an i frame and src of Iframe is a local html page within the same www folder . inside the html (IFrame source) one button and onlick listener. i need to open one website while clicking that button in InAppBrowser or in safari (new window). i cannot able to access phonegap methods from the html file (IFrame source), i includeed cordova on both html files, my source html page given bellow, this page is shown in an Iframe.
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="js/libs/jquery.js"></script>
<script src="adv.js"></script>
<script>
$(document).ready(function () {
$('#advArea').find('button').on('click', function (e) {
e.preventDefault();
var path = "http://www.google.com");
console.log(path);
//window.open(path,'__system');
//need to acces inApp Browser from here
})
});
</script>
</head>
<body>
<div id="advArea">
<button></button>
</div>
</body>
</html>
In your "parent" page where your iFrame is, create the below function
function popnew(path) {
navigator.app.loadUrl(link, { 'openExternal' : true });
}
then you call the above function for any button/link in the iFrame
<button onclick="javascript:parent.popnew('http://www.stackoverflow.com')"></button>
when I tried to run even a blank app, the console output is:
"Error calling js to fire nativeReady event. Did you include cordova.js in your html script tag?"
Doctype is:
<!DOCTYPE html>
And this are script references:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type='text/javascript' src='js/angular.min.js'></script>
<script type='text/javascript' src='js/angular-ui.js'></script>
<script type='text/javascript' src='js/jqm-setup.js'></script>
<script type="text/javascript" src="js/jquery.mobile.js"></script>
<script type="text/javascript" src="js/jquery-mobile-angular-adapter.min.js"></script>
<script type="text/javascript" src="cordova-2.5.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>-->
This error disappears only when I remove the jquery mobile stuff...
Thanks in advance.
I would avoid JQuery Mobile in PhoneGap applications. I got to meet Andrew Trice, Adobe PhoneGap Evangelist, at a DC Droid Meet and listened to him present in a few Webinars. I've heard him say more than once that JQuery Mobile has huge performance issues. He recommended using other frameworks if possible. There are many other frameworks out there with good design, widgets, and samples that make them easy to learn. I think he even created his own called AppUI. Just look around and you'll find some really cool ones.
That error is definitely what it says: your cordova.js file is not being included correctly. Fix that first.
To answer your larger question: Angular, jQuery Mobile, and PhoneGap will play together but it comes with some big caveats.
The biggest issue is that the jQuery Angular Mobile adapter is currently abandoned while they invest time in building a better solution: angular-jqm. That means that the adapter only works with outdated versions of the libraries.
Second: those outdated library versions have some issues working with Windows Phone. These are fixable, too, but lock you into an even less maintainable version of them.
So here is the setup:
<script src="javascripts/vendor/jquery-mobile-1.3.1.js"></script>
<!-- this angular-1.0.6 includes a patch to support WP8 URLs: https://github.com/angular/angular.js/issues/2303 -->
<script src="javascripts/vendor/angular-1.0.6.js"></script>
<script src="javascripts/vendor/jquery-angular-mobile-adapter-1.3.2.js"></script>
Unfortunately I was never able to get partials to load via XHR so I included all pages in index.html document.
<body ng-controller="AppController">
<div data-role="page" id="first" ng-controller="FirstController">
<h1>First Page</h1>
<p>{{foo}}</p>
<p>Second Page</p>
</div>
<div data-role="page" id="second" ng-controller="SecondController">
<h2>Second Page</h2>
</div>
</body>
Then you need to switch off a few niceties in the JavaScript and set up your routes:
<script>
var so_example = angular.module('so_example', []).
config(function ($routeProvider, $locationProvider, $compileProvider) {
// turn off html5 mode so that we just navigate around using hashes
$locationProvider.html5Mode(false).hashPrefix("");
// allow for the odd URLs included in Windows Mobile PhoneGap
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel|x-wmapp0):/);
$routeProvider.
when('/second', {
templateUrl: '#second',
jqmOptions: { transition: 'slide' }
}).
when('/', {
templateUrl: "#first"
});
}).
controller("FirstController", function ($scope) {
$scope.foo = "Hello, World!";
}).
controller("SecondController", function ($scope) {
});
</script>
Now you need to leverage the Cordova library before you bootstrap Angular to your HTML:
var app = (function () {
function onDeviceReady() {
angular.bootstrap(document, ['so_example']);
$.mobile.phonegapNavigationEnabled = true;
}
return {
initialize: function() {
document.addEventListener('deviceready', onDeviceReady, false);
}
};
})();
app.initialize();
I embedded phoneGap in my UIWebView, referenced to this doc:
http://docs.phonegap.com/en/2.2.0/guide_cordova-webview_ios.md.html#Embedding%20Cordova%20WebView%20on%20iOS
And in the index.html, I write this sample code:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
alert(âjquery loadedâ);
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
after the webview loaded, the "body" can be shown, but the alert can't be pop out. So the jquery.js is not loaded? Or something else is wrong?
Edit:
I added "http:" to the src, but not work.
Thanks!
change
alert(âjquery loadedâ);
to
alert("jquery loaded");
or
alert('jquery loaded');
Add http or https to your code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
The above should work for you.
Did you add the Cordova file?
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="./cordova-2.3.0.js"></script>
<script>
$(document).ready(function() {
alert(âjquery loadedâ);
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Also as much as phonegap uses HTML 5 it still requires a bit different style of writing your code. Everypage you make should all be in the same index page because Cordova loads at startup in your project. If you navigate away from the page Cordova needs to reload.
Did you copy jquery file at www forder (www/jquery.js). I use jquery too, mine is www/js/jquery.js
Try this!!!
I am new to PhoneGap and would like to know how to save an in-App image to Photos in iOS.
While I was able to use
navigator.camera.getPicture
with options
quality:50, destinationType:Camera.DestinationType.DATA_URL,saveToPhotoAlbum: true
to save a picture taken with the camera to Photos, I am now trying to find out how to save an in-App image to Photos.
Consider the following PhoneGap - Cordova page where the element myPhoto holds imagedata such as "data:image/jpeg;base64,"...
<html>
<head>
<title>Save Image</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8">
function savePicture(){
//this is where the magic would happen
//how can I save myPhoto to Photos?
//output imageData to a jpg or png file which would show up in Photos?
}
</script>
</head>
<body>
<button onclick="savePicture();">Save Photo</button> <br>
<input type="hidden" name="myPhoto" id="myPhoto" value="">
</body>
</html>
Question:
What should savePicture() do to save the imagedata from myPhoto to Photos in iOS via Phonegap?
Maybe you could try the plugin I wrote for IOS (If you want to save a canvas element to photogallery, you could get the dataURI of the canvas the use the downloadWithUrl method below). Hope it works for you.
here is the git link: https://github.com/Nomia/ImgDownloader
Short Example:
document.addEventListener("deviceready",onDeviceReady);
//google logo url
url = 'https://www.google.com/images/srpr/logo11w.png';
onDeviceReady = function(){
cordova.plugins.imgDownloader.downloadWithUrl(url,function(){
alert("success");
},function(){
alert("error");
});
}
//also you can try dataUri like: 1px gif
//url = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
you can also save a local file to image gallery use the download method
I recently came across the following Phonegap plugin for saving Canvas images to Photos in iOS:
https://github.com/devgeeks/Canvas2ImagePlugin
Follow the readme instructions for importing the plugin and then you can use it the following way:
<html>
<head>
<title>Save Image</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="../Canvas2Image/Canvas2ImagePlugin.js"></script>
<script type="text/javascript" charset="utf-8">
var canvas2ImagePlugin; //devgeeks plugin for saving canvas images to photo gallery
function onDeviceReady() {
canvas2ImagePlugin = window.plugins.canvas2ImagePlugin;
}
function savePicture(){
canvas2ImagePlugin.saveImageDataToLibrary(function(msg){console.log(msg);},function(err){console.log(err);},'mycanvas');
}
</script>
</head>
<body>
<canvas id="myCanvas" width="500px" height="300px"> <strong>[Your browser can not show this example.]</strong> </canvas>
<button onclick="savePicture();">Save Photo</button> <br>
</body>
</html>