Use html5-qrcode instead of @zxing/library directly for label scanner.

This improves the usability a bit
This commit is contained in:
Jan Böhmer 2022-08-13 22:41:54 +02:00
parent f98487a03b
commit ca5823819d
4 changed files with 57 additions and 113 deletions

View file

@ -3,31 +3,24 @@
{% block card_title %}<i class="fas fa-camera-retro fa-fw"></i> {% trans %}label_scanner.title{% endtrans %}{% endblock %}
{% block card_content %}
<div class="alert alert-warning" id="scanner-warning">
<div class="alert alert-warning d-none" id="scanner-warning">
<strong>{% trans %}label_scanner.no_cam_found.title{% endtrans %}</strong>: {% trans %}label_scanner.no_cam_found.text{% endtrans %}
</div>
<div class="">
<div class="form-group row">
<div class="offset-sm-3 col-sm-9">
<div class="img-thumbnail" style="max-width: 600px;">
<div id="reader-box" {{ stimulus_controller('pages/barcode_scan') }}></div>
</div>
</div>
</div>
</div>
{{ form_start(form, {'attr': {'id': 'scan_dialog_form'}}) }}
{{ form_end(form) }}
<div class="">
<div class="form-group row">
<div class="offset-sm-3 col-sm-9">
<video id="video" width="100%" height="auto" class="scanner-video img-thumbnail d-none" {{ stimulus_controller('pages/barcode_scan') }}>
</video>
</div>
</div>
{# <div>
<button type="button" class="btn btn-secondary" id="changeSrcBtn">Change Source</button>
</div>#}
<div id="sourceSelectPanel" class="form-group row d-none">
<label for="sourceSelect" class="col-sm-3 col-form-label">{% trans %}label_scanner.source_select{% endtrans %}</label>
<div class="col-sm-9">
<select id="sourceSelect" style="" class="form-control"></select>
</div>
</div>
</div>
{% endblock %}