Is the Pro way using class Html5Qrcode working? #511

alvarorgaz · 2022-07-20T15:27:28Z

alvarorgaz
Jul 20, 2022

Please @mebjas or others I would love some help here. I am trying to use Html5Qrcode with my own UI (pro way in README) but the camera does not even start neither get asked for camera permissions (trying on Django local server with Safari & Chrome).

Note: I manage to make work the Easy way with class Html5QrcodeScanner.

Basically my html file looks like:

...
<body>

<div id="reader" width="600px"></div>

<script src="https://unpkg.com/html5-qrcode" type="text/javascript">

// This method will trigger user permissions
Html5Qrcode.getCameras().then(devices => {
  /**
   * devices would be an array of objects of type:
   * { id: "id", label: "label" }
   */
  if (devices && devices.length) {
    var cameraId = devices[0].id;
    // .. use this to start scanning.
  }
}).catch(err => {
  // handle err
});

const html5QrCode = new Html5Qrcode(/* element id */ "reader");
html5QrCode.start(
  cameraId, 
  {
    fps: 10,    // Optional, frame per seconds for qr code scanning
    qrbox: { width: 250, height: 250 }  // Optional, if you want bounded box UI
  },
  (decodedText, decodedResult) => {
    // do something when code is read
  },
  (errorMessage) => {
    // parse error, ignore it.
  })
.catch((err) => {
  // Start failed, handle it.
});

</script>

What is wrong?

ike3z · 2022-08-08T14:47:36Z

ike3z
Aug 8, 2022

Hey, have you managed to get it working?

0 replies

alvarorgaz · 2022-08-08T14:54:00Z

alvarorgaz
Aug 8, 2022
Author

Yes I made it work already :) Thanks for asking anyway, appreciated!

1 reply

metalsadman Aug 11, 2022

Yes I made it work already :) Thanks for asking anyway, appreciated!

can you post your solution please.

ike3z · 2022-08-08T15:02:46Z

ike3z
Aug 8, 2022

Can you point me to the right direction? I have the same problem... Thx. *//* *Michał Kania* ***@***.**** //* pon., 8 sie 2022 o 16:54 Álvaro Orgaz Expósito ***@***.***> napisał(a):

…

Yes I made it work already :) Thanks for asking anyway, appreciated! — Reply to this email directly, view it on GitHub <#511 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A2E2E2ITJH7TJVKAVGZ53ULVYENRHANCNFSM54EDSQEQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

0 replies

Mathias89 · 2022-09-07T06:15:14Z

Mathias89
Sep 7, 2022

...
<body>

<div id="reader" width="600px"></div>

<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>

<script>/* Should be another script (the script above loads the plugin; maybe wrap this code within a dom ready function */
// This method will trigger user permissions
Html5Qrcode.getCameras().then(devices => {
  /**
   * devices would be an array of objects of type:
   * { id: "id", label: "label" }
   */
  if (devices && devices.length) {
    var cameraId = devices[0].id;
    // .. use this to start scanning.

// Moved code here because getCameras() is a promise and it could happen that it is not finished before you call .start
// You have to ensure to await a promise to use its value (here cameraId)**
const html5QrCode = new Html5Qrcode(/* element id */ "reader");
html5QrCode.start(
  cameraId, 
  {
    fps: 10,    // Optional, frame per seconds for qr code scanning
    qrbox: { width: 250, height: 250 }  // Optional, if you want bounded box UI
  },
  (decodedText, decodedResult) => {
    // do something when code is read
  },
  (errorMessage) => {
    // parse error, ignore it.
  })
.catch((err) => {
  // Start failed, handle it.
});

  }
}).catch(err => {
  // handle err
});

</script>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Is the Pro way using class Html5Qrcode working? #511

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments 1 reply

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Is the Pro way using class Html5Qrcode working? #511

alvarorgaz Jul 20, 2022

Replies: 4 comments · 1 reply

ike3z Aug 8, 2022

alvarorgaz Aug 8, 2022 Author

metalsadman Aug 11, 2022

ike3z Aug 8, 2022

Mathias89 Sep 7, 2022

alvarorgaz
Jul 20, 2022

Replies: 4 comments 1 reply

ike3z
Aug 8, 2022

alvarorgaz
Aug 8, 2022
Author

ike3z
Aug 8, 2022

Mathias89
Sep 7, 2022