﻿{"id":475,"date":"2020-08-02T15:00:23","date_gmt":"2020-08-02T13:00:23","guid":{"rendered":"https:\/\/www.olivertacke.de\/labs\/?p=475"},"modified":"2025-06-14T13:15:41","modified_gmt":"2025-06-14T11:15:41","slug":"arrrrrr-ar","status":"publish","type":"post","link":"https:\/\/www.olivertacke.de\/labs\/2020\/08\/02\/arrrrrr-ar\/","title":{"rendered":"Arrrrrr, AR!"},"content":{"rendered":"<p><strong>tl;dr <\/strong>There&#8217;s a new content type for H5P called <em>AR Scavenger<\/em>. It features Augmented Reality. You can download it here.<\/p>\n<p>Quite some time ago, <a href=\"https:\/\/ebildungslabor.de\">Nele Hirsch<\/a> approached me, asking if it was possible to create a content type in H5P that would allow to feature Augmented Reality (AR). From scratch? Quite a job! But in the wonderful world of open source software, there&#8217;s a framework called <a href=\"https:\/\/aframe.io\/\">AFrame<\/a> that allows you to use 3D models in a browser. And then there&#8217;s another framework called <a href=\"https:\/\/ar-js-org.github.io\/AR.js-Docs\/\">AR.js<\/a> that builds upon AFrame and allows to blend 3D models into a device&#8217;s camera image. Nele pointed me towards that one. And now there&#8217;s AR Scavenger that builds upon AR.js and blends it all with H5P. It&#8217;s fair to mention that the soultion would probably not have been finish done now &#8211; but later &#8211; if the <a href=\"https:\/\/www.hoou.de\/\">Hamburg Open Online University<\/a> (HOOU) and the <a href=\"https:\/\/www.haw-hamburg.de\/hochschule\/hochschuleinheiten\/arbeitsstelle-studium-und-didaktik\/\">HAW Hamburg<\/a> in particular had not partially funded this initial version.<\/p>\n<p><iframe loading=\"lazy\" title=\"Twitch Live Stream Highlight (August 2, 2020): Oliver of SNORDIAN showing H5P AR Scavenger\" width=\"525\" height=\"295\" src=\"https:\/\/www.youtube.com\/embed\/yB36QZUh-wY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<h1>What can I do with this?<\/h1>\n<p>Just take a look! Here&#8217;s the content type that you can use right away, but you&#8217;d have to use it on a device that has a camera attached to it. Then just find the markers down below with your camera &#8211; either on another screen or print them on paper.<\/p>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-87\" class=\"h5p-iframe\" data-content-id=\"87\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"DEMO AR SCAVENGER\"><\/iframe><\/div>\n<h2>Marker 1<\/h2>\n<p>This one should simply show you a True-False-Question, but on paper you could put any H5P content type here.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-481\" src=\"https:\/\/www.olivertacke.de\/labs\/wp-content\/uploads\/2020\/07\/pattern-markerImage-5ecd210028825-300x300-1.png\" alt=\"HIRO marker\" width=\"300\" height=\"300\" srcset=\"https:\/\/www.olivertacke.de\/labs\/wp-content\/uploads\/2020\/07\/pattern-markerImage-5ecd210028825-300x300-1.png 300w, https:\/\/www.olivertacke.de\/labs\/wp-content\/uploads\/2020\/07\/pattern-markerImage-5ecd210028825-300x300-1-150x150.png 150w, https:\/\/www.olivertacke.de\/labs\/wp-content\/uploads\/2020\/07\/pattern-markerImage-5ecd210028825-300x300-1-100x100.png 100w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h2>Marker 2<\/h2>\n<p>This one should show you a 3D model of a duck that\u2019s facing out of the marker, so if you have the marker on a screen, the duck should look right at you.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-482\" src=\"https:\/\/www.olivertacke.de\/labs\/wp-content\/uploads\/2020\/07\/pattern-markerImage-5eea44da4672c-300x300-1.png\" alt=\"DUCK marker\" width=\"300\" height=\"300\" srcset=\"https:\/\/www.olivertacke.de\/labs\/wp-content\/uploads\/2020\/07\/pattern-markerImage-5eea44da4672c-300x300-1.png 300w, https:\/\/www.olivertacke.de\/labs\/wp-content\/uploads\/2020\/07\/pattern-markerImage-5eea44da4672c-300x300-1-150x150.png 150w, https:\/\/www.olivertacke.de\/labs\/wp-content\/uploads\/2020\/07\/pattern-markerImage-5eea44da4672c-300x300-1-100x100.png 100w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h1>What is it good for?<\/h1>\n<p>So, obviously you can define markers and either let H5P interactions pop up whenever a marker is found, or you can blend a 3D model with the camera image. Not much, but using that features<\/p>\n<ul>\n<li>you could create some scavenger hunt game in a physical environment that requires students to find a marker to open a quiz related to the place of the marker,<\/li>\n<li>you could add markers to exhibits in a museum to deliver additional information in an Interactive Video,<\/li>\n<li>you could add digital 3D models to a physical book,<\/li>\n<li>you could &#8230;<\/li>\n<\/ul>\n<p>I bet you will come up with even better use cases &#8230;<\/p>\n<p>There are more sophisticated apps with a wider variety of features, but you usually have to pay for them in some way, and they&#8217;re usually not open source software. So, use this content type to take your first steps with Augmented Reality &#8211; and possibly work on software improvements, too?<\/p>\n<h1>How can I get it?<\/h1>\n<p>Ultimately, you will be able to install H5P AR Scavenger just like any other H5P content type from the H5P Hub, but the H5P core team will have to find some time for reviewing and releasing it first. Until then, you could download the sample content above and upload it to your platform (with administrative rights).<\/p>\n<p>Also, you can get all the source code on github, but it&#8217;s spread across a couple of repositories starting with <a href=\"https:\/\/github.com\/otacke\/h5p-ar-scavenger\" target=\"_blank\" rel=\"noopener noreferrer\">H5P.ARScavenger<\/a> (+ <a href=\"https:\/\/github.com\/otacke\/h5p-aframe\" target=\"_blank\" rel=\"noopener noreferrer\">H5P.AFrame<\/a> + <a href=\"https:\/\/github.com\/otacke\/h5p-aframe-ar\" target=\"_blank\" rel=\"noopener noreferrer\">H5P.AFrameAR<\/a> + <a href=\"https:\/\/github.com\/otacke\/h5p-aframe-orbit-controls\" target=\"_blank\" rel=\"noopener noreferrer\">H5P.AFrameOrbitControls<\/a> + <a href=\"https:\/\/github.com\/otacke\/h5p-editor-input-row\" target=\"_blank\" rel=\"noopener noreferrer\">H5PEditor.InputRow<\/a> + <a href=\"https:\/\/github.com\/otacke\/h5p-editor-ar-marker-generator\" target=\"_blank\" rel=\"noopener noreferrer\">H5PEditor.ARMarkerGenerator<\/a>\u00a0+ <a href=\"https:\/\/github.com\/otacke\/h5p-editor-3d-model-loader\" target=\"_blank\" rel=\"noopener noreferrer\">H5PEditor.ThreeDModelLoader<\/a> + <a href=\"https:\/\/github.com\/otacke\/h5p-editor-important-description\">H5PEditor.ImportantDescription<\/a>).<\/p>\n<p><strong>But<\/strong> there&#8217;s at least <strong>one catch<\/strong>!<\/p>\n<h2>H5P does not allow to upload gltf and glb files<\/h2>\n<p>H5P currently doesn\u2019t allow to include files with the extension gltf or glb that are required for the 3D models. The H5P core team will allow this shortly. Until then, without some modification, you will only be able to use AR Scavenger for H5P content types.<\/p>\n<p>On Drupal you can amend the list of allowed extensions in the H5P plugin settings, but not in other plugins. So, here\u2019s the <a href=\"https:\/\/github.com\/h5p\/h5p-php-library\/pull\/85\">pull request to allow uploading gltf and glb files<\/a>. The changes will point you to what you&#8217;d have to patch if you&#8217;re not running H5P on Drupal.\u00a0 If you want to do this manually:<\/p>\n<ol>\n<li><em><strong>Know what you are doing<\/strong><br \/>\n<\/em>You cannot really break anything here, but if you&#8217;re new to this and make a mistake, you might get some sweat \ud83d\ude09<\/li>\n<li><strong>Find h5p.classes.php<\/strong><br \/>\nOn WordPress, it should be located at <em>your-wordpress-path\/wp-content\/plugins\/h5p\/h5p-php-library\/h5p.classes.php<\/em>. On moodle it should be located at <em>your-moodle-path\/mod\/hvp\/library\/h5p.classes.php<\/em>. If you&#8217;re using moodle 3.9 and above including moodle&#8217;s H5P integration, it should be located at <em>your-moodle-path\/h5p\/h5p\/lib\/joubel\/core\/h5p.classes.php<\/em><\/li>\n<li><strong>Take a look at yourself and then make a change<br \/>\n<\/strong>Add gltf and glb as shown at <a style=\"font-size: 1rem;\" href=\"https:\/\/github.com\/h5p\/h5p-php-library\/pull\/85\/files\">https:\/\/github.com\/h5p\/h5p-php-library\/pull\/85\/files<\/a><\/li>\n<\/ol>\n<h2>H5P cannot access the camera<\/h2>\n<p>This one shouldn&#8217;t be a problem in many cases, but it might become one. Browsers are becoming more and more strict when accessing browser features such as video or microphones and expect HTTP Feature Policies to be in place (also potentially causing trouble for Audio Recorder). There&#8217;s a discussion about this topic related to H5P at\u00a0<a href=\"https:\/\/h5p.org\/comment\/35346\" rel=\"nofollow\">https:\/\/h5p.org\/comment\/35346<\/a>. I am proposing a code change (for WordPress to be adapted to Drupal and moodle) that will allow to use browsers&#8217; features within the H5P iframe (unless the server is even more strict and doesn&#8217;t allow them).<\/p>\n<p>If your browser (on your server) simply won&#8217;t ask you for the camera, you may need this patch. A suggestion can be found at <a href=\"https:\/\/github.com\/h5p\/h5p-wordpress-plugin\/pull\/114\">https:\/\/github.com\/h5p\/h5p-wordpress-plugin\/pull\/114<\/a>. The changes will point you to what you&#8217;d have to patch on WordPress yourself. There&#8217;s no suggestion yet for Drupal or moodle, but if you can code a little, it won&#8217;t be difficult to temporarily apply the same approach manually.<\/p>\n<h1>Questions? Maybe I have answered them already<\/h1>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-86\" class=\"h5p-iframe\" data-content-id=\"86\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"FAQ for H5P AR Scavenger\"><\/iframe><\/div>\n<h1>Sponsor Note<\/h1>\n<p><em>Die initiale Fassung dieses Vorhabens wurde gef\u00f6rdert durch die HOOU und die Beh\u00f6rde f\u00fcr Wissenschaft, Forschung und Gleichstellung der Freien und Hansestadt Hamburg.<\/em><\/p>\n<p><em>The initial release of this project was funded by the HOOU and the Ministry of Science, Research and Equality of the Free and Hanseatic City of Hamburg.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>tl;dr There&#8217;s a new content type for H5P called AR Scavenger. It features Augmented Reality. You can download it here. Quite some time ago, Nele Hirsch approached me, asking if it was possible to create a content type in H5P that would allow to feature Augmented Reality (AR). From scratch? Quite a job! But in &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.olivertacke.de\/labs\/2020\/08\/02\/arrrrrr-ar\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Arrrrrr, AR!&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[48,47,5,16],"class_list":["post-475","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-ar","tag-augmented-reality","tag-content-type","tag-h5p"],"_links":{"self":[{"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/posts\/475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/comments?post=475"}],"version-history":[{"count":0,"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/posts\/475\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/media?parent=475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/categories?post=475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/tags?post=475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}