Added autostart attribute and startStream() and stopStream() functionality

Author: istvank

README.md

@@ -5,24 +5,39 @@ A QR Code Reader Web Component. A custom event makes it easy to get notified abo
 This repository was forked from https://github.com/educastellano/qr-reader.
 It is using the [jsqrcode](https://github.com/LazarSoft/jsqrcode) lib.
 
+Feel free to send me any issues or pull requests!
+
+
+## Demo
+Check the [component page](https://istvank.github.io/qr-reader/) for more information.
+
+
+## Compatibility
+This is a highly experimental piece of software. To the best of my knowledge the QR reader only works on recent Chrome
+browsers (Desktop and Mobile on Android) and was tested with Chrome >= 48.0.
+
 
 ## Usage
 
 As simple as that:
 
-	```html
-	<link rel="import" href="qr-reader.html">
+```html
+<link rel="import" href="qr-reader.html">
+
+<qr-reader autostart></qr-reader>
+
+<script>
+	var qrReader = document.querySelector('qr-reader');
 
-	<qr-reader output></qr-reader>
+	qrReader.addEventListener("qr-code-read", function(e) {
+		alert(e.detail);
+	});
+</script>
+```
 
-	<script>
-    	var qrReader = document.querySelector('qr-reader');
+Instead of defining the `autostart` attribute feel free to call `qrReader.startScan()` whenever your application is
+ready to scan.
 
-    	qrReader.addEventListener("qr-code-read", function(e) {
-    		alert(e.detail);
-    	});
-    </script>
-	```
 
 ## License
 

bower.json

@@ -1,6 +1,6 @@
 {
 	"name": "qr-reader",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"homepage": "https://github.com/istvank/qr-reader",
 	"authors": [
 		"István Koren <https://istvank.eu>"

demo/index.html

@@ -10,19 +10,32 @@
 	<p>Capture a QR Code with your camera. As soon as it is read, an alert shows the QR code's content.</p>
 
 	<!-- Using the Web Component -->
-	<qr-reader output></qr-reader>
+	<qr-reader autostart></qr-reader>
+
+	<button type="button" id="startScan">Start Scanning</button>
+	<button type="button" id="stopScan">Stop Scanning</button>
 
 	<!-- Polyfill -->
-	<script src="../bower_components/webcomponentsjs/webcomponents.min.js"></script>
+	<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
 	<!-- Webcomponent and dependencies -->
 	<link rel="import" href="../qr-reader.html">
 
 	<script>
 		var qrReader = document.querySelector('qr-reader');
+		var startButton = document.querySelector('#startScan');
+		var stopButton = document.querySelector('#stopScan');
 
-		qrReader.addEventListener("qr-code-read", function(e) {
+		qrReader.addEventListener('qr-code-read', function(e) {
 			alert(e.detail);
 		});
+
+		startButton.addEventListener('click', function(e) {
+			qrReader.startScan();
+		});
+
+		stopButton.addEventListener('click', function(e) {
+			qrReader.stopScan();
+		});
 	</script>
 </body>
 </html>

qr-reader.js

@@ -28,7 +28,8 @@
 				outputAttr: 'textContent',
 				onRead: '',
 				interval: 1000,
-				scale: 0.5
+				scale: 0.5,
+				autostart: false
 			}
 		},
 		defineAttributes: {
@@ -78,6 +79,24 @@
 
 				this.defineAttributes();
 
+				if (this.autostart !== false) {
+					this.startScan();
+				}
+			}
+		},
+		attributeChangedCallback: {
+			value: function (attrName, oldVal, newVal) {
+				var fn = this[attrName+'Changed'];
+				if (fn && typeof fn === 'function') {
+					fn.call(this, oldVal, newVal);
+				}
+			}
+		},
+		//
+		// Methods
+		//
+		startScan: {
+			value: function () {
 				var me = this,
 					media_options,
 					success,
@@ -114,7 +133,8 @@
 									success = function (stream) {
 										me.shadowRoot.getElementById('video').src = (window.URL && window.URL.createObjectURL(stream)) || stream;
 										stream_obj = stream;
-										me.startScan();
+										me.stream = stream;
+										//me.startScan();
 									};
 
 									error = function (error) {
@@ -132,40 +152,25 @@
 							console.log(err.name + ": " + error.message);
 						});
 
-				}
-				else {
+				} else {
 					console.log('Sorry, native web camera access is not supported by this browser...');
 				}
 
-				//this.generate();
-			}
-		},
-		attributeChangedCallback: {
-			value: function (attrName, oldVal, newVal) {
-				var fn = this[attrName+'Changed'];
-				if (fn && typeof fn === 'function') {
-					fn.call(this, oldVal, newVal);
-				}
-				this.generate();
-			}
-		},
-		//
-		// Methods
-		//
-		startScan: {
-			value: function () {
-				var me = this;
 
 				if (interval_id) {
 					me.stop();
 				}
-				interval_id = setInterval(function (video, scale) {
+				interval_id = setInterval(function(video, scale) {
 					me.capture()
 				}, this.interval);
 			}
 		},
 		stopScan: {
 			value: function () {
+				// close the stream from the webcam
+				this.stream.getTracks()[0].stop();
+
+				// stop trying to detect QR codes in the stream
 				clearInterval(interval_id);
 			}
 		},
@@ -186,6 +191,8 @@
 		},
 		stop: {
 			value: function () {
+				var me = this;
+
 				this.stopScan();
 				if (stream_obj) {
 					if ('stop' in stream_obj) {