Git Product home page Git Product logo

example-iframe's Introduction

Ready Player Me embedded as iframe

This example showcases embedding Ready Player Me avatar creator as an iframe to html frontend and retreiving the URL of the 3D avatar model.

More details can be found at web integration guides.

Ready Player Me - example-iframe


About Ready Player Me

Ready Player Me is a cross-app avatar platform for the metaverse used by 3,000+ developers.

Getting Started

Read the documentation to get started with integrating Ready Player Me or explore the examples.

Add Ready Player Me avatars to your app or game

Want to add Ready Player Me avatars to your own app or game? Apply here.

Community

Join the Ready Player Me Discord community.

example-iframe's People

Contributors

blanxii avatar danielmarcinkowski avatar harrisonhough avatar maxandreassenrpm avatar srcnalt avatar tiivik avatar yuri-wolf3d avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

example-iframe's Issues

Generating an avatar based on a photo via API

Hi!

I don't know if this is the right place to ask, but still, is it possible to generate an avatar only through the API? For example, you have a photo and want to generate an avatar by sending a request to some server without any interaction with an app interface

Win/Chrome shows "Oops! Something went wrong, please try again!"

The demo does not work on Chrome (Most current version Version 106.0.5249.119 (Official Build) (64-bit))
It shows "Oops! Something went wrong, please try again!" after last "Next"

Same for Demo and Developer accounts. Also fails within our Web App.

Other browsers like Firefox and Safari work fine.

image

Getting same url every time an avatar is build

Hi, i'm running some test to see the iframe integration in action but every time I run this i'm getting the same avatar url (even in different browsers), I don't know if this happens because I'm using the demo domain and it will be solve if I have with a custom sub domain or if maybe there is something extra needed to have different urls when using it multiple times.

I checked the documentation however, i did not find a solution.

Thanks

Please add message push for loading state.

Please add message push for loading state. so my app can detect your iframe's current state.

I'm using React

My application read the eventName from your iframe.

 useEffect(() => {
    if (frame.current) {
      window.addEventListener("message", subscribe);
      document.addEventListener("message", subscribe);

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

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

        // I need more eventName as trigger to my application
        if (json.eventName == "v1.user.updated" || json.eventName == "v1.subscription.created") {
          setShow(true);
        }

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

        // Get avatar GLB URL
        if (json.eventName === "v1.avatar.exported") {
          console.log(`Avatar URL: ${json.data.url}`);
          localStorage.setItem("avatar_url", json.data.url);
          setAvatarURL(json.data.url);
        }

        // Get user id
        if (json.eventName === "v1.user.set") {
          console.log(`User with id ${json.data.id} set: ${JSON.stringify(json)}`);
        }
      }

      function parse(event) {
        try {
          return JSON.parse(event.data);
        } catch (error) {
          return null;
        }
      }
    }
  }, [frame.current]);

While Iframe is loading for the first time.
Please give:

  • first_load_start
  • first_load_end

Screen Shot 2022-06-11 at 16 04 41

While Iframe is loading for avatar object

  • avatar_load_start
  • avatar_load_end

Screen Shot 2022-06-11 at 15 52 16

window.open

Iframe can't log in with 1Password.
I would like to see support for window.open as well.

window.ReactNativeWebView ? window.ReactNativeWebView.postMessage(r) : window.parent.postMessage(r, t)

โ†“

window.ReactNativeWebView ? window.ReactNativeWebView.postMessage(r) : 
	window.opener ? window.opener.postMessage(r, t) :
	window.parent.postMessage(r, t)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.