Press "Enter" to skip to content

How To Access The Users Webcam To Scan Bitcoin QR Codes

How To Access The Users Webcam To Scan Bitcoin QR Codes
How To Access The Users Webcam To Scan Bitcoin QR Codes

How To Access The Users Webcam To Scan Bitcoin QR Codes alright hey everyone youll see me Im in this little tiny box up in the screen and that gives you an idea of what this article is gonna be about its gonna be using the webcam accessing the webcam and then what can we do with that with Bitcoin mmm QR codes so lets create a very simple QR code scanner so you can then embed the data you know pull the data from the QR code and put it into your page or put it into the backend or do whatever it is you know that youre gonna do so were gonna do that were gonna use just a very simple library thats available on github and it is called insta scan just do a search on that you should come up with mich html5 QR code scanner and then you can follow the documentation here you can do the NPM if youre going to do it on nodejs but for this article were just gonna do it in simple HTML and were going to just include the minified version they have under releases so you can download the instascan minified version and were going to save that and then we can develop with it just by including it so lets go over to brackets or your text editor of choice and just do your basic html5 barebones wireframe you know whatever you need to create the website so that do my head tags Ill do my body tags and then were going to call that minified script and for now lets go ahead lets save this will create a new folder in htdocs so you need to use zamp you need to be running a apache on your computer zamp is free just click download to install its very simple to figure out and that way you can run as localhost so that this will work because if you try this without you know you just try just doubleclicking on the index file when youre done youre gonna get an error and the article is not gonna work so lets just call this well what to do lets do index tml so we stuck that in and lets grab our download over here lets go show and folder well copy this bad boy and lets move over to our QR code folder and well drop in the instascan dot Minjae s go ahead copy that go back and well dump it in for the script source and now we can start building with it so lets do our script tags script open and close and were gonna start with giving it a variable name so lets just call it QR code because thats simple and easy and it get things started were going to do new and then insta scan and then after that were going to do instascan dot scanner because we want to use a QR code scanner and thats the basic command to get things going but inside of this scanner we need to put the scanner function thats built in with this library is we need to put in an object so youll just do your curly braces break down and then inside we need to tell it where we want to put the article feed output so well just call it article : and then declare a part on the page you can do this with jQuery if you have it installed on your page I dont I didnt require that yeah so we can just do document get element by ID instead and itll work just fine and then name it whatever we want so lets call it a QR code cam for example so we need to create an element for this camera or the article feed to go and with html5 there is the article element isnt that nice and some phone you can just give it an ID and well call it Q our cam and thats and now that just creates a article element just like a div we create a div or a br creates a break and article has a article feed then so after we create the article feed we want to use the into instascan scanner you can go ahead look through the documentation if you want to but this guide Im gonna show you how you want to do it I mean if you were really lazy you could just copy the example they have here and run it but you know you dont end up really learning anything if you just copy and dump it you want to learn how the thing works so the next thing we have to do is add a listener and then tell it that we want to do whats known as the Auto scan built in on this library so if any QR code comes up in front of the camera on the page then its going to grab the data from it and you just do that with QR dot add listener and inside here its going to take two properties first is what listener do you want to add because there are different ones but the one that were gonna use is just the scanner or the skin where it grabs a QR code if it comes on the page and then after that its just a callback function so you just do function whatever curly brackets and then you can put you can name what you want the output to be since its a callback function and well just call it data and then we can just output it into console logs we can test it to see if it works console.log data now were almost done and this is almost ready to go however we need to find the users camera and you know what sort of laptop they have a webcam we need to do that and that is builtin with this library as well again and this thing is really easy to use used to insta scan dot camera not dot scanner camera and then the function to find it is just called get cameras and something that is quite interesting about this one if you are not that familiar with promises and JavaScript now when youre doing JavaScript and youre doing callbacks theres something known as callback hell and thats when youre doing callback after call back after callback and your code starts going way over the other right and then when you close it your code starts coming back over to the left and I have a good example here on my sweet key repo for a sweet pea org that I made that heres an example of callback hey look at that look at all these functions and calls that are being closed and thats really hard to work with its hard with asynchronous stuff like JavaScript well where it doesnt necessarily go top to bottom in order just whatever gets done first whoo so promises help with that and when theres a look at home let me go back the reason Im talking about promises is because the get cameras function returns a promise so you have to use a promise on this and so to do that were gonna do whats known as dot then so you run the function and then you say dot then which just basically means do this then do that and whats also cool about these the promise is error handling you can just catch the air too and you can do its as simple as dot catch look like but Kath dot catch and then each one of these just takes a simple callback function so you just do you know function whatever curly brackets dump it and then whatever you want to call the output so this output Id call it error you know for error so and then I just output it to the console console log and then youll have a callback function inside of then so function open close breaker down and what this returns is a list of all the persons cameras it is installed so we can call us whatever we want and call it um I dont know Kams again it doesnt matter so now we have a list of the cameras if the person has multiple which one do we want to choose we want to give them a list thats getting kind of complicated lets just grab their default cam the first one in the list which would be zero but before we do that we need to turn the camera on and you just do QR dot start and then inside this is where we select the camera that we want to turn on so we do cams straight brackets 0 and 0 just meaning the first one the default camera and this should be enough assuming I didnt make any errors but I usually make errors so lets see if this works Im just gonna go on over to my local host 8080 and we created the directory QR and index dot HTML and youll see there I am popped up nice and big the other one I made small you have to use CSS to make it small you cant just throw in a width parameter inside the article element you have to use the CSS if you want to make it smaller but lets bring up the console down here consoles blank if we bring up a QR code it should pop up into the console so let me grab my phone because I actually dont even own a printer anymore so put that in and youll see down there in the console it now shows the address so thats cool right I mean what can you do with that you can stick it in form and so when people say oh whats your address and stuff typing it in you know there youll hat youll see some of the websites will have QR code scanners and you know this is how you could possibly do one so we would do it in this data edit data area sorry Im having trouble speaking for some reason this Saturday morning but yeah so adlistener blah blah blah blah data comes back as data cuz thats what I named it and then we just can stick that in but we dont have anywhere to stick it in right so lets first create an area to stick it and now lets create an element an input element type with a speed text and we have to give it an ID so we can identify it lets just call it address or it could be private key right if you have a paper wallet you could create a private key scanner and well just change this to the document.getelementbyid e document get element by ID dot value equals data and the ID we want to target is address all right save this bad boy lets refresh it all right so now we got a little box down here now if I could scan my QR code there it goes pops in the data in here youll notice it says Bitcoin at the start this is a URI builtin because Im using Im specifically using my cell iam or mycelium and they put that you are in there in case youre dealing with another wallet it knows you know grab you know say electron is set up as your a URI for wallet : and then itll you know grab or open up electron but you can you know chop that out you can do some data validation check you know see does it start with a 1 or 3 because if it doesnt think you want to you know trim it or substring you know your substring and cut this out excuse my french and then just you know see what youve got left now but you dont want to just do a flat substring because someone might show up a QR code that doesnt have Bitcoin in front so you want to do the data validation thats basically how you can do it and this article is starting to get along so Im gonna have to cut it short but thank you guys for watching I just want to show this basic idea of how you could implement it and have some other ideas that I want to do Im just running really short on time lately with a new job and just life stuff so normal things just getting in the way dont have much time for crypto and side projects but recently my book I updated it because there were some references to btce and btce is no more I think what they moved I figure out what they called themselves I think of something with a w I dont remember but they changed their name and so the code examples in the book that referenced btce dont work anymore so I had to update it which means I had to take my book off off the shelf for about a week and now its back on so now if you buy a book youll get one that does not reference btce anymore instead Ill either use bitstamp or coinbase because they seem to be one of the you know the other ones that allow have been around a long time the reason I use btce is because it was around for so long oh well I what happens in the crypto space so well see and thats it so thank you guys for watching dont forget to Like comment subscribe share do whatever it is that you do and I will see you guys next time

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *