├── db.sqlite3 ├── bar ├── __init__.py ├── .gitignore ├── static │ ├── __init__.py │ ├── css │ │ └── style.css │ └── js │ │ └── main.js ├── migrations │ ├── __init__.py │ └── __pycache__ │ │ └── __init__.cpython-36.pyc ├── models.py ├── admin.py ├── tests.py ├── apps.py ├── __pycache__ │ ├── admin.cpython-36.pyc │ ├── apps.cpython-36.pyc │ ├── urls.cpython-36.pyc │ ├── views.cpython-36.pyc │ ├── __init__.cpython-36.pyc │ ├── barCode.cpython-36.pyc │ └── models.cpython-36.pyc ├── urls.py ├── templates │ ├── includes │ │ ├── script.html │ │ ├── header.html │ │ └── navbar.html │ └── ScanBook.html ├── views.py └── barCode.py ├── barcode ├── __init__.py ├── __pycache__ │ ├── urls.cpython-36.pyc │ ├── wsgi.cpython-36.pyc │ ├── __init__.cpython-36.pyc │ └── settings.cpython-36.pyc ├── wsgi.py ├── urls.py └── settings.py ├── _config.yml ├── .DS_Store ├── .idea ├── vcs.xml └── workspace.xml ├── requirements.txt ├── manage.py ├── README.md └── brief.svg /db.sqlite3: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /bar/__init__.py: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /bar/.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ -------------------------------------------------------------------------------- /bar/static/__init__.py: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /barcode/__init__.py: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /bar/migrations/__init__.py: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /bar/models.py: -------------------------------------------------------------------------------- 1 | from django.db import models 2 | 3 | # Create your models here. 4 | -------------------------------------------------------------------------------- /bar/admin.py: -------------------------------------------------------------------------------- 1 | from django.contrib import admin 2 | 3 | # Register your models here. 4 | -------------------------------------------------------------------------------- /bar/tests.py: -------------------------------------------------------------------------------- 1 | from django.test import TestCase 2 | 3 | # Create your tests here. 4 | -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sagban/Zbar-barcode-reader-python-javascript/HEAD/.DS_Store -------------------------------------------------------------------------------- /bar/apps.py: -------------------------------------------------------------------------------- 1 | from django.apps import AppConfig 2 | 3 | 4 | class BarConfig(AppConfig): 5 | name = 'bar' 6 | -------------------------------------------------------------------------------- /bar/__pycache__/admin.cpython-36.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sagban/Zbar-barcode-reader-python-javascript/HEAD/bar/__pycache__/admin.cpython-36.pyc -------------------------------------------------------------------------------- /bar/__pycache__/apps.cpython-36.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sagban/Zbar-barcode-reader-python-javascript/HEAD/bar/__pycache__/apps.cpython-36.pyc -------------------------------------------------------------------------------- /bar/__pycache__/urls.cpython-36.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sagban/Zbar-barcode-reader-python-javascript/HEAD/bar/__pycache__/urls.cpython-36.pyc -------------------------------------------------------------------------------- /bar/__pycache__/views.cpython-36.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sagban/Zbar-barcode-reader-python-javascript/HEAD/bar/__pycache__/views.cpython-36.pyc -------------------------------------------------------------------------------- /bar/__pycache__/__init__.cpython-36.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sagban/Zbar-barcode-reader-python-javascript/HEAD/bar/__pycache__/__init__.cpython-36.pyc -------------------------------------------------------------------------------- /bar/__pycache__/barCode.cpython-36.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sagban/Zbar-barcode-reader-python-javascript/HEAD/bar/__pycache__/barCode.cpython-36.pyc -------------------------------------------------------------------------------- /bar/__pycache__/models.cpython-36.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sagban/Zbar-barcode-reader-python-javascript/HEAD/bar/__pycache__/models.cpython-36.pyc -------------------------------------------------------------------------------- /barcode/__pycache__/urls.cpython-36.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sagban/Zbar-barcode-reader-python-javascript/HEAD/barcode/__pycache__/urls.cpython-36.pyc -------------------------------------------------------------------------------- /barcode/__pycache__/wsgi.cpython-36.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sagban/Zbar-barcode-reader-python-javascript/HEAD/barcode/__pycache__/wsgi.cpython-36.pyc -------------------------------------------------------------------------------- /barcode/__pycache__/__init__.cpython-36.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sagban/Zbar-barcode-reader-python-javascript/HEAD/barcode/__pycache__/__init__.cpython-36.pyc -------------------------------------------------------------------------------- /barcode/__pycache__/settings.cpython-36.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sagban/Zbar-barcode-reader-python-javascript/HEAD/barcode/__pycache__/settings.cpython-36.pyc -------------------------------------------------------------------------------- /bar/migrations/__pycache__/__init__.cpython-36.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sagban/Zbar-barcode-reader-python-javascript/HEAD/bar/migrations/__pycache__/__init__.cpython-36.pyc -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /bar/urls.py: -------------------------------------------------------------------------------- 1 | from django.conf.urls import url 2 | from . import views 3 | from django.urls import path 4 | from django.views.generic import TemplateView 5 | 6 | urlpatterns = [ 7 | path('', views.ScanBooks, name='ScanBooks'), 8 | path('decode/', views.decodeAjax,name='decodeAjax'), 9 | 10 | ] -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | dependency-management==0.4.0 2 | Django==2.0.3 3 | django-sslserver==0.20 4 | gitdb2==2.0.3 5 | GitPython==2.1.9 6 | numpy==1.14.3 7 | packaging==17.1 8 | pbr==4.0.3 9 | Pillow==5.0.0 10 | pytz==2018.3 11 | PyYAML==3.12 12 | pyzbar==0.1.7 13 | requests==2.18.4 14 | urllib3==1.22 15 | vulture==0.10 16 | whitenoise==3.3.1 17 | 18 | -------------------------------------------------------------------------------- /barcode/wsgi.py: -------------------------------------------------------------------------------- 1 | """ 2 | WSGI config for barcode project. 3 | 4 | It exposes the WSGI callable as a module-level variable named ``application``. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/2.0/howto/deployment/wsgi/ 8 | """ 9 | 10 | import os 11 | 12 | from django.core.wsgi import get_wsgi_application 13 | 14 | os.environ.setdefault("DJANGO_SETTINGS_MODULE", "barcode.settings") 15 | 16 | application = get_wsgi_application() 17 | -------------------------------------------------------------------------------- /manage.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python 2 | import os 3 | import sys 4 | 5 | if __name__ == "__main__": 6 | os.environ.setdefault("DJANGO_SETTINGS_MODULE", "barcode.settings") 7 | try: 8 | from django.core.management import execute_from_command_line 9 | except ImportError as exc: 10 | raise ImportError( 11 | "Couldn't import Django. Are you sure it's installed and " 12 | "available on your PYTHONPATH environment variable? Did you " 13 | "forget to activate a virtual environment?" 14 | ) from exc 15 | execute_from_command_line(sys.argv) 16 | -------------------------------------------------------------------------------- /bar/templates/includes/script.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /bar/templates/includes/header.html: -------------------------------------------------------------------------------- 1 | 2 | {% load staticfiles %} 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /bar/views.py: -------------------------------------------------------------------------------- 1 | 2 | from django.views.decorators.csrf import csrf_exempt 3 | from . import barCode 4 | from django.shortcuts import render 5 | from django.http import JsonResponse 6 | import json 7 | from django.core import serializers 8 | 9 | # Create your views here. 10 | 11 | 12 | @csrf_exempt 13 | def decodeAjax(request): 14 | 15 | if request.POST: 16 | decodedData = barCode.decode(request.POST['imgBase64']) 17 | if decodedData: 18 | 19 | json_data = json.dumps(decodedData) 20 | print(json_data) 21 | return JsonResponse(json_data,safe=False) 22 | 23 | return JsonResponse({"code" : 'NO BarCode Found'}) 24 | 25 | 26 | #@static_vars(i=0) 27 | def ScanBooks(request): 28 | return render(request, "ScanBook.html") 29 | 30 | -------------------------------------------------------------------------------- /barcode/urls.py: -------------------------------------------------------------------------------- 1 | """barcode URL Configuration 2 | 3 | The `urlpatterns` list routes URLs to views. For more information please see: 4 | https://docs.djangoproject.com/en/2.0/topics/http/urls/ 5 | Examples: 6 | Function views 7 | 1. Add an import: from my_app import views 8 | 2. Add a URL to urlpatterns: path('', views.home, name='home') 9 | Class-based views 10 | 1. Add an import: from other_app.views import Home 11 | 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') 12 | Including another URLconf 13 | 1. Import the include() function: from django.urls import include, path 14 | 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) 15 | """ 16 | 17 | from django.conf.urls import include,url 18 | from django.contrib import admin 19 | from django.urls import path 20 | from django.contrib.auth import views 21 | 22 | urlpatterns = [ 23 | path('admin/', admin.site.urls), 24 | path(r'',include('bar.urls')), 25 | ] 26 | -------------------------------------------------------------------------------- /bar/barCode.py: -------------------------------------------------------------------------------- 1 | from __future__ import print_function 2 | import pyzbar.pyzbar as pyzbar 3 | import numpy as np 4 | from PIL import Image 5 | import re 6 | import io 7 | import base64, json 8 | 9 | 10 | 11 | def decode(url): 12 | # Find barcodes and QR codes 13 | 14 | imgstr = re.search(r'base64,(.*)', url).group(1) 15 | image_bytes = io.BytesIO(base64.b64decode(imgstr)) 16 | im = Image.open(image_bytes) 17 | 18 | arr = np.array(im)[:, :, 0] 19 | decodedObjects = pyzbar.decode(arr) 20 | print(decodedObjects) 21 | 22 | 23 | # return decodedObjects.Decoded 24 | # Print results 25 | data = [] 26 | 27 | for obj in decodedObjects: 28 | print('Type : ', obj.type) 29 | print('Data : ', obj.data, '\n') 30 | data.append({ 31 | "code":obj.data.decode('utf-8') , 32 | "type": obj.type 33 | }) 34 | # return "Code: "+code.decode('utf-8') + "\nType: "+ types 35 | #data = serializers.serialize('json', data) 36 | print(data) 37 | return data 38 | -------------------------------------------------------------------------------- /bar/templates/includes/navbar.html: -------------------------------------------------------------------------------- 1 | 6 | 30 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Zbar-barcode-reader-python-javascript 2 | A bar code reader which detects and read barcode and Qr codes from the live streaming webcam, laptop cam and mobile phones (back and front both) camera. 3 | 4 | Features 5 | ------- 6 | 7 | - Reads and decodes any type of bar code and qr code from the live camera stream. 8 | - Compatible with all the modern devices. 9 | - Can be accessible from the mobile camera (back and front both) 10 | - Uses javascript `getUserMedia ` API call to get live camera feed. 11 | - Uses Python open source library (Zbar) Pyzbar for barcode decoding. 12 | - Runs on Django server. 13 | Note: Code can be use on different python frameworks. 14 | Important Files: `/bar/static/js/main.js` `/bar/views.py` `/bar/barcode.py` 15 | 16 | Usage 17 | ------- 18 | 19 | **To run locally:** 20 | 21 | First fork this repository and then follow these steps: 22 | ``` 23 | git clone https://github.com/your-name/Zbar-barcode-reader-python-javascript.git 24 | cd Zbar-barcode-reader-python-javascript 25 | pip install -r requirements.txt 26 | python manage.py runserver 27 | ``` 28 | Now open [127.0.0.1:8000](127.0.0.1:8000 "127.0.0.1:8000") locally on your browser. 29 | 30 | 31 | *Note: Starting with Chrome 47, `getUserMedia()` requests are only allowed from secure origins: HTTPS or localhost.* 32 | 33 | *Solution: For development use `django-sslserver` for testing on different mobile devices and IP other than localhosts. Find this out [here](https://github.com/teddziuba/django-sslserver "here")* 34 | **For best results use mobile back camera** 35 | 36 | 37 | Sequence Diagram 38 | ------------- 39 | 40 | ![Sequence](./brief.svg) 41 | 42 | 43 | 44 | End 45 | ---- 46 | *Feel free to add an issue if you are facing any problem related to this project.* 47 | -------------------------------------------------------------------------------- /bar/templates/ScanBook.html: -------------------------------------------------------------------------------- 1 | {% load staticfiles %} 2 | 3 | 4 | 5 | 6 | {% include 'includes/header.html' %} 7 | BarCode Reader 8 | 11 | 12 | 13 | {% include 'includes/navbar.html' %} 14 | 15 |
16 |
17 |
18 |
19 | 20 |
21 |

Multi Code Reader

22 |

A barcode reader which detects and read barcode and Qr codes from the live streaming webcam, laptop cam and mobile phones (back and front both) camera.

23 |

Just place any type of code in front of camera of mobile or laptop or tablet.

24 | 25 |
26 | 27 |
28 |
29 |
30 |
    31 |
    32 | {#
    #} 33 |
    34 | 35 |
    36 | 37 | 38 |

    Developed By : SAGAR BANSAL

    39 |
    40 | 41 | {#
    #} 42 | 43 | 44 |
    45 |

    *Requires Chrome 30 or later.

    46 | 47 | {# #} 48 | 49 |
    50 | {% include 'includes/script.html'%} 51 | 52 | -------------------------------------------------------------------------------- /barcode/settings.py: -------------------------------------------------------------------------------- 1 | """ 2 | Django settings for barcode project. 3 | 4 | Generated by 'django-admin startproject' using Django 2.0.3. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/2.0/topics/settings/ 8 | 9 | For the full list of settings and their values, see 10 | https://docs.djangoproject.com/en/2.0/ref/settings/ 11 | """ 12 | 13 | import os 14 | 15 | # Build paths inside the project like this: os.path.join(BASE_DIR, ...) 16 | BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 17 | 18 | 19 | # Quick-start development settings - unsuitable for production 20 | # See https://docs.djangoproject.com/en/2.0/howto/deployment/checklist/ 21 | 22 | # SECURITY WARNING: keep the secret key used in production secret! 23 | SECRET_KEY = '_g2lxob=*dv@jy)8+j&x8^=^=6!cx=%7sckfjd!&jzx!3h@tr_' 24 | 25 | # SECURITY WARNING: don't run with debug turned on in production! 26 | DEBUG = True 27 | 28 | ALLOWED_HOSTS = ['192.168.43.233','127.0.0.1','0.0.0.0'] 29 | 30 | 31 | # Application definition 32 | 33 | INSTALLED_APPS = [ 34 | 'bar.apps.BarConfig', 35 | 'django.contrib.admin', 36 | 'django.contrib.auth', 37 | 'django.contrib.contenttypes', 38 | 'django.contrib.sessions', 39 | 'django.contrib.messages', 40 | 'django.contrib.staticfiles', 41 | 'sslserver', 42 | ] 43 | 44 | MIDDLEWARE = [ 45 | 'django.middleware.security.SecurityMiddleware', 46 | 'django.contrib.sessions.middleware.SessionMiddleware', 47 | 'django.middleware.common.CommonMiddleware', 48 | 'django.middleware.csrf.CsrfViewMiddleware', 49 | 'django.contrib.auth.middleware.AuthenticationMiddleware', 50 | 'django.contrib.messages.middleware.MessageMiddleware', 51 | 'django.middleware.clickjacking.XFrameOptionsMiddleware', 52 | ] 53 | 54 | ROOT_URLCONF = 'barcode.urls' 55 | 56 | TEMPLATES = [ 57 | { 58 | 'BACKEND': 'django.template.backends.django.DjangoTemplates', 59 | 'DIRS': [], 60 | 'APP_DIRS': True, 61 | 'OPTIONS': { 62 | 'context_processors': [ 63 | 'django.template.context_processors.debug', 64 | 'django.template.context_processors.request', 65 | 'django.contrib.auth.context_processors.auth', 66 | 'django.contrib.messages.context_processors.messages', 67 | ], 68 | }, 69 | }, 70 | ] 71 | 72 | WSGI_APPLICATION = 'barcode.wsgi.application' 73 | 74 | 75 | # Database 76 | # https://docs.djangoproject.com/en/2.0/ref/settings/#databases 77 | 78 | DATABASES = { 79 | 'default': { 80 | 'ENGINE': 'django.db.backends.sqlite3', 81 | 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), 82 | } 83 | } 84 | 85 | 86 | # Password validation 87 | # https://docs.djangoproject.com/en/2.0/ref/settings/#auth-password-validators 88 | 89 | AUTH_PASSWORD_VALIDATORS = [ 90 | { 91 | 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', 92 | }, 93 | { 94 | 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', 95 | }, 96 | { 97 | 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', 98 | }, 99 | { 100 | 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', 101 | }, 102 | ] 103 | 104 | 105 | # Internationalization 106 | # https://docs.djangoproject.com/en/2.0/topics/i18n/ 107 | 108 | LANGUAGE_CODE = 'en-us' 109 | 110 | TIME_ZONE = 'UTC' 111 | 112 | USE_I18N = True 113 | 114 | USE_L10N = True 115 | 116 | USE_TZ = True 117 | 118 | 119 | # Static files (CSS, JavaScript, Images) 120 | # https://docs.djangoproject.com/en/2.0/howto/static-files/ 121 | 122 | STATIC_URL = '/static/' 123 | -------------------------------------------------------------------------------- /bar/static/css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding:0; 3 | margin:0; 4 | } 5 | body{ 6 | margin:0; 7 | padding:0; 8 | width:100%; 9 | font-family: 'Tajawal', sans-serif; 10 | } 11 | .container{ 12 | width:100% !important; 13 | max-width: 100%!important; 14 | } 15 | .mynavcolor{ 16 | background: rgba(0,0,0,0); 17 | position: absolute; 18 | width:100%; 19 | box-shadow: none !important; 20 | } 21 | #content-main{ 22 | width:100% !important; 23 | height: 100%; 24 | height: -webkit-fill-available; 25 | margin:0px; 26 | display:flex; 27 | top:0; 28 | max-width: 100%!important; 29 | 30 | } 31 | 32 | 33 | #nav-mobile li a { 34 | font-size: 30px; 35 | color: white; 36 | } 37 | #nav-desk li a{ 38 | font-size:22px; 39 | margin-left:10px; 40 | margin-top:5px; 41 | margin-bottom:5px; 42 | 43 | display:flex; 44 | } 45 | #nav-desk li:hover a{ 46 | text-decoration:underline white dashed; 47 | background:rgba(250, 235, 215, 0); 48 | } 49 | .side-nav{ 50 | text-align: center !important; 51 | padding-top:20%; 52 | background:#fc6767c4; 53 | } 54 | 55 | 56 | /*USER Page*/ 57 | 58 | .user-content{ 59 | height:60px; 60 | background: #ec008c; /* fallback for old browsers */ 61 | background: -webkit-linear-gradient(to left, #fc6767, #ec008c); /* Chrome 10-25, Safari 5.1-6 */ 62 | background: linear-gradient(to left, #fc6767, #ec008c); 63 | } 64 | .dropdown-content li a{ 65 | color:#fc6767 !important; 66 | } 67 | 68 | 69 | 70 | div.select{ 71 | width:180px; 72 | display:flex; 73 | color:#ec008c;border: 1px #ec008c dashed; 74 | text-align:center; 75 | border-radius:20px; 76 | position:absolute; 77 | z-index:10000; 78 | margin:20px; 79 | } 80 | #result_strip{ 81 | background:rgba(238, 238, 238,0); 82 | width:90%; 83 | height:auto; 84 | position:absolute; 85 | text-align: left !important; 86 | z-index:100; 87 | color:#ec008c; 88 | font-weight:500; 89 | margin-top:100px; 90 | margin-left:5%; 91 | } 92 | @media(min-width:600px){ 93 | div.select{ 94 | left:calc(50% - 250px); 95 | } 96 | #result_strip{ 97 | left:calc(50% - 250px); 98 | } 99 | } 100 | 101 | .select i{ 102 | color:#ec008c; 103 | } 104 | .select > label{ 105 | align-items:center; 106 | display:flex; 107 | margin-left:5px; 108 | } 109 | 110 | .select > #videoSource{ 111 | display:block; 112 | width:180px; 113 | padding-top:10px; 114 | font-size:12px; 115 | text-align:center; 116 | float:left; 117 | border:0px; 118 | margin-right:15px; 119 | background: transparent; 120 | 121 | } 122 | 123 | #container{ 124 | text-align:center; 125 | } 126 | #container h1{ 127 | font-size: 35px; 128 | margin: 20px 10px; 129 | } 130 | #container p{ 131 | font-size: 18px; 132 | 133 | } 134 | #startbutton{ 135 | position:absolute; 136 | background:#ec008c; 137 | display:block; 138 | width:50px; 139 | height:50px; 140 | text-align:center; 141 | border: 2px #ec008c solid; 142 | border-radius:50%;; 143 | float:right; 144 | margin-top:-80px; 145 | padding-top:5px; 146 | color:#f5f5f5; 147 | left:calc(50% - 20px); 148 | } 149 | 150 | .drawingBuffer{ 151 | display:none !important; 152 | 153 | } 154 | 155 | html, body{ 156 | 157 | overflow-x: -moz-hidde-unscrollable; 158 | overflow-x: -moz-scrollbars-horizontal !important; 159 | overflow-x: hidden; 160 | } 161 | #container h1{ 162 | color:#ec008c; 163 | text-decoration-line: underline; 164 | text-decoration-style: double; 165 | margin-top:30px; 166 | font-size:30px; 167 | text-transform:uppercase; 168 | } 169 | p{ 170 | margin:20px !important; 171 | font-size:16px !important; 172 | } 173 | .sub{ 174 | font-size: 12px; 175 | } 176 | .myname{ 177 | color:#ec008c; 178 | position:absolute; 179 | margin-top:-30px !important; 180 | font-size:10px !important; 181 | } -------------------------------------------------------------------------------- /brief.svg: -------------------------------------------------------------------------------- 1 | Javascript->Python(Django server): Make Ajax request 2 | Note right of Python(Django server):Decodes the image \nusing pyzbar 3 | Javascript-->Python(Django server): Send snapshot of the \nlive camera stream 4 | Python(Django server)->>Javascript: Returns decoded barcodeJavascriptJavascriptPython(Django server)Python(Django server)Make Ajax requestDecodes the imageusing pyzbarSend snapshot of thelive camera streamReturns decoded barcode -------------------------------------------------------------------------------- /bar/static/js/main.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 'use strict'; 4 | 5 | //initiate the time 6 | var date1 = new Date(); 7 | var videoElement = document.querySelector('video'); 8 | var audioSelect = document.querySelector('select#audioSource'); 9 | var videoSelect = document.querySelector('select#videoSource'); 10 | var canvas = document.querySelector('#canvas'); 11 | var video= document.querySelector('#video'); 12 | var Result = $("#result_strip"); 13 | 14 | 15 | navigator.mediaDevices.enumerateDevices() 16 | .then(gotDevices).then(getStream).catch(handleError); 17 | 18 | audioSelect.onchange = getStream; 19 | videoSelect.onchange = getStream; 20 | 21 | function gotDevices(deviceInfos) { 22 | for (var i = 0; i !== deviceInfos.length; ++i) { 23 | var deviceInfo = deviceInfos[i]; 24 | var option = document.createElement('option'); 25 | option.value = deviceInfo.deviceId; 26 | if (deviceInfo.kind === 'audioinput') { 27 | option.text = deviceInfo.label || 28 | 'microphone ' + (audioSelect.length + 1); 29 | audioSelect.appendChild(option); 30 | } else if (deviceInfo.kind === 'videoinput') { 31 | option.text = deviceInfo.label || 'camera ' + 32 | (videoSelect.length + 1); 33 | videoSelect.appendChild(option); 34 | } else { 35 | console.log('Found one other kind of source/device: ', deviceInfo); 36 | } 37 | } 38 | } 39 | 40 | function getStream() { 41 | if (window.stream) { 42 | window.stream.getTracks().forEach(function(track) { 43 | track.stop(); 44 | }); 45 | } 46 | var widthVideo = function(){ 47 | if (window.innerWidth < 600){ 48 | return window.innerWidth; 49 | } 50 | else{ 51 | return 500; 52 | } 53 | }; 54 | var heightVideo = function(){ 55 | if (window.innerHeight < 800 && window.innerWidth < 600){ 56 | return window.innerHeight; 57 | } 58 | else{ 59 | return 600; 60 | } 61 | }; 62 | var constraints = { 63 | audio: { 64 | deviceId: {exact: audioSelect.value} 65 | }, 66 | video: { 67 | deviceId: {exact: videoSelect.value}, 68 | width:widthVideo(), 69 | height:heightVideo() 70 | } 71 | }; 72 | 73 | navigator.mediaDevices.getUserMedia(constraints). 74 | then(gotStream).catch(handleError); 75 | } 76 | 77 | function gotStream(stream) { 78 | window.stream = stream; // make stream available to console 79 | videoElement.srcObject = stream; 80 | } 81 | 82 | function handleError(error) { 83 | console.log('Error: ', error); 84 | } 85 | 86 | 87 | 88 | function takepicture() { 89 | 90 | var widthVideo = function(){ 91 | if (window.innerWidth < 600){ 92 | return window.innerWidth; 93 | } 94 | else{ 95 | return 500; 96 | } 97 | }; 98 | var heightVideo = function(){ 99 | if (window.innerHeight < 800 && window.innerWidth < 600){ 100 | return window.innerHeight; 101 | } 102 | else{ 103 | return 600; 104 | } 105 | }; 106 | var width = widthVideo(); 107 | var height = heightVideo(); 108 | canvas.width = width; 109 | canvas.height = height; 110 | canvas.getContext('2d').drawImage(video, 0, 0, width, height); 111 | var dataUrl = canvas.toDataURL('image/jpg'); 112 | // console.log(dataUrl); 113 | $.ajax({ 114 | type: "POST", 115 | url: "/decode/", 116 | data: { 117 | imgBase64: dataUrl 118 | } 119 | }).done(function(data) { 120 | 121 | if(data.code =='NO BarCode Found'){ 122 | 123 | 124 | console.log("Trying..") 125 | var interval = setTimeout(function(){ 126 | 127 | var date2 = new Date(); 128 | var diff = date2 - date1; 129 | if(diff > 100000){ 130 | 131 | Result.html('Try Again : Time Out'); 132 | clearTimeout(interval); 133 | 134 | } 135 | 136 | $('#startbutton').click(); 137 | 138 | 139 | },2000); 140 | 141 | 142 | } 143 | else{ 144 | // console.log(data.code); 145 | var obj = JSON.parse(data); 146 | var i; 147 | Result.html('Detected :)
      '); 148 | for(i=0; i"); 150 | } 151 | Result.append("
    ") 152 | window.navigator.vibrate(200); 153 | clearTimeout(interval); 154 | } 155 | 156 | // Do Any thing you want 157 | }) 158 | .fail(function(){ 159 | console.log('Failed') 160 | }); 161 | 162 | } 163 | startbutton.addEventListener('click', function(ev){ 164 | takepicture(); 165 | Result.html("Searching.."); 166 | ev.preventDefault(); 167 | }, false); 168 | 169 | -------------------------------------------------------------------------------- /.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 48 | 49 | 50 | 51 | true 52 | DEFINITION_ORDER 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 |