You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Wednesday, October 17th 2018, 11:21pm

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"/>

This post has been edited 1 times, last edit by "bhh" (Oct 18th 2018, 12:15am)


2

Friday, October 19th 2018, 4:49pm

The URL shortening service we are using as said they will be able to provide a fix so a Krpano work around won't be needed. *thumbsup*

3

Saturday, October 20th 2018, 7:51am

Hi,

sounds like your URL shortening service is embedding the page into an iframe (btw - why?) and many browsers are blocking the gyro-usage inside iframes from external servers.

Best regards,
Klaus

4

Monday, November 5th 2018, 11:02pm

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…dow/postMessage


END QUOTE

5

Tuesday, November 6th 2018, 11:52pm

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

6

Tuesday, November 6th 2018, 11:57pm

Thank you! *thumbsup*

7

Thursday, December 27th 2018, 11:39am

Seems to be working yes, but when you navigate by touch the gyro stops working.

Anybody else experiencing this with the update gyro2.js?

8

Thursday, February 14th 2019, 6:16pm

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

9

Friday, February 15th 2019, 4:22pm

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:

Source code

1
2
3
4
<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

10

Sunday, February 17th 2019, 12:14pm

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?

This post has been edited 3 times, last edit by "indexofrefraction" (Feb 17th 2019, 12:34pm)


11

Sunday, February 17th 2019, 8:21pm

Hi,

you can't access window.top inside cross-domain pages.
That would cause a security error.

Best regards,
Klaus

12

Wednesday, May 27th 2020, 10:09pm

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

This post has been edited 1 times, last edit by "granton" (May 27th 2020, 10:21pm)