Merge pull request #28 from mebjas/viewfinderfix

Fix inconsistency between viewfinder qrbox and actual feed in canvas

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 node_modules/
 package-lock.json
+.vscode/

README.md

@@ -56,8 +56,9 @@ npm i html5-qrcode
 
 Add an element you want to use as placeholder for QR Code scanner
 ```html
-<div id="reader"></div>
+<div id="reader" width="600px"></div>
 ```
+> Ideally do not set the height of this container as the height should depend on the height of the video feed from the camera. The library would honor existing width otherwise apply the default width. The height is derived from the aspect ratio of the video feed.
 
 Add `minified/html5-qrcode.min.js` in your web page. 
 > I would recommend using the minified version as it's transformed to standard javascript. The `html5-qrcode.js` is written with ECMAScript and may not be supported in the older version of the browsers. I wrote in this as it's easier to maintain!
@@ -135,9 +136,10 @@ You can alternatively leverage QR Code scanning for local files on the device or
 
 Define the HTML container and import the javascript library as mentioned above
 ```html
-<div id="reader"></div>
+<div id="reader" width="600px" height="600px"></div>
 <script src="./minified/html5-qrcode.js"></script>
 ```
+> It's not mandatory to set the height and width of the HTML element. If provided the library would try to honour it. If it's not set the library would set a default width and derive the height based on the input image's aspect ratio.
 
 Add an `Input` element for supporting file selection like this:
 ```html

changelog.md

@@ -0,0 +1,13 @@
+### Version 1.0.7
+ + Fixed the video size issue in [issues/21](https://github.com/mebjas/html5-qrcode/issues/21)
+ + Removed fixed height of viewfinder, now the height is based on the video stream. The width is honored if the input element has a default width. Otherwise default width is applied.
+ + If `config.qrbox` is greater than derived height, the config is ignored & no shading is applied.
+ + The sequence of steps have changed
+    + First we get the video feed from the selected camera
+    + Then we render video
+    + Then based on the height of the video we set the canvas and start scanning.
+ + For file scanning, if the container element has some height or width both are honored. 
+    Otherwise default width is applied and height is derived from the image.
+
+### Older versions
+Mostly covered in [readme](./README.md), changelog tracking started since `version 1.0.7`