Urgent! Gyro2 disabled with link cloaking

  • So I admit this is a weird and unique situation but I'm desperate for a solution.

    We've implemented a CMS for a client that allows them to send out tours to clients and we're using a link shortening service that allows the content to live on our server but the links that get sent out to clients are branded under our clients domain. If we turn on link cloaking so that the URL in the client's window is the shortened, client branded link rather than the full URL on our server, everything works fine EXCEPT the gyro2 plugin gets disabled on IOS and Android devices (all we've tested). Everything else works fine and the gyro plugin is enabled originally but an ondisable event is firing as evidenced in the code snipped below. The gyro2 source code is encrypted but is there is anything in there that would be causing this? If we disable link cloaking through the link shortening service, the gyro works fine. Also tested the the original gyro.js code and the same thing happens with that as well.

    <plugin name="skin_gyro" keep="true" url="%SWFPATH%/plugins/gyro2.js" html5_url="%SWFPATH%/plugins/gyro2.js" softstart="1.0" enabled="true" onavailable="trace('gyro available')" onunavailable="trace('gyro unavailable')" onenable="trace('gyro enabed')" ondisable="trace('gyro disabled')" devices="html5" autocalibration="false"/>

    Einmal editiert, zuletzt von bhh (18. Oktober 2018 um 00:15)

  • Hi Klaus,
    Thank you for responding and I apologize I tool so long to get back to you. I was out of the office last week dealing with a family emergency.


    Yes, I think you are correct they are using iframes but only when we enable url masking which our client wanted. Link masking conceals the actual content URL in the address bar so the end user can not see/book mark the actual URL and only has access to the shortened URL. Their main reason for wanting this is to make links expirable by removing the short-link without affecting the actual content on the server.

    They were able to solve it for Android devices but not for iOS so we ended up having to disable url masking. The shortening service did provide a workaround that could be implemented but I don't believe this is something I can do directly as I believe it would have to be modified in the core KRPANO or GYRO2 code? Is source code for GYRO2 available?

    START QUOTE

    Do you have access to the application code? It is not possible to send event directly, but we use postMessage to send this event data.


    Here is what we do:
    window.addEventListener('devicemotion', function(e) {
    iframe.contentWindow.postMessage({
    type: 'devicemotion',
    deviceMotionEvent: cloneDeviceMotionEvent(e),
    }, '*');
    });


    If you can handle this message - you can get devicemotion event.


    Here is a documentation about window.postMessage https://developer.mozilla.org/en-US/docs/Web…dow/postMessage


    END QUOTE

  • Hi,

    yes, will be possible - I have added support for that code now:

    window.addEventListener('devicemotion', function(e) {
    iframe.contentWindow.postMessage({
    type: 'devicemotion',
    deviceMotionEvent: cloneDeviceMotionEvent(e),
    }, '*');
    });


    That means when the external page is sending the gyro events this way, the new gyro2.js plugin will be able to receive them.

    Here a new gyro2.js file for testing (will be also included in the next krpano release):
    gyro2.zip

    Best regards,
    Klaus

  • I think I have a similar issue. I get an error message below on chrome on android. I also tried to replace gyro2.js with the new one and it didn't make any difference :|

    VM52:3 The devicemotion events are blocked by feature policy. See https://github.com/WICG/feature-policy/blob/master/features.md#sensor-features
    gs
    @ VM52:3
    VM54:3 The devicemotion events are blocked by feature policy. See https://github.com/WICG/feature-policy/blob/master/features.md#sensor-features

  • Hi,

    inside iframes the gyro usage is blocked.

    Use the new gyro2.js from this thread and add this code in the top-most-frame:

    Code
    <script>
    var pano_iframe_name = "enter_here_the_id_of_your_iframe_element";
    window.addEventListener("devicemotion", function(e){ var iframe = document.getElementById(pano_iframe_name); if (iframe) iframe.contentWindow.postMessage({ type:"devicemotion", deviceMotionEvent:{ acceleration:{ x:e.acceleration.x, y:e.acceleration.y, z:e.acceleration.z }, accelerationIncludingGravity:{ x:e.accelerationIncludingGravity.x, y:e.accelerationIncludingGravity.y, z:e.accelerationIncludingGravity.z }, rotationRate:{ alpha:e.rotationRate.alpha, beta:e.rotationRate.beta, gamma:e.rotationRate.gamma }, interval:e.interval, timeStamp:e.timeStamp } }, "*"); });
    </script>

    Best regards,
    Klaus

  • i extended it like this and added it to my main index.html

    <script>
    if(window != window.top) {
    var pano_iframe_name = "enter_here_the_id_of_your_iframe_element";
    window.top.addEventListener(.....);
    }
    </script>

    but couldn't / shouldn't something like this be done directly in gyro2.js ?
    or is that only working in the same domain?

  • Dear Klaus,

    We just figured out, that after iOS update to 13.5 the gyro2 inside <iframe> stopped working (tested on krpano 1.20.7).
    console: "Blocked attempt to add a device motion or orientation event listener, reason: Source frame did not have the same security origin as the main page."
    even once DeviceOrientationEvent.requestPermission() is granted well

    Same project works well on 13.3.1 iPad and 13.4.X iPhone as before.
    Is there any addition workout possible? Thank you

    Best regards,
    Granton

    Einmal editiert, zuletzt von granton (27. Mai 2020 um 22:21)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!