Code Monkey home page Code Monkey logo

html5-qrcode's Introduction

HTML5 QR Code Reader

Description

This is a cross platform jQuery library to create a QRcode reader for HTML5 compatible browser.

The decoder used for the QRcode reading is from LazarSoft https://github.com/LazarSoft/jsqrcode

Demo

See a demo here https://dwa012.github.io/html5-qrcode/

Usage

Include:

  • jQuery
  • The two supplied files in the lib directory; html5_qrcode.min.js, and jsqrcode-combined.min.js.

Create a basic <div> with a given width and height.

Presently width and height attributes must be set.

 <div id="reader" style="width:300px;height:250px">
 </div>

Then call the html5_qrcode function on the div.

 $('#reader').html5_qrcode(function(data){
 		 // do something when code is read
 	},
 	function(error){
		//show read errors 
	}, function(videoError){
		//the video stream could be opened
	}
);

It takes three callbacks: a readSuccess, readError, and videoLoadError. The readError will be called quite often, it is really only useful for debugging.

videoError is called if the HTML5 video stream cannot be opened.

When you're done using the camera, call $('#reader').html5_qrcode_stop() to stop scanning for QR codes, close the stream, and relinquish permissions granted by the user.
(This will result in the "camera on" light on their device turning off)

Development

To create your own builds, you can use Grunt. A gruntfile has been set up to create minified versions of html5-qrcode.js and jsqrcode-combined.js. You will need npm (comes with node), and Grunt installed first.

Once installed, clone this repo and load the submodules by running: git submodule init then git submodule update. Then run npm install to download the node packages for Grunt.

Now, to build the minified versions just run grunt from the project directory in your terminal. If you're doing continuous development, you can run grunt watch to continuously watch javascript files in src\ and automatically build minified versions when they are modified.

MIT LICENSE

Copyright © 2013 Daniel Ward

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

html5-qrcode's People

Contributors

acdesouza avatar ashutoshsharma4306 avatar barlowdw avatar dwa012 avatar gabrielalinck avatar ilyasukhanov avatar kumarshanu19 avatar kylebakerio avatar megha1527 avatar mgedmin avatar mittal-arpit avatar oacdesigns avatar spacelatte avatar thatneat avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

html5-qrcode's Issues

<canvas> and <video> size set at 0px

Getting no errors, but the div which the qrcode scanner is being given is having the Canvas and video tags added inside it, but they are both set to 0px. I can manually set the the size of Video and Canvas in Css so that you can see the video but the scanner is also not working. I'm guessing the size issue is a symptom of something else?

change camera

I really like this plugin, but i would really love to see the possibility to use the rear camera of my phone instead of the front camera.

Bower support?

This library is quite good ! It could be great to have it on bower.

How do you stop the video from scanning?

I am using the qrcode in div which was launched in a modal window. How do I stop the QR Code & camera after capturing code. Is there a way to stop the qrcode & camera.

It looks like there is no stop function to call here https://github.com/dwa012/html5-qrcode/blob/master/lib/jsqrcode-combined.min.js. But there is a stop function in in this code https://github.com/dwa012/html5-qrcode/blob/master/lib/html5-qrcode.min.js but this code doesn't have the qrcode reader. Please let me know what you did to stop the camera. Thanks!

Please provide build instructions

I'm trying to reproduce a working build of a minified .js file containing all of jsqrcode and html5-qrcode.js because I need source maps for our internal error tracking system (Sentry).

I got as far as

uglifyjs src/jsqrcode/src/{grid,version,detector,formatinf,errorlevel,bitmat,datablock,bmparser,datamask,rsdecoder,gf256poly,gf256,decoder,QRCode,findpat,alignpat,databr}.js\
         src/html5-qrcode.js \
         -o lib/html5-qrcode.min.js \
         --source-map lib/html5-qrcode.min.map \
         -p relative

(by taking the order of the jsqrcode script files from src/jsqrcode/README).

