update readme

README.md

@@ -14,10 +14,14 @@ In this library, several improvements have been applied over the original port:
 
 - Works on higher resolution pictures by default.
 
+The library supports scanning a continuous video stream from a web cam as well as scanning of single images.
+
+## Demo
+See https://nimiq.github.io/qr-scanner/demo/
 
 ## Usage
 
-### Plain 
+### Web Cam Scanning
 
 #### 1. Import the library:
 ```
@@ -25,42 +29,42 @@ In this library, several improvements have been applied over the original port:
 ```
 
 #### 2. Create HTML
-You need both a `<video>` and a `<canvas>` element: 
+Create a `<video>` element where the web cam video stream should get rendered: 
 ```html
 <video></video>
-<canvas></canvas>
-
 ```
 
-#### 3. Instantiate Library
+#### 3. Create a QrScanner Instance
 ```js
-const qrScanner = new QrScannerLib(videoElem, canvasElem, (text) =>{
-  console.log('decoded qr code:', text)
-})
+const qrScanner = new QrScanner(videoElem, result => console.log('decoded qr code:', result));
 ```
+As an optional third parameter a specific resolution that should be worked on can be specified. The default is 400.
 
-### As X-Element
-Alternatively you can use this library as an [X-Element](https://github.com/nimiq/x-element):
 
-#### 1. Import the element:
+
+### Single Image Scanning
+
+#### 1. Import the library:
 ```
 <script src="qr-scanner.min.js"></script>
 ```
 
-#### 2. Create HTML
-You need both a `<video>` and a `<canvas>` element: 
-```html
-<x-qr-scanner>
-    <video muted autoplay playsinline></video>
-    <canvas></canvas>
-</x-qr-scanner>
-
-```
-
-#### 3. Instantiate Library
+#### 2. Scan your image
 ```js
-const qrScanner = new QrScanner()
+QrScanner.scanImage(image)
+    .then(result => console.log(result))
+    .catch(error => console.log(error || 'No QR code found.'));
 ```
+Supported image sources are:
+[HTMLImageElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement),
+[SVGImageElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGImageElement),
+[HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement),
+[HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement),
+[ImageBitmap](https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap),
+[OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas),
+[File](https://developer.mozilla.org/en-US/docs/Web/API/File) / [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob)
+
+
 
 
 ### Color Correction
@@ -72,7 +76,7 @@ qrScanner.setGrayscaleWeights(red, green, blue)
 ```
 
 ## Build the project
-The project is prebuild in qr-scanner-worker.min.js. Building yourself is only neccessary if you want to change the code in
+The project is prebuild in qr-scanner.min.js in combination with qr-scanner-worker.min.js. Building yourself is only neccessary if you want to change the code in
 the /src folder. Nodejs and Java are required for building.
 
 Install required build packages:
@@ -82,7 +86,7 @@ npm install
 
 Building:
 ```batch
-gulp build
+gulp
 ```
 
 ## Debug Mode
@@ -98,10 +102,8 @@ qrScanner._qrWorker.postMessage({
 To handle the debug image:
 ```js
 qrScanner._qrWorker.addEventListener('message', event => {
-  const type = event.data.type;
-  const data = event.data.data;
-  if (type === 'debugImage') {
-      canvasContext.putImageData(data, 0, 0);
+  if (event.data.type === 'debugImage') {
+      canvasContext.putImageData(event.data.data, 0, 0);
   }
 });
 ```