Frame in iOS cors problem

[jaripenttinen]

videojs-vr does not get devicemotion events when having it in iframe and its in another domain.

User's browser is in site.com and the iframe with videojs-vr is in domain.site.com

I guess its clear that devicemotion events are not passed due to security reasons, but there are ways to overcome that. To catch the event in site.com and then pass it to iframe using postMessage. Any ideas how that is done with videojs-vr? I've checked the code and to me it seems this should work, but it does not

    window.addEventListener('devicemotion', function (event) {
      var obj = {
        accelerationIncludingGravity: {
          x: event.accelerationIncludingGravity.x,
          y: event.accelerationIncludingGravity.y,
          z: event.accelerationIncludingGravity.z
        },
        rotationRate: {
          alpha: event.rotationRate.alpha,
          beta: event.rotationRate.beta,
          gamma: event.rotationRate.gamma
        },
        timeStamp: Date.now()
      };
      var iframe = document.getElementById('player') as HTMLIFrameElement;
      iframe.contentWindow.postMessage({ type: "devicemotion", deviceMotionEvent: obj }, "*");
    });

any ideas?

[mrkos67]

@jaripenttinen Did you ever figure this out? I'm currently working on this issue as well.

[mrkos67]

I got this working, and am posting this mainly for others to find it.

The OP was on the right track w/ using postMessage to communicate with the framed page. Those properties must be used to create a synthetic custom event and dispatched. In poking around the THREEjs code, they're listening for the "deviceorientation" event — not "devicemotion" — in their DeviceOrientationControls object. So my code looks like:

parent:

window.addeventListener( "deviceorientation", ( e ) => {
    iframe.contentWindow.postMessage({
        type: "deviceorientation",
        alpha: e.alpha,
        beta: e.beta,
        gamma: e.gamma,
    }, "*" );
});

child:

parent.addEventListener( "message", ( e ) => {
    // make sure this message is for us
    if( e.type !== "deviceorientation" ) return;

    // use a custom event here that mimics a DeviceOrientationEvent. 
    // you cannot call 'new DeviceOrientationEvent(...)' directly as this will throw an error.
    var event = document.createEvent( "DeviceOrientationEvent" );
    event.initDeviceOrientationEvent(
        "deviceorientation",   // type
        true, // bubbles
        true, // cancelable
        e.alpha, // DeviceOrientationEvent specific
        e.beta, // DeviceOrientationEvent specific
        e.gamma, // DeviceOrientationEvent specific
        true // DeviceOrientationEvent specific
    );

    // dispatch this event on the window so DeviceOrientationControls in THREEjs can pick it up
    window.dispatchEvent( event );
});

[jaripenttinen]

Yes, forgot to update here. But got it working. So I guess this can be closed.