html5 viewer on android won't pan (etc.) after upgrading from 1.0.8.12 to 1.16.4

  • We recently upgraded our viewers (flash and html5) from 1.0.8.12 to 1.16.4.
    Everything appears to be fine on various desktop/laptop browsers in both Flash and HTML5 browsers.
    Everything works fine on iOS.
    On Android, nothing (esp. panning and hotspots) appears to work.
    I have specifically tested:
    Android 4.0.3. Tablet (Transformer TF101) - Android Browser 4.0
    Android 4.1.1 Mobile (SAMSUNG SGH-1747) - Android Browser 4.0

    You can test our web page with the html5 viewer here:

    http://www.everyscape.com/portal/

    On this page, we have disabled the log window.
    I can create and make available a specific page to show the log window.

    Can anyone suggest how to determine the problem(s) and/or how to resolve this?

    Thanks,
    Chuck

  • It was working on a Samsung Galaxy S4 - which according to the KRpano log/console window uses WebGL.
    Apparently - the problem *may* have been caused by using an old html5 settings keyword:
    < viewer.useHTML5("whenpossible");
    ---
    > viewer.useHTML5("prefer");

    Making this change seemed to fix our html5 viewer on other/older Android platforms for at least some web pages (but there are others that aren't working yet).

    Chuck

  • Hi,

    Apparently - the problem *may* have been caused by using an old html5 settings keyword:
    < viewer.useHTML5("whenpossible");
    ---
    > viewer.useHTML5("prefer");

    Both settings are still supported of course (and have the same meaning).

    Is the 'not working' constantly reproduce-able?
    Or are you maybe only seeing the Android 'software-rendering' due too few free memory?

    Best regards,
    Klaus

  • After rebuilding my computer's krpano viewer website (which generates a krpano template), our html5 test page no longer works at all on android.

    I tried explicitly forcing the use of CSS3D by changing:

    < viewer.useHTML5("prefer");

    ---

    > viewer.useHTML5("prefer css3d");

    However, this had no effect.

    Thanks,
    Chuck

  • FYI - when I click in the krpano viewer on my test page, the debug log window shows "INFO: captureevent".
    Should I see something similar when I attempt to pan?

    Thanks,
    Chuck

  • Hi,

    FYI - when I click in the krpano viewer on my test page, the debug log window shows "INFO: captureevent".
    Should I see something similar when I attempt to pan?

    That trace() message comes from your own xml code - the krpano viewer itself will not write such.

    The problem with the 'not-panning' seems to be your html layout - there seems to be a layer above the viewer which is blocking the touch controls.

    Best regards,
    Klaus

  • I'm looking into this issue also and it doesn't appear to be an html element layered over the krpano viewer (I could be wrong, I haven't completely ruled it out yet). The one reason I think that it isn't an html element layered over the viewer is that the krpano buttons are still touchable. However, the button events don't fire when on android. It works in iOS and from a desktop browser. It could be something specific with the Android browser and the touchstart / touchend events.

  • More info: The only button that responds is the full screen button and it just disappears. The rest of the buttons show the animation of being pressed, but do nothing.

  • Hi Klaus,

    We narrowed down the problem...

    When viewing a web page with the Krpano viewer (1.16.4) using a stock Android (4.1.x) browser, if the panorama media is not on the same domain as the web page, then we run into cross domain issues - "Uncaught Error: SECURITY_ERR: DOM Exception 18".

    Is there a solution for this?

    Please note that having the web page and the media served from the same domain is not an option.
    Also, we are setting the correct origin headers.

    Thanks in advance,

    Keno

  • Thanks Klaus.

    This still did not fix the issue. I'm pretty sure, its a cross domain issue though. Here's where I am at now...

    <security cors="anonymous" />
    Access-Control-Allow-Credentials = false
    Access-Control-Allow-Methods = *
    Access-Control-Allow-Origin = *

    The tile images are being returned by the server, however, the error still persists and I noticed (via Wireshark) that Origin is not set for image requests from stock Android browsers (our only problem browser).

    Does Krpano set the Origin for all image requests irrespective of the browser?

    Thanks in advance for any help,

    Keno

  • Hi Klaus,

    I ran krpano-1.16.4/examples/virtual-tours/demotour-weingut/tour_html5.html from the Android stock browser...
    - with the preview and tiles first hosted on the same server as tour_html5.html --> this works
    - then hosted on a separate server (this is how production is setup for us and cannot be changed) --> this does not work

    Again I noticed that Origin was not set on the request and the image server did return the following...

    Access-Control-Allow-Credentials = false

    Access-Control-Allow-Methods = *

    Access-Control-Allow-Origin = *

    I then implemented your recommended fix on the example code and it still doesn't work. Here are the Wireshark results...

    GET /Test/demotour-weingut/kellerstueberl.tiles/mobile_f.jpg HTTP/1.1
    Host: media.dev.everyscape.com
    Connection: keep-alive
    Referer: http://kmullings-2012.mok3.com/test/krpano-1.…tour_html5.html
    User-Agent: Mozilla/5.0 (Linux; U; Android 4.0.3; en-us; Transformer TF101 Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30
    Accept-Encoding: gzip,deflate
    Accept-Language: en-US
    Accept-Charset: utf-8, iso-8859-1, utf-16, *;q=0.7
    Cookie: __utma=134267045.742250214.1335267801.1335270199.1335281116.3; __hstc=3909999.6ef2cdebdc77d634ff81ec3fd69be6ab.1351272534029.1351272534029.1351272534029.1; hsfirstvisit=http%3A%2F%2Fwww.qa.everyscape.com%2F||2012-10-26%2013%3A28%3A54; hubspotutk=6ef2cdebdc77d634ff81ec3fd69be6ab; __es_r=uid~13369059352116200000%7Cnv~8; __utma=70122885.1077086806.1369617283.1369617283.1371830025.2; __utmz=70122885.1369617283.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); s_cc=true; s_prop70=March; s_prop71=12; track_link=%7B%22pageName%22%3A%22more_info_details%22%7D; s_nr=1373391831672; s_sq=%5B%5BB%5D%5D; s_ppv=more_info_details%2C100%2C34%2C1500; __es_r=uid~13369059352116200000%7Cnv~18; __es_r=uid~13369059352116200000%7Cnv~9


    HTTP/1.1 200 OK
    Content-Type: image/jpeg
    Last-Modified: Mon, 17 Jun 2013 13:20:15 GMT
    Accept-Ranges: bytes
    ETag: "1b315f675d6bce1:0"
    Server: Microsoft-IIS/7.0
    ESID: cheerios
    Access-Control-Allow-Origin: *
    X-Powered-By: ASP.NET
    Date: Fri, 19 Jul 2013 15:34:48 GMT
    Content-Length: 17563


    Could there be an issue with Krpano in regards to the Android stock browser? Please help *cry*

    Thanks in advance,

    Keno

  • The following examples use the Krpano demo code unaltered:


    The following examples use the Krpano demo code with the media hosted on a separate server than the HTML file and the <security> tag set:

    Edited once, last by kmullings (August 19, 2013 at 4:21 PM).

  • Hi,

    again - the error keeps the same - your server doesn't send the 'Access-Control-Allow-Origin: *' header!

    The 1.16.x links are not working because there WebGL is used by default (WebGL was introduced in 1.16) and WebGL always requires that origin header when using images from other domains.

    Here your 1.16 link modded to make it work - with CSS3D rendering (html5=prefer+css3d) - and with disabled cors (security.cors=off):
    http://www.everyscape.com/corporate/test…l5=prefer+css3d

    But this is NOT the right solution, configuring the server correctly for HTML5 cross domain access would be the right one!

    Best regards,
    Klaus

  • Hello Klaus,

    Sincerest apologies. In setting up the server for this test we did not send the 'Access-Control-Allow-Origin: *' header. However, we have since done so (which reflects our test environment) and it does not work as before on the stock Android browser (>= 4.0 and < 4.3).

    Edited once, last by kmullings (August 19, 2013 at 7:42 PM).

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!