Avatar iframe v2 not sending correct v1 eventNames

Web
1

After attaching to the Avatar Creator iframe, I do receive the v1.frame.ready event. But for v1.avatar.exported and v1.user.authorized the events are missing the eventName, and directly expose the data.

That is, for the v1.avatar.exported, an event where data = glbUrl is emitted, but there is no way to correctly detect the event. As a walkaround I’m checking if the data starts with “https://” but this trick doesn’t work for the v1.user.authorized.

Is this a known issue?

2

I can confirm this also happneing for avatar iframe v1.

Here some proof. Example of the received export event:

image

no eventName or anything to identify it, just the glburl in the data property.

3

Hello and welcome to the forum!

Based on our example iframe, even though the events expose the data directly, it’s possible to determine the eventName from the data itself.
Perhaps this code in our Example-iframe repository could help you out?


    function subscribe(event) {
        const json = parse(event);

        if (json?.source !== 'readyplayerme') {
          return;
        }

        if (json.eventName === 'v1.frame.ready') {
          // Susbribe to all events sent from Ready Player Me once frame is ready
        }

        if (json.eventName === 'v1.avatar.exported') {
          // Get avatar GLB URL
        }
      } 
      ...
    }

The same example is also available on codesandbox, to quickly try it out and play around: readyplayerme/Example-iframe - CodeSandbox

4

Hi, thanks for the reply. But that’s exactly the problem, I don’t know why, but in my setup the following is never true:

json.eventName === ‘v1.avatar.exported’

that json property is only populated for v1.frame.ready, in the other cases, it is undefined.

I will double check with the sandbox provided

5

The provided sandbox doesn’t seem to work:

image
image2555×1270 140 KB

6

Ok, my bad. I don’t know why the sandbox was not working in the morning, later in the day it was behaving fine.

I figured out the problem. It is key to do the parsing as in that example. It is key to do this:

// Susbribe to all events sent from Ready Player Me once frame is ready
        if (json.eventName === 'v1.frame.ready') {
          frame.contentWindow.postMessage(
            JSON.stringify({
              target: 'readyplayerme',
              type: 'subscribe',
              eventName: 'v1.**'
            }),
            '*'
          );
        }

I don’t know if I missed this in the documentation or it was not mentioned or stressed enough.

Thank you for your reply, the sample was very useful to identify the issue!

1 Like