Call A-frame library from H5P

Submitted by tchavei on Wed, 01/06/2021 - 17:16
Forums: 
Developers

Hi everyone. 

I'm trying to develop a H5P library that allows to show VR content created through the A-frame library inside a H5P container and eventually send the results of the VR experience through the xAPI back to the moodle LMS it will be hosted on.

I managed to start a simple proof of concept, first through a depreciated library (H5P.iframe) that correctly showed my VR content (a multiple choice question) inside the H5P container by using a few modifications and hacks (many to allow the use of html inside the H5P package).

I now want to develop the library properly by integrating the A-frame library and building the content from within the library itself. 

Unfortunately I think I hit a wall. I already tried to include and use the A-frame library in several ways (including linking it externally) but it always fails one way or the other and the associated VR content is never interpreted correctly.

 

Can someone please provide some guidance or advice on how I can load the A-frame library so that the html markup can be correctly interpreted? It appears to me like the library always loads too late so that elements like <a-box>, <a-scene>, etc never get parsed.

 

Thank you 

Tony 

otacke's picture

otacke

Wed, 01/06/2021 - 17:41

Hi Tony!

You may want to check H5P AR Scavenger and its sources including a wrapper for AFrame, see https://www.olivertacke.de/labs/2020/08/02/arrrrrr-ar/ for details.

Best,
Oliver

tchavei

Wed, 01/06/2021 - 19:47

Thank you for you quick and kind answer.

I found your website very interesting regarding your application of vr content in a H5P context.

I'm researching into a similar/related application as a subject of my master thesis i.e embedding VR content easily into a LMS using a H5P container. More specifically, I've created a prototype multi choice question in a vr environment where the user has to select the correct answer using either mouse or controller (it also supports Google cardboard and daydream controls).

I'm now trying to make that code display as a H5P activity but I haven't got my head around the A-frame wrapper. Of all languages I've used in the past decades, js wasn't one of them so I'm trying to learn its ropes as fast as possible.

I will look and try to understand your code more throughly. I assume that you use the A-frame wrapper in that specific h5p activity?  Do  you generate the content and then process it through the wrapper lib or do you load the lib into the activity directly? I haven't arrived home yet so just could take a quick glance and your code (on the phone)

 

Thank you very much 

 

Tony 

otacke's picture

otacke

Wed, 01/06/2021 - 20:27

Hi Tony!

Yes, I use that wrapper in two occasions: in the editor for rendering the previews of 3D models and in the view as a dependency of AR.js that builds upon AFrame.

H5P loads all dependencies upfront, but AFrame needs the DOM to have been rendered first. That's why the wrapper is simply a self-invoking function that then offers a constructor function that will run AFrame. So, you can build and attach your DOM dynamically in H5P content libraries first and then run AFrame once the DOM has been set.

It could be done more elegantly, but I figured that that's all that could be covered by my funding and at the same time it's easier for others to use it, because you can stick to the common way AFrame is used - just feeding it a DOM structure.

Best,

Oliver 

tchavei

Wed, 01/06/2021 - 22:23

Hi Oliver 

Thank you for your swift input. I appreciate it very much.

I'll try to follow your suggestions. 

I noticed that, at least in the view, you built your DOM inside an iframe. Is it mandatory to use it in order to be able to run the A-frame library on it? I was trying to avoid using nested iframes (since h5p uses an iframe by itself) because I expect it raising further issues later on when trying to pass the results through xapi back into moodle.

 

Thank you kindly for your patience

Best regards 

Tony 

otacke's picture

otacke

Wed, 01/06/2021 - 22:58

AFrame crashes when you have multiple instances on one page, so you need to isolate them in iframes. That's more apparent in the editor, but you never know what the future holds, e.g. putting multiple instances of AFrame (could e.g. be a simple 3D model viewer) into Column.

You can communicate between iframe content and iframe wrapper using post messages even across domains.

tchavei

Thu, 01/07/2021 - 12:17

Thank you for the explanation. I assume that since each H5P activity has its own iframe (on moodle at least), this shouldn't be an issue though. However I'm still struggling with it.

I wrapped the Aframe 1.1 library and added it to the head of the H5P iframe container. Unfortunately it errors out with a "Uncaught TypeError: systems[e] is not a constructor" message once I upload the activity to the LMS This is certainly going to be long weekend to try to make this work somehow.

Thank you
Tony

otacke's picture

otacke

Thu, 01/07/2021 - 17:06

Each content type has its own iframe if it is not used as subcontent. Wasn't that much work, so although nested iframes are ugly, I went the safe route.

Degrange

Sat, 01/09/2021 - 20:05

I also though about a frame and all the possibility that h5p could benefit. You could do some virtual museum exhibit (where you can move to look at picture everywhere), do a 360 virtual tour but with video instead of image, do some 3D game, etc. 

But good luck as it's seems it's more complicated that what it seems :D

Whats good too is that a frame have a 3d editor included that could allow to create 3d scene easily (with some modification to simplify the editor).