How do I make Open CV work on deployed web app

Question

I have an application that I can run locally and have it open my web camera then detect a qr code. It works well when I run the app locally but then I used the app on my web server and it gets a Server Error (500).

The app was made on Django, then for deployment I used digital ocean(ubuntu) and I also use nginx and gunicorn.

html

<li style= "margin: auto; width:auto"><a style="color:white" href="{% url 'attendees:qrscanner' %}" target="_blank"><button style="margin:15px; width:200px" class="btn btn-outline-primary">Check QR Scanner</button></a></li>

views.py

from django.shortcuts import get_object_or_404, render, redirect
from django.utils import timezone
from django.db.models import Sum
from .models import Attendee, ActivityLog

import re, qrcode, cv2, csv, io, os
import numpy as np
import pyzbar.pyzbar as pyzbar

def qrscanner(request):
    cap = cv2.VideoCapture(0)
    font = cv2.FONT_HERSHEY_PLAIN

    frame_width = int(cap.get(3))
    frame_height = int(cap.get(4))

    aid = None

    while aid is None:
        _, frame = cap.read()

        decodedObjects = pyzbar.decode(frame)

        for obj in decodedObjects:
            aid = re.findall('/attendees/confirmation/([0-9]+)', str(obj.data))
            try:
                attendee = Attendee.objects.get(pk=str(aid[0]))
                attendee.present = True
                attendee.timestamp = timezone.now()
                attendee.activity.update_or_create(time_log=attendee.timestamp)
                attendee.save()
                context = {
                    'scan': 'QR Successfully Scanned',
                    'attendee': attendee,
                }
            except:
                context = {
                    'noscan': 'QR Scan Unsuccessful'
                }


        cv2.imshow("QR Reader", frame)

        if aid is not None:
            cv2.destroyAllWindows()
            break

        key = cv2.waitKey(1) & 0xFF
        if key == 27:
            context = {
                'noscan': 'No QR Scanned',
            }
            cv2.destroyAllWindows()
            break

    return render(request, 'attendees/qrscanner.html', context)

Expected results: -Like when my app runs locally, I go to my site where I included the app, I click the qr scanner button and "cap = cv2.VideoCapture(0)" opens up a frame using my computers camera to detect a qr.

Actual results: -locally everything is fine, I click the qr scanner button and "cap = cv2.VideoCapture(0)" opens up a frame using my computers camera to detect a qr. BUT on my website, once I access that part of the application, I get Server Error (500).

Note: -I had to install via pip some additional files for the online app to even get the app to show some html and I have other apps in the site. LIBRARIES INSTALLED LOCALLY (pip freeze):

colorama==0.4.1
dj-database-url==0.5.0
Django==2.2.3
django-qr-code==1.0.0
django-widget-tweaks==1.4.5
docutils==0.15.2
mysqlclient==1.4.2
numpy==1.17.0
opencv-python==4.1.0.25
pathlib==1.0.1
Pillow==6.0.0
python-decouple==3.1
pytz==2019.1
pyzbar==0.1.8
qrcode==6.1
six==1.12.0
sqlparse==0.3.0

LIBRARIES INSTALLED in website (pip freeze):

beautifulsoup4==4.8.0
certifi==2019.9.11
chardet==3.0.4
cycler==0.10.0
demjson==2.2.4
Django==2.2.6
django-authentication==3.2
django-qr==2.0
django-realestate==4.0
django-widget-tweaks==1.4.5
gunicorn==19.9.0
idna==2.8
jtutils==0.0.6
kiwisolver==1.1.0
leven==1.0.4
matplotlib==3.1.1
nose==1.3.7
numpy==1.17.2
opencv-python==4.1.1.26
opencv-python-headless==4.1.1.26
pandas==0.25.1
Pillow==6.2.0
pkg-resources==0.0.0
psycopg2==2.8.3
psycopg2-binary==2.8.3
pyparsing==2.4.2
python-csv==0.0.11
python-dateutil==2.8.0
pytz==2019.2
pyzbar==0.1.8
qrcode==6.1
requests==2.22.0
six==1.12.0
soupsieve==1.9.4
sqlparse==0.3.0
urllib3==1.25.6
xlrd==1.2.0
xmltodict==0.12.0

Answer 1

Problem is that cap = cv2.VideoCapture(0) is actually trying to open web cam on the server that you deployed the app to and not the web cam on your computer.

Answer 2

Here is the actual javascript guide for this

Git Source