QR Code scanner

Hi guys,

I’ve read a few post on installing a QR code scanner to a website created with hype. I’ve managed to created one using a html widget but I can find a way to get the data scan from the html widget to display in a ‘text’ element in hype.

So for example - I need to be able to go to my first scene, scan a qr code and then the data read from the QR code to be placed in a ‘text’ element in hype. Is it possible?

Any help would be really appreciated,

Thanks

Chris

Can you share what you have so far?

You can set the Inner HTML of any Hype element using:

hypeDocument.getElementById('idofElement').innerHTML = QRtext;

But if you are capturing that text within an HTML widget, you won’t be able to affect the contents of the parent window (this is a security risk) without using the Postmessage system. A bit more info on that here.

1 Like

Hi Daniel.

Please see my example in the file below. Its basically a QR code scanner within a html widget but its useless in its current form. Thanks

Hey Chris,

It looks like you’ll need to either pass that input field into the parent frame (and a Hype element) using the Postmessage system, or run your QR code JS code within the Hype window. To do that, you would need to run the initialization function as an ‘On Scene Load’ JS function, and then move the rawgit URL to the head area. You can edit the contents of the <head>…</head> of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector.

1 Like

I was just writing this quick example up… ( lol, pretty much what @Daniel has suggested )

I have not changed the initial coding that does the reading or the way the input works.

But I have moved most of it to a Hype function which runs at scene load to add the on change listener to the input.

Also changed the input slightly to give it a name and id, which makes it accessible elsewhere like the hype function.

The QR script git hub link is moved to the head file

I have not really played with QR Codes/readers/scanners so I am not sure this does what you want. ( the original code you are using) but this should give you an idea of using it within hype if you use such an input.

QRReader.hype.zip (47.2 KB)

2 Likes

Excellent :slight_smile: thanks so much for this guys!

Hi again guys,

So I’ve used the method to scan a QR code above and it works great however I want to progress onto live scanning the QR codes rather than taking a picture.

is there anyway I can import or use this QR scanner into hype : https://github.com/nimiq/qr-scanner

I’m using this QR scanning technology as I’m trying to create a web app for people with intellectual / learning disabilities so I need it to be a quick and easy as possible. In the testing, although taking a picture of QR code works, it was difficult for the users to understand the process of taking the picture then waiting for the results (which in a lot of occasions were negative as shaking hands or blurred pictures meant the QR codes couldn’t be read).

The reason why using QR codes is so important is that a lot of my users can’t spell or read but can use a smart phones so this project will allow them to log data with taking a picture of their own unique QR code.

Can anyone help me with this or let me know if its possible?

Thanks again,

Chris

In theory there shouldn’t be a problem using that library, but in practice I had significant trouble and was never able to get it to work. First, it appears their instructions are overly simplistic and make several assumptions about the user environment. It also appears they have hard coded paths in their library that are required to be fulfilled. Even changing these, I was not able to get more than a black screen for the video and it did not do QR detection. No errors were logged when I got this far, so without spending a lot more time I’m not sure what the issue would be.

Maybe some other javascript expert can spend time with it. Here’s the work I did that gets that far:

qrScanner.hype.zip (26.4 KB)

Note you must export as “index” for this to work at all; I had to change the WORKER_PATH variable in qr-scanner.min.js to have this instead of their invalid path.

The easier route might be to use their code in an iframe instead of the context of a Hype document and communicate back to a Hype document via postMessage, but even then it seems you’d need to do modifications to get this to work right.

1 Like

Hey thanks for getting back to me on this and its a real shame that this doesn’t work as it would make my web app so much more user friendly. Doing some research I found another scanner on GitHub which pretty much does them same thing - https://github.com/patrickpei/barcode-scanner

I avoided that one to start with because it looked a lot more complex than the other and therefore I thought it would be a bit of a non started. I also thought it might be a bit more complicated to incorporate it with my current project.

Might be worth looking into?

Yeah, that one seems to be more of a web application than something to necessarily integrate into a page.

That said, you could make an HTML Widget element with the Specified URL a link to their live page, though this will only show a scanned URL in a popup.

Hi Jonathan,

I’ve had some success getting this to work when changing the code in the rectangle element to:

video width=“100%” height=“100%” autoplay="" playsinline="" id=“scannerVideo”></video

Have a look at it working by downloading it from my dropbox

The only problem now is that although it works fine using the preview function in Hype, once its exported I can’t seam to get it to work. Any ideas?

It works great by the way in the preview part of Hype and always thanks for your help :smiley:

Ok so I’ve managed to get this working on my server by using a secure server whilst running it however even using a secure server it still doesn’t read the qr codes :weary: Sooooo close! (it automatically works on Firefox which doesn’t have the same security measures)

I feel this can be done but there something I’m missing between exporting from Hype and uploading onto my server. Within hype it works great (really good in-fact) but as soon as I export all goes down hill.

Once I’ve managed to get this working I’ll be looking at trying to get the results displayed in a hype element rather than an ‘alert’ box.

If anyone can help with the above or give advice I will be extremely grateful. This feature will add so much user friendliness to my project if I can get it working correctly.

Thanks :smile:

So I’ve just re-looked at this and I’ve managed to get in working as expected. I’ve loaded it onto a secure server and as suggested by @Jonathan and exported the file as “index” to match the coding within qr-scanner.min.js.

So…

All I need help with is getting the results from the ‘alert’ box to display in a hype element. Similar to what I requested earlier on in the post and @MarkHunte was able to provide an excellent example of this.

Once I’m able to do that I’ll be able to incorporate this qr code scanner into my current project :slight_smile:

1 Like

A simple way is just give your element an id and query it in the startScanner

Something like this ( did test in Chrome and it worked )

  window['startScanner'] = function () {
	    	var scannerVideoElement = document.getElementById("scannerVideo");
			var qrScanner = new QrScanner(scannerVideoElement, function (result) {
			
			 
				var testText_ = document.querySelector('#testText').innerHTML = result 
			});
			qrScanner.start();
1 Like

@MarkHunte thank you so much for this! It works perfectly. Just wondering if it was possible to start a timeline or jump to another scene once a QR code has been picked up?

Probably a couple of ways but you could use the event callback to register the hypedocument into the windows/documents scope so the function can do something like this.

    <script type="module">
	    import QrScanner from "./${resourcesFolderName}/qr-scanner.min.js";
	    
	    window['startScanner'] = function () {
	    	var scannerVideoElement = document.getElementById("scannerVideo");
			var qrScanner = new QrScanner(scannerVideoElement, function (result) {
			
			alert(result )
			window.myhypedocument.getElementById('testText').innerHTML = result 
			 window.myhypedocument.showSceneNamed('scene2', window.myhypedocument.kSceneTransitionCrossfade, 1.1)
			});
			qrScanner.start();
	    }
	    
	    
	</script>
	
	
	<script type="text/javascript"> function myCallback(hypeDocument, element, event){ 
 
  window.myhypedocument = hypeDocument; } 

if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}


window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});
</script>
3 Likes

Excellent as always @MarkHunte. I’m going to spend the afternoon using this in my project to see if I can scan some QR codes using this and send the data to my server :slight_smile:

Hi team, I built a QR scanner app based off the file in this thread, but having resurrected it this week it seems to no longer work due to the following error:

blocked because of a disallowed MIME type (“application/xml”)

The original file above (qrScanner- updated.hype.zip )is also affected.

Is there a solution to this?

Not to worry, I've managed to build a new one using https://github.com/mebjas/html5-qrcode

Working on Chrome/Firefox and what I needed it for the most, and Android tablet (bypassing the camera permissions was a bit of a pain but I got there).

I can share the Hype document if anyone wants it.

2 Likes

Also check out this implementation. It generates a QR code in a rectangle based on a data attribute.