Feature/59 create with html element instead of id only

README.md

@@ -72,9 +72,9 @@ We are working continuously on adding support for more and more platforms. If yo
 ### Framework support
 The library can be easily used with several other frameworks, I have been adding examples for a few of them and would continue to add more.
 
-|<img src="https://scanapp.org/assets/github_assets/html5.png" width="30px">| <img src="https://scanapp.org/assets/github_assets/vuejs.png" width="30px">|<img src="https://scanapp.org/assets/github_assets/electron.png" width="30px"> | <img src="https://scanapp.org/assets/github_assets/react.svg" width="30px"> | <img src="https://seeklogo.com/images/L/lit-logo-6B43868CDC-seeklogo.com.png" height="30px">
-| -------- | -------- | -------- | -------- | -------- |
-| [Html5](./examples/html5) | [VueJs](./examples/vuejs) | [ElectronJs](./examples/electron) | [React](https://github.com/scanapp-org/html5-qrcode-react) | [Lit](./examples/lit)
+|<img src="https://scanapp.org/assets/github_assets/html5.png" width="30px">| <img src="https://scanapp.org/assets/github_assets/vuejs.png" width="30px">|<img src="https://scanapp.org/assets/github_assets/electron.png" width="30px"> | <img src="https://scanapp.org/assets/github_assets/react.svg" width="30px"> | <img src="https://seeklogo.com/images/L/lit-logo-6B43868CDC-seeklogo.com.png" height="30px"> | <img src="https://pbs.twimg.com/profile_images/1511434207079407618/AwzUxnVf_400x400.png" height="30px">
+| -------- | -------- | -------- | -------- | -------- | -------- |
+| [Html5](./examples/html5) | [VueJs](./examples/vuejs) | [ElectronJs](./examples/electron) | [React](https://github.com/scanapp-org/html5-qrcode-react) | [Lit](./examples/lit) | [Shadow DOM](./examples/html5-shadow-dom)
 
 ### Supported Code formats
 Code scanning is dependent on [Zxing-js](https://github.com/zxing-js/library) library. We will be working on top of it to add support for more types of code scanning. If you feel a certain type of code would be helpful to have, please file a feature request.
@@ -326,6 +326,12 @@ fileinput.addEventListener('change', e => {
 // Eventually, this beta API will be migrated to the public API.
 ```
 
+You can create the scanner instance by sending directly the HTML Element to the constructor as well:
+```js
+const readerElement = document.querySelector('div#reader');
+const html5QrCode = new Html5Qrcode(readerElement);
+```
+
 > Note that inline scanning and file-based scanning are mutually exclusive at the moment. This means you can only use one of them at a time. I'll soon be adding support for the option to have both if the requirement comes in. If you want to use both, use `html5QrCode#clear()` method to clear the canvas.
 
 ## Demo
@@ -576,10 +582,10 @@ class Html5Qrcode {
   /**
    * Initialize QR Code scanner.
    * 
-   * @param elementId - Id of the HTML element.
+   * @param elementOrElementId - The HTML DOM element or Id of the HTML element.
    * @param verbose - optional configuration object
    */
-  constructor(elementId: string, config:  Html5QrcodeFullConfig | undefined);
+  constructor(elementOrElementId: string | HTMLElement, config: Html5QrcodeFullConfig | undefined);
 
   /**
    * Start scanning QR codes or barcodes for a given camera.
@@ -708,12 +714,12 @@ class Html5QrcodeScanner {
   /**
    * Creates an instance of this class.
    *
-   * @param elementId Id of the HTML element.
+   * @param elementOrElementId - The HTML DOM element or Id of the HTML element.
    * @param config Extra configurations to tune the code scanner.
    * @param verbose - If true, all logs would be printed to console. 
    */
   constructor(
-    elementId: string,
+    elementOrElementId: string | HTMLElement,
     config: Html5QrcodeScannerConfig | undefined,
     verbose: boolean | undefined);
 

examples/html5-shadow-dom/README.md

@@ -0,0 +1,51 @@
+# html5-qrcode with HTML Element
+
+## Include the js library in your project
+```html
+<script src="https://unpkg.com/html5-qrcode"></script>
+```
+
+## Create the component in JavaScript
+```js
+class CustomComponent extends HTMLElement {
+    constructor() {
+        // Always call super first in constructor
+        super();
+
+        // Create a shadow root
+        const shadow = this.attachShadow({ mode: 'open' });
+
+        // Create elements
+        const wrapper = document.createElement('div');
+        const title = document.createElement('h2');
+        title.innerText = 'HTML5 qr-code Scanner with shadow dom components';
+        const idReader = document.createElement('div');
+        idReader.className = 'qr-reader';
+        idReader.style.width = '500px';
+        wrapper.appendChild(title);
+        wrapper.appendChild(idReader);
+        // Attach the created elements to the shadow dom
+        shadow.appendChild(wrapper);
+    }
+}
+
+// Define the new element
+customElements.define('custom-component', CustomComponent);
+```
+
+## Query an HTML element from DOM or Shadow DOM and pass it to the library
+
+```js
+const myCustomComponent = document.querySelector("custom-component");
+const childComponentQrReaderElement = myCustomComponent.shadowRoot.querySelector("div.qr-reader");
+const html5QrCodeScanner = new Html5QrcodeScanner(childComponentQrReaderElement, {
+  fps: 10,
+  qrbox: 250,
+});
+html5QrCodeScanner.render(onScanSuccess);
+```
+
+### Contributors
+| Name | Profile|
+| ----- | ------ |
+| Bilal EL CHAMI | [@bilal-elchami](https://github.com/bilal-elchami) |

examples/html5-shadow-dom/index.html

@@ -0,0 +1,67 @@
+<html>
+
+<head>
+    <title>Html-Qrcode Demo</title>
+
+<body>
+    <h1>This is a Shadow Dom example</h1>
+    <custom-component></custom-component>
+</body>
+<script src="/html5-qrcode.min.js"></script>
+<script>
+    // Create a class for the element
+    class CustomComponent extends HTMLElement {
+        constructor() {
+            // Always call super first in constructor
+            super();
+
+            // Create a shadow root
+            const shadow = this.attachShadow({ mode: 'open' });
+
+            // Create elements
+            const wrapper = document.createElement('div');
+            const title = document.createElement('h2');
+            title.innerText = 'HTML5 qr-code Scanner with shadow dom components';
+            const idReader = document.createElement('div');
+            idReader.className = 'qr-reader';
+            idReader.style.width = '500px';
+            wrapper.appendChild(title);
+            wrapper.appendChild(idReader);
+            // Attach the created elements to the shadow dom
+            shadow.appendChild(wrapper);
+        }
+    }
+
+    // Define the new element
+    customElements.define('custom-component', CustomComponent);
+
+    function docReady(fn) {
+        // see if DOM is already available
+        if (document.readyState === "complete"
+            || document.readyState === "interactive") {
+            // call on next available tick
+            setTimeout(fn, 1);
+        } else {
+            document.addEventListener("DOMContentLoaded", fn);
+        }
+    }
+
+    docReady(function () {
+        var lastResult, countResults = 0;
+        function onScanSuccess(decodedText, decodedResult) {
+            if (decodedText !== lastResult) {
+                ++countResults;
+                lastResult = decodedText;
+                // Handle on success condition with the decoded message.
+                console.log(`Scan result ${decodedText}`, decodedResult);
+            }
+        }
+        const myCustomComponent = document.querySelector('custom-component');
+        const childComponentQrReaderElement = myCustomComponent.shadowRoot.querySelector('div.qr-reader')
+        var html5QrCodeScanner = new Html5QrcodeScanner(childComponentQrReaderElement, { fps: 10, qrbox: 250 });
+        html5QrCodeScanner.render(onScanSuccess);
+    });
+</script>
+</head>
+
+</html>