WebAR in H5P

Submitted by Teemu Tiainen on Thu, 12/19/2019 - 14:24
Forums: 
Feature requests

Hello!

For a few years the hype has been that augmented reality is going to be a big thing in education and there have been some interesting trials, but as of yet the technology is still waiting for a break. Leaving out the wearable AR devices that are coming to market at some point, mobile AR is already a technology that is available for most students through their mobile device. As of yet there is however no easy way of implementing AR content inside an otherwise capable LMS system such as Moodle and the only way seems to be a separate system or application that would integrate to Moodle using LTI. This raises the bar for creating such content too high for most users, if they could even find any service providers making this possible. Also students dont necessarily want to install additional apps to their devices to get some learning material to work.

H5P could be the breakthrough that WebAR needs, as it could open an easy way to create simple AR learning content  directly within an LMS. The way I think this should work, is to not even try to embed any way of creating any 3D content with the tool, but simply enable teachers to input 3D content and create a screen layer of text, photo and questionnaires on top of it. For the info overlay on screen You could use the same set of tools as You can use when creating interactive videos, with the option of being able to set the total duration of the experience which is not depending on the length of animation in the 3D-file. The inputted file should use an open standard file format such as COLLADA, which would support most 3D softwares and can do shapes, colors and even animations within the files. User could click any surface to place the 3D-model on top of, which reguires the use of WebAR framework, the likes of which You can find in here:http://www.createwebxr.com/webAR.html

This way You would only need to build the 3D model display on localising framework on top of the current interactive video tools, making this not as much of work as it may seem at first.

Looking forward to hearing Your thoughts on this!

7
0
Supporter votes Members of the Supporter Network can vote for feature requests. When the supporter network has generated sufficient funding for the top voted feature request it will normally be implemented and released. More about the H5P Supporter Network
BV52's picture

BV52

Thu, 12/19/2019 - 20:47

Hi Teemu,

Thank you for contributing your ideas on how to make H5P better! With the H5P supporter program the H5P community can now vote for and fund the top voted H5P features.. Also there are developers in the community who every now and then works on a feature they find interesting or useful.

-BV

otacke's picture

otacke

Thu, 12/19/2019 - 22:16

Hi Teemu!

Let's just say that AR.js is on my radar ;-)

Cheers

Oliver 

Teemu Tiainen

Fri, 12/20/2019 - 07:00

Great! AR.js 2.0 added location based AR to the package and in my opinion that is a must when thinking about students doing homework in AR. I do some VR / AR stuff using Unity / Blender myself but dont have any skills to help with HTML stuff, but if at some point You need someone to try it out I would be happy to help!

otacke's picture

otacke

Fri, 12/20/2019 - 09:42

Hi Teemu!

Let's see what I'll come up with :-)

Best,

Oliver 

Teemu Tiainen

Wed, 12/09/2020 - 07:31

Hello Oliver, have You had any time to play around with this? 

otacke's picture

otacke

Wed, 12/09/2020 - 20:32

Hi!

Of course! See for yourself: https://www.youtube.com/watch?v=MzhsQLem4uM and https://www.olivertacke.de/labs/2020/08/02/arrrrrr-ar/. You're not following me on Twitter, YouTube or Twitch, it seems :-P

Best,
Oliver

Teemu Tiainen

Wed, 12/09/2020 - 21:26

I am now!

Cant wait to try it out, this looks very promising and I already have tons of ideas for what to do with it in some content creation projects I am currently working on.

otacke's picture

otacke

Thu, 12/10/2020 - 18:42

Hi!

If you don't have a system that you can make fit to use it (see blog post), you can still try it out at https://einstiegh5p.de/node/add/h5p-content (if you don't fear to read some German).

Best,
Oliver

Teemu Tiainen

Thu, 12/10/2020 - 19:34

Oh cool, I had a go and it works as I supposed it will. I have two questions at this point, is it possible to do markers without the thick black border and can I do the required translations to finnish for this?

otacke's picture

otacke

Thu, 12/10/2020 - 20:01

Nope, the markers need the black border in order to make it easier for devices to distinguish them from "noise". That's not a restriction that I am imposing however, but the AR.js library does.

Sure. The one and only Sebastian Rettig has already included AR Scavenger on his translation platform, see https://translate-h5p.tk/weblate/projects/h5p/h5p-ar-scavenger/. That's the best way to do translations for H5P, I think. Please note the "How to contribute" section. If you prefer, you can also create a copy of https://github.com/otacke/h5p-ar-scavenger/blob/master/language/.en.json then name it fi.json, translate the phrases and create a pull request on github.

Teemu Tiainen

Fri, 12/11/2020 - 19:09

I have an account to that translation service earlier this week, but I dont seem to have permision to start a new translation in there. So I translated directly to the json file. Couple of parts I did not understand: the word "dummy" is in there a few times, I would need to know in what context it is shown to be able to translate it, but I cant find it anywhere in the demo. 

Also at the end there is the word "Readspeaker" followed by some instruction sentences. Are these senteces spoken out loud by the service called ReadSpeaker or does this just refer to a more direct meaning of the word? If these are read out loud, does the service know how to pronounce finnish?

otacke's picture

otacke

Fri, 12/11/2020 - 19:33

Hi Teemu!

I've never had to create a new language, and you may require to get moderator rights to do so. Sebastian will gladly promote you, I think.

The "dummy" is just a placeholder that will never be visible. It's a hack to bypass some weird (IMHO) behavior of H5P.

A readspeaker is a tool that people with visual impairment can use to read texts and navigate a webpage. NVDA and ChromeVox are commonly used on desktop systems and I believe they support "all" languages. So yes, those sentences are intended to be read to the user. I think others have translated "readspeaker" as "ruudunlukija sovellusta".

Cheers,

Oliver 

Teemu Tiainen

Mon, 12/14/2020 - 19:39

Here is a link to the first version of translation, would be good for someone to review these in case of typos. I am also still unsure if I got the fallback height thing correctly, could You try explaining what it means in more detail?

https://www.dropbox.com/s/av896c0mimcn956/fi.json?dl=0

otacke's picture

otacke

Tue, 12/15/2020 - 17:40

Hi Teemu!

Thanks for the effort. If you don't use translate-h5p.tk, please make sure to follow the syntax of a JSON file. You can use a https://jsonchecker.com/ to spot mistakes. For instance, in line 164 of your file should be 

"description": "Klikkaa \"Add range\" painiketta lisätäksesi niin monta pisterajaa kuin tarvit. Esimerkiksi: 0-20% Huono tulos, 21-91% Kelpo tulos, 91-100% Mahtava tulos!",

or the editor would break.

I don't know anyone Finnish, and I fear this forum has rather become a place where people expect support and answers from the H5P core team instead of discussing things and helping each other out, so I doubt that anyone will check your translation.

The "fallback height" is kind of a backup plan for sizing the camera view in case of some particular technical problem that can occur when you use resources from one server on another (cross origin resource sharing). It's a fixed term in the IT domain, so I would not translate "CORS" or "cross origin resource sharing" It should never kick in for that reason, but you never know ...

Cheers,
Oliver

Teemu Tiainen

Mon, 12/21/2020 - 07:27

Corrected and checke with that service, should be a working json now. I will contact the admin of the translation service to get more rights for the system..

otacke's picture

otacke

Mon, 12/21/2020 - 16:29

Hi Teemu!

If you've created the file manually now, then there's no need to use translate-h5p.tk anymore (you wouldn't have had to worry about the JSON format there however). You can either attach the translation file here and I'll copy it to the repository - or, you create a pull request on github.

Best,
Oliver

Teemu Tiainen

Thu, 01/14/2021 - 07:29

Translation file is now attatched directly to this message.

Attachments: 
Binary Data fi.json
otacke's picture

otacke

Thu, 01/14/2021 - 18:52

Hi Teemu!

Thanks!

You did not completely translate the labels that are used for readspeaker messages. For instance, you use 'Switch view' painikkeen nimi (kun tehtävä suljettu) without translating Switch view. Have you omitted those deliberately?

Cheers,
Oliver

Teemu Tiainen

Fri, 04/16/2021 - 13:25

Misunderstood those to be references to other points in the code so did not edit them. I hope I got them all this time!


Attachments: 
Binary Data fi.json
otacke's picture

otacke

Fri, 04/16/2021 - 15:57

There you go :-) https://github.com/otacke/h5p-ar-scavenger/tree/master/language Thanks a lot! I just released an update yesterday, so I'll not re-release another one just for the translation file. I'll wait a little so another updates makes a little more sense.

Christos Vasios's picture

Christos Vasios

Tue, 07/06/2021 - 03:51

Hello everyone, this is my first message, I am very new, so forgive me if this isn´t the right thread to pose the question:

I have created some short animations (60 seconds the longest)  rendered as MP4, and when I intent to use a YouTube link, it only works as a video. When I try to use the link for the video with interactions it just doesn´t work and I am the only person who can see it. (Author, own pc). If I dare try and embed the MP4 the whole content crashes and I have to look the files up in Cpanel (Wordpress) and delete them. It has become a bit of a nighmare now, as I am using H5P mainly for the amazing feature of 'interactive video', and have invested months in creating the animations for it....Please help. Thank you so much in advance for an excelent programme none the less

 

BV52's picture

BV52

Tue, 07/06/2021 - 19:15

Hi Christos,

I'm sorry but I don't fully understand your concern. Would you mind providing the details below:

  1. Where are you hosting your conctents (Drupal, Moodle, Wordpress, Brighspace, Canvas, Blackboard, H5P.org, H5P.com or somewhere else)?
  2. When you say "when I intent to use a YouTube link, it only works as a video", do you mean that when using the link from Youtube you cannot add interactions?
  3. A link to your content may also help the community understand what is going on.
  4. Screenshots may also help.

-BV

 

leopittoni

Sat, 07/31/2021 - 16:49

Wow, great what is coming to h5p! Thanks a lot!

What would be also very nice: location based AR instead of markers.

Do you knot the iOS App Scavengar? https://www.scavengar.world

Something like that would be gorgeous. 

Some basic 3D-models to select from a library (like a star, a ?-mark, ...) would be great to.

Thanks a lot!

Léo

otacke's picture

otacke

Tue, 08/03/2021 - 00:25

Hi Léo!

Location based events are a possible addition to AR Scavenger, but not likely to happen any time soon unless someone will take the initiative and fund the development.

Best,

Oliver 

Teemu Tiainen

Tue, 05/24/2022 - 12:06

Any news of when this will be officially supported or is it already? I just tried uploading the newest version from H5P examples to a test Moodle-server and did not work, complains about the file type not being supported..

otacke's picture

otacke

Tue, 05/24/2022 - 20:40

Hi Teemu!

Please have a look at https://h5p.org/comment/45360#comment-45360 that explains what needs to be done currently.

Best,
Oliver