How to open scanner on login page

Hello Team,
How is it possible? When I click on the QR Code button, the Scanner can be opened


Thank You

Need help, please @NCP @avc @ankush @buildwithhussain

HTML

    <button class="btn btn-sm btn-secondary btn-block" id="qr-login-btn">
        {{ _("QR Code") }}
    </button>

Javascript

<script>
       $('#qr-login-btn').click(function(event) {
            event.preventDefault(); // Prevent default form submission
            console.log("Hello")
            // Initialize the QR code scanner
            new frappe.ui.Scanner({
                dialog: true, // Open scanner in a dialog
                multiple: false, // Stop after scanning one value
                on_scan: function(data) {
                    console.log(data.decodedText); // Handle scanned data
                }
            });
        })  
</script>

Error

layout.js:227 Uncaught TypeError: frappe.ui.form.make_control is not a function
    at Dialog2.init_field (layout.js:227:35)
    at Dialog2.make_field (layout.js:214:25)
    at layout.js:175:11
    at Array.forEach (<anonymous>)
    at Dialog2.render (layout.js:156:10)
    at Dialog2.make (layout.js:39:8)
    at Dialog2.make (field_group.js:22:10)
    at Dialog2.make (dialog.js:50:9)
    at Dialog2.make (bootstrap-4-web.bundle.js:63:9)
    at new Dialog (dialog.js:17:8)
1 Like

I found a solution for this
Thank You!