Unfortunately the JS I get fails to work: it displays one webcam image and then stops updating, with an ReferenceError: localMediaStream is not defined error on line 3 of my minified .js file (and for bonus points Chrome fails to find the .min.map file so I don't get a sane traceback).

Could you please document your build process?

Does not appear to work on Firefox Nightly nor Chrome

Is there an example picture that will work? I'm generating a QR code on my phone and hold it into the camera, generating a fairly clear contrastful picture. But nothing happens, in neither Firefox Nightly nor Chrome. How does one debug this thing :)

Someone has a basic example code?

I'm new at the library and I don't know how it works, I tried with this code, but I can't make it works :(

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Lector de códigos</title>
    <script type="text/javascript" src="html5-qrcode.min.js"></script>
  </head>
  <body>
    <div id="reader" style="width:300px;height:250px">
    </div>
      <script type="text/javascript">
      $('#reader').html5_qrcode(function(data){
     // do something when code is read
        },
        function(error){
          //show read errors 
        }, function(videoError){
          //the video stream could be opened
        }
      );
    </script>
  </body>
</html>

Can someone help me, please?

Trouble scanning a code

I run into problems scanning a code for xpub6CikcRxh6k2Ps4uHHPPQEGtvSFfs9SqYdVzxkqRV1d8iriq3JMFAdEvKQe8HMtAWuZhCw87zvjBZRGZeFtzpSXDe2WRGusvvXqiePygmFmqP.

In 5 minutes I got many many "Couldn't find enough finder patterns", "Error" and "Couldn't find enough alignment patterns" but once it actually did scan the code but horribly unreliable. Is there anything I can do to improve that? Increase/decrease the scan interval? What role does the canvas size play?

The actual code is from Mycelium Android App that doesn't allow screenshots but here is a photo:

2015-03-01-015819

Not working IOS

It works fine on Android and computer. But is not working on IOS.

My video tag:
var vidTag = '<video id="html5_qrcode_video" width="0" height="0" muted playsinline autoplay></video>'
Does anyone have a solution.
Thanks...

link for test

'qrcode' is not defined

Hi,
When I use your js version on demo page, it works perfectly (event if html5_qrcode_stop() method isn't implemented), but when I use lib/html5-qrcode.min.js as you say, I've an error during initialization :
"Uncaught ReferenceError: qrcode is not defined" and effectively, you attach some callbacks to this variable but I don't find its declaration.
Regards,
Vincent

html5-qrcode.js minified version not updated

On 24 February 2021 you updated html5-qrcode.js due to Navigator.getUserMedia() is deprecated but you don't updated the minified version of this javascript file. So, your package is not completely up to date.

Thanks for all

Nadine Gibaud

How to start again after calling .html5_qrcode_stop()

I use $('#element').html5_qrcode_stop(); after successfully reading a qrcode.
After some actions I want to start over again and enable tracking.
If I call $('#element').html5_qrcode(function(data) { ... }) again, everything gets duplicated. I get another video element and after a short time everything crashes.

How can I just start the tracking process again after it was stopped? Something like $('#element').html5_qrcode_start(); would be great but I can not find within the source.

How to choose camera?

Hi

Is there way to control which camera to use?
From my laptop - chrome it uses back camera, while my android phone - chrome uses front camera.
is this more of browser issue?

Browser support?

Hi,

Just wondering if it works on IE11/10? as I opened the test url on IE11 and no webcam detected.

Thanks

getting error when content security policy is set for style-src and unsafe-inline not present.

This is a xss security issue caused by code at https://github.com/dwa012/html5-qrcode/blob/master/src/html5-qrcode.js#L19 . This can be fixed by replacing it by

var canvasElem = $('<canvas id="qr-canvas" width="' + (width - 2) + 'px" height="' + (height - 2) + 'px" style="display:none;"></canvas>').appendTo(currentElem);

Can you please update your code for the same?

For more information in content-security-policy, please visit https://content-security-policy.com/

Could you please share more instruction to use this in salesforce..

i have include the JS file, here is the code snippet. could you please help me out to call $('#reader').html5_qrcode(); from div.

<apex:includeScript value="{!$Resource.HTML5_QR_Code_Reader}"/>

QR CODE reader

<script type="text/javascript"> $('#reader').html5_qrcode(); alert('out here'); $('#reader').html5_qrcode(function(data){ // do something when code is read alert('here'); }, function(error){ //show read errors }, function(videoError){ //the video stream could be opened } ); </script>

Why not include a basic html ? (Git general usage)

I'm new to git, and I really don't understand the concept of the "here's an example you can run ! except you have to do 34886 unnecessary manipulations, and add things to your own files ! enjoy !"

I understand I have to npm install, get grunt etc., but why can't you put functioning files ? like a basic html to have a base to work on, and the main.js even if it's very basic ? I managed to make a basic file by using your demo html source code but when you say "Then call the html5_qrcode function on thediv" and throw some code without saying where it should be I don't know what to do and I feel like you could have put it in the file in the first place.

A lot of git repos are like this one, incomplete, necessitating hundreds of manipulation that could have been included, and more than vague instruction. Is it a common habit ? Is it a thing so that people that don't really know what you're doing can't reproduce your "example" at home ?
I could really use some explanation (on the git usage as well as on how to make the example run), because maybe you think it's clear but for a newbie it really isn't

gagaga

how to start this demo I am try it many times and can't found the demo with online

Destroy Event

Would it be possible to create a destroy event? I need to be able to stop trying to read qr's from the webcam and pausing the video or emptying the div just causes the library to throw TypeErrors.

I would do it myself and create a pull request but I don't have the slightest clue about making destroy events in jQuery.

I would also like to say this an awesome plugin. Works exactly as you state, and is exactly what I was looking for.

Example on webqr.com not working in Chrome 53

Since the new Chrome version 53 there is an error on your example site https://webqr.com/

Failed to load resource: The server responded with a status 404 (Not Found) [object%20MediaStream]

The src of the video tag is missing.

Anybody any idea what changed in chrome 53? I did not found any information within the chrome developer announcements according to this behaviour.

Since Chrome 52 everything was fine.

ReferenceError: qrcode is not defined

Hello,

I am importing the html5-qrcode.min.js file directly from github while I develop my app and am following readme instructions as accurately as possible but am still getting a 'not defined error'. Please help.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://raw.githubusercontent.com/dwa012/html5-qrcode/master/lib/html5-qrcode.min.js"></script>
<script>
    $(document).ready(function(){
        $('#reader').html5_qrcode(function(data){
                console.log('it works');
            },
            function(error){
                $('#read_error').html(error);
            }, function(videoError){
                $('#vid_error').html(videoError);
            }
        );
    });
</script>

Please can you help me undetstand what is wrong with this code?
Thanks :)

UPDATE:
importing the html5-qrcode.min.js file from the example website fixed the problem but I am still unable to activate the camera in chrome, firefox is working fine.

<script src="https://raw.githubusercontent.com/dwa012/html5-qrcode/master/lib/html5-qrcode.min.js"></script>

Chrome works on the example website though so there must be something different which I am not realising :/

Why is the html5-qrcode.min.js file that the example site uses different from the file in the git repo?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.