I use XMLHttpRequest to preload files for a game. If WebAudio isnt supported I fall back to using audio elements.
On Android it works fine in Firefox but sound does not play in chrome. Here's some testing code:
document.addEventListener('touchstart', function(event) {
event.preventDefault();
if( window.audio ) window.audio.play();
console.log( window.audio );
});
window.audio = null;
var xhr = new XMLHttpRequest();
xhr.open('GET', '/sounds/shotgun.webm', true);
xhr.responseType = 'arraybuffer';
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
var blob = new Blob( new Array( new Int8Array( xhr.response ) ), { type: 'audio/webm' } );
var url = window.URL.createObjectURL( blob )
window.audio = new Audio();
window.audio.src = url;
console.log( 'sound loaded' );
}
};
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send();
I suspect this is a Chrome for android issue with the object url...
Anyway I'm looking for a way to play sounds on Chrome for Android using cached data from an XMLHttpRequest.
This does in fact appear to be a bug. I have raised it here https://code.google.com/p/chromium/issues/detail?id=227476 and created a test case for it. When I get back from vacation I will assign it to the correct team if it has not already been triaged. I will also update this answer if I find any other work around.
I don't have an Android phone handy, but I know that in the past you needed to use window.webkitURL instead of window.URL. Maybe try:
( window.URL || window.webkitURL ).createObjectURL( blob )
Related
Does anyone have further details on how this would be done to handle multiple devices. I would like to target iPhone, Android, and Windows devices. According to this article, you can use different links. Any thoughts on how 3 different links should be used around on single element?
http://habaneroconsulting.com/insights/opening-native-map-apps-from-the-mobile-browser#.VYg3-flVikp
I usually do this:
var isiOS = (navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone') || navigator.userAgent.match('iPod'));
var isAndroid = navigator.userAgent.match('Android');
var isWP = navigator.userAgent.match('Windows Phone') || navigator.userAgent.match('IEMobile');
if (isiOS){
setTimeout(function () { window.location = siteURL; }, 25); //fall back url
$('body').append('<iframe style="visibility: hidden;" src="'+ appURI +'" />');
} else if ((isAndroid) || (isWP)){
setTimeout(function () { window.location = siteURL; }, 25); //fall back url
window.location = appURI;
} else { // if (isOtherPlatform)
window.location = siteURL;
}
Note that on iOS, you can not determine if user has the map app installed or not. If you navigate to an app which the user has not installed would result in an ugly message complaining the absent of the target app. The workaround is to open that deep link in the iframe.
Also note that you should always redirect users to the web version of maps after some seconds to provide a smooth flow.
I have serious issues loading binary image data into a simple image-element. I coded a cordova app (using Sencha touch) which loads images the following way:
xhr.open('GET', imageUrl, true);
xhr.responseType = 'blob';
xhr.addEventListener('load', function () {
if (xhr.status === 200) {
// onload needed since Google Chrome doesn't support addEventListener for FileReader
fileReader.onload = function (evt) {
image.setSrc(evt.target.result);
};
// Load blob as Data URL
fileReader.readAsDataURL(xhr.response);
}
}, false);
On Android 5 and 4.4 (these are the ones I tested) it works like a charm. Now I ran it Android 4.1 on an ASUS Tablet and the onload callback doesn't get fired. When I throw a blob in the readAsDataURL-function, at least the onload callback is fired, but the image doesn't show any image as well :(
Has anyone a suggestion, what the failure could be or what I'm doing wrong?
Ah, finally I got it to work on Android 4.1.1 (ASUS Tablet) with the following code. Another issue was, that saving an arraybuffer response from the xhr could not simply serialized, so I converted the stuff to string. Also I receive the blob taking into account, that on some systems the Blob object simply isn't there:
function arrayBufferToString(buf) {
return String.fromCharCode.apply(null, new Uint8Array(buf));
};
function stringToArrayBuffer(str) {
var buf = new ArrayBuffer(str.length*2); // 2 bytes for each char
var bufView = new Uint8Array(buf);
for (var i=0, strLen=str.length; i<strLen; i++) {
bufView[i] = str.charCodeAt(i);
}
return buf;
};
function getBlob(content, type) {
var blob = null;
// Android 4 only has the deprecated BlobBuilder :-(
try {
blob = new Blob([content], {type: type});
} catch(e) {
window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder ||
window.MozBlobBuilder || window.MSBlobBuilder;
if (window.BlobBuilder)
{
var bb = new BlobBuilder();
bb.append(content);
blob = bb.getBlob(type);
}
}
return blob;
};
cachedFile = getCachedFile(...); // not of interest here, I think :-)
if (cachedFile)
{
callback.apply(this, [window.webkitURL.createObjectURL(getBlob(stringToArrayBuffer(cachedFile.data), 'image/jpeg'))]);
}
else {
xhr.open('GET', imageUrl, true);
xhr.responseType = 'arraybuffer';
xhr.addEventListener('load', function () {
if (xhr.status === 200) {
cachedFile = {
url: imageUrl,
data: arrayBufferToString(xhr.response)
};
addCachedFile(cachedFile); // not of interest here, I think :-)
callback.apply(this, [window.webkitURL.createObjectURL(getBlob(xhr.response, 'image/jpeg'))]);
}
}, false);
// Send XHR
xhr.send();
}
Edit: Just did a little change and now used the Uint8Array Class instead of the Uint16Array Class because I got errors: "RangeError: byte length of Uint16Array should be a multiple of 2". Now it works well.
Edit2: Just saw, that the above code doesn't work out in all situations because of the usage of Uint8Array resp. Uint16Array.
Now I think I have a solid solution: I convert the binary responded by the image url into a base64 using canvas with the function from here http://appcropolis.com/blog/web-technology/javascript-encode-images-dataurl/ . Takes a little time, but still a working solution :)
I copied my code from the following link. It's a workaround for Passing Data From an InAppBrowser back to the app.
blogs.telerik.com/appbuilder/posts/13-12-23/cross-window-communication-with-cordova's-inappbrowser
The problem is that after each executescript() the Keyboard disappears.
This issue status here is "won't fix". So I'm wondering if there is an alternative solution. I only see a reference to KitKat users, but that would only represent a limited amount.
https://issues.apache.org/jira/browse/CB-5449
Suggestions?
setName: function() {
var win = window.open( "http://jsfiddle.net/tj_vantoll/K2yqc/show", "_blank",
"EnableViewPortScale=yes" );
win.addEventListener( "loadstop", function() {
win.executeScript({ code: "localStorage.setItem( 'name', '' );" });
var loop = setInterval(function() {
win.executeScript(
{
code: "localStorage.getItem( 'name' )"
},
function( values ) {
var name = values[ 0 ];
if ( name ) {
clearInterval( loop );
win.close();
$( "h1" ).html( "Welcome " + name + "!" );
}
}
);
});
});
}
Depending on your use case, it might be a feasible workaround to check if the keyboard is currently visible and avoid calling executeScript in that case.
Try using the com.ionic.keyboard plugin to get cordova.plugins.Keyboard.isVisible and use that in your setInterval function.
Good day folks.
I am stuck with a strange problem and after lots of googling I couldn't find the solution/answer
I am creating and Sencha +cordova app for android.
It simply display 10 images in loop.
my code works fine on Chrome browser in desktop.
It fails On android 4.4.2 device when I install as APK.
Please help to fix the code for android.
init: function () {
this.callParent(arguments);
//console.log('init');
if(Ext.os.name == 'Android')
baseurl = baseAndroidUrl;
else
baseurl = baseDesktopUrl;
//alert('baseurl ' + baseurl);
}
var baseurl;
var baseAndroidUrl = 'file:///android_asset/www/resources/resources/images/';
var baseDesktopUrl = '/resources/resources/images/';
var imageArray =
['page00.jpg',
'page01.jpg',
'page02.jpg',
'page03.jpg',
'page04.jpg',
'page05.jpg',
'page06.jpg',
'page07.jpg',
'page08.jpg',
'page09.jpg',
'page10.jpg'];
var counter = 0;
-----------------------------------------------
onPrePageCommand: function () {
console.log('onPrePageCommand');
if( counter === 0 )
return ;
counter--;
// Folloing dynamic updation doesn't work in android , works perfectly on desktop
Ext.getCmp('pageID').setSrc(baseurl+imageArray[counter]);
//Ext.getCmp('pageID ').doLayout();
},
onNextPageCommand: function () {
console.log('onNextPageCommand');
if( counter === imageArray.length-1 )
return ;
counter++;
Ext.getCmp('pageID').setSrc(baseurl+imageArray[counter]);
},
------------------------------------------
//initial view : work perfect for both Desktop browser and APK
{
xtype: 'image',
src:'resources/images/Page00.jpg',
id:'pageID',
mode:'image'
height:'100%',
width:'100%'
}
--------------------------------------------
Try to use a Framework for that like http://wowslider.com/ this worked great for me the last time. You can also scroll the images with your fingers (swipe them).
I am trying to generate a PDF using the jsPDF library (https://github.com/MrRio/jsPDF) from within a mobile Cordova app. I am currently testing the app on an Android 4.0.4 device but it also needs to run on Windows mobile 8. The text in the PDF document is shown correctly however any images are scrambled. See image below
I did find this page (https://coderwall.com/p/nc8hia) that seemed to indicate there is a problem with jsPDF displaying images in Cordova (see comments) but the author never posted the follow-up. Has anyone been able to use jsPDF with Cordova and properly add images to the generated PDF? My code is below, any assistance or advice would be greatly appreciated.
function demoReceipt() {
var img = new Image();
img.onError = function() {
alert('Cannot load image: "' + url + '"');
};
img.onload = function() {
createPdf2(img);
};
img.src = 'img/testlogo.png';
}
function createPdf2(myLogo) {
// var doc = new jsPDF('p', 'pt', 'jontype');
var doc = new jsPDF('p', 'pt', 'letter');
doc.setProperties({
title : 'Fueling Receipt',
author : 'Jon Hoffman',
creater : 'Jon Hoffman'
});
doc.addImage(myLogo, 'PNG', 5, 5, 140, 30);
doc.setFontSize(12);
doc.text(10, 40, 'Sample PDF receipt');
doc.setFontSize(8);
doc.text(10, 45, 'Smaller text - new');
var pdfOutput = doc.output();
//NEXT SAVE IT TO THE DEVICE'S LOCAL FILE SYSTEM
//Requires cordova plugin add org.apache.cordova.file
console.log("file system...");
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
console.log(fileSystem.name);
console.log(fileSystem.root.name);
console.log(fileSystem.root.fullPath);
fileSystem.root.getDirectory("myPDFs", {
create : true,
exclusive : false
}, function(dir) {
fileSystem.root.getFile("myPDFs/test.pdf", {
create : true
}, function(entry) {
var fileEntry = entry;
console.log(entry);
entry.createWriter(function(writer) {
writer.onwrite = function(evt) {
console.log("write success");
};
console.log("writing to file");
writer.write(pdfOutput);
}, function(error) {
console.log(error);
});
}, function(error) {
console.log(error);
});
}, function(error) {
});
}, function(event) {
console.log(evt.target.error.code);
});
}
I solved the issue with help from this blog post: https://coderwall.com/p/nc8hia. There does seems to be significant differences between the 0.90 version used in that post and the version that I am using from https://github.com/MrRio/jsPDF however the solution is pretty much the same.
First off, in the version from MyRio, you can get the PDF generation working without fixing the Blob issue noted in Igor’s post. All you need is to generate the PDF output by calling “doc.ouput()” and then save it using the Cordova filesystem plugin. So I thought I did not have to create the Blob (this is where I was wrong).
Igor (from the coderwall post) responded back to my question with some additional code but when I searched the jspdf.js file from MyRio version, I saw that the code (more compact version) was already in the code on lines 734 – 738:
var data = buildDocument(), len = data.length,
ab = new ArrayBuffer(len), u8 = new Uint8Array(ab);
while(len--) u8[len] = data.charCodeAt(len);
return new Blob([ab], { type : "application/pdf" });
But I also notice that the blob creation code that Igor fixed in his initial post was at the end of this block of code. So I commented out the “return new Blob([ab], { type : “application/pdf”});” line and put in the following code from Igor’s post with minor variable name changes:
try
{
var blob = new Blob([ab], {type: "application/pdf"});
console.debug("case 1");
return blob;
}
catch (e)
{
window.BlobBuilder = window.BlobBuilder ||
window.WebKitBlobBuilder ||
window.MozBlobBuilder ||
window.MSBlobBuilder;
if (e.name == 'TypeError' && window.BlobBuilder)
{
var bb = new BlobBuilder();
bb.append(ab);
console.debug("case 2");
return bb.getBlob("application/pdf");
}
else if (e.name == "InvalidStateError")
{
// InvalidStateError (tested on FF13 WinXP)
console.debug("case 3");
return new Blob([ab], {type: "application/pdf"});
}
else
{
// We're screwed, blob constructor unsupported entirely
console.debug("Errore");
}
}
Then when I generate that pdfOutput, in my code, I changed
var pdfOutput = doc.output();
to
var pdfOutput = doc.output(“blob”);
and it worked.
I hope this post is able to help out others experiencing the same issues.