Subscribing to events from iframe

Web
1

I just started integrating Ready Player Me into my Next.js app, but I’m not receiving any of the Avatar Creator’s events. I’ve tried using AvatarCreator and AvatarCreatorRaw.

const handleCustomEvent = (event: AvatarCreatorEvent) => {
    console.log(`Received custom event`, event);
  };

<AvatarCreatorRaw
    subdomain={process.env.NEXT_PUBLIC_RPM_SUBDOMAIN as string}
    config={config}
    style={style}
    onEventReceived={handleCustomEvent}

  />
  {avatarUrl && <Avatar modelSrc={avatarUrl} />}

Any idea what’s going wrong? Is this something specific to Next.js?

I’m also getting all of these warnings and errors:

rpm_errors
rpm_errors851×347 68.6 KB

Olvy seems to be some kind of user metrics gathering tool?

2

Note that I’m developing with React, and so these problems might not affect developers using a different stack.

I figured out the problem. Either the docs or the React component need to be changed. Actually, either way the docs should be updated since there is something that is misleading and a minor error that will stop people from being able to subscribe to the Avatar Creator's events.

The main problem is here:

image
image900×508 67.9 KB

When you click on the Copy button, it gives you the scheme, the subdomain, the secondary domain, but it’s missing the avatar sub-directory. For example, this is what I get if I click on the Copy button:

https://{actual-subdomain}.readyplayer.me?frameApi

However, the event handlers won’t work without the avatar sub-directory at the end of the URL. So what really should be returned is:

https://{actual-subdomain}.readyplayer.me/avatar?frameApi

Additionally, the AvatarCreator React component, which uses the useAvatarCreatorUrl hook under the hood, is doing this:

export const useAvatarCreatorUrl = (subdomain: string, config: AvatarCreatorConfig | undefined): string => {
  return useMemo(() => {
    let url = `https://${subdomain || `demo`}.readyplayer.me`;
    url += `/avatar?frameApi&source=react-avatar-creator`;

So, you only need a small portion of what was copied from the Developer Dashboard.

I don’t know if there is a situation where what you get from copying that value on the Developer Dasjboard is exactly what you need, but it’s quite confusing since it’s possible to end up with something that seems to be working (except for the event subscription), but which causes a lot of wasted time troubleshooting.

1 Like