Embedding PlayCanvas into a webpage without iframe

Another idea I had would be to use an iframe but inline the PlayCanvas index HTML as a base64 URL. It be slightly bigger in size but I wouldn’t think it be by much given the content of the HTML file.

And after it is gzipped on transport, the size difference is probably very small. This would save the extra network call.

That’s a pretty interesting idea. I think what would work best for our particular use case is attempting to change the engine code to allow everything to be baked directly into the webpage, but if that can’t be done or ends up being impossible to scale I think that idea is certainly worth a shot if the size difference isn’t too bad. I guess we’ll see.

Thanks so much for all the help. Do you work for PlayCanvas? If not they should start compensating you lol

I do an example of both for you tomorrow.

Yep, I’m part of the PlayCanvas support team :sweat_smile:

1 Like

I couldn’t get the base64 iframe version to work. Probably due to it needing external files as well in the HTML.

But here are my changes to make embedding PlayCanvas directly into a canvas/div

Repo: https://github.com/yaustar/playcanvas-embedding-tests
Commit Diff: https://github.com/yaustar/playcanvas-embedding-tests/commit/9fd24541f1d20766015e0860a64057fb8d401025

It’s not thoroughly tested so you may need to fix any issues that you encounter as this is not a supported use case.

Good luck @Jake_Johnson

This is all working beautifully for me thank you so much.

1 Like