Streamlit Cloud + QR code

🧩 Streamlit Components
1

Hello Streamlit friends!

I played around with Streamlit the last couple of weeks and I can’t deny that I’m extremely enthusiastic about it. This is all I could wish for!

And I want to use this tool to help automating stuff for the company that I work for now. So I was wondering if the following is possible:

  • I want to create an app that’s hosted with Streamlit
  • I would like to use the camera of a smartphone within that app to scan QR codes

Could anyone show me an example of someone who made something like this? I can see examples of camera’s that are being used but not with scanning QR-codes. Even though that would be a great use case if you ask me.

Any advice is very welcome!

Hope to hear from you!

Greetings,

Kris

From Amsterdam

1 Like
2

Hi @Data_Dam, welcome to the forum!

Here’s a simple example app that does the trick using open-cv

import cv2
import numpy as np
import streamlit as st

image = st.camera_input("Show QR code")

if image is not None:
    bytes_data = image.getvalue()
    cv2_img = cv2.imdecode(np.frombuffer(bytes_data, np.uint8), cv2.IMREAD_COLOR)

    detector = cv2.QRCodeDetector()

    data, bbox, straight_qrcode = detector.detectAndDecode(cv2_img)

    st.write("Here!")
    st.write(data)
1 Like
3

Hi Blackary!

Thanks for your quick response. Love it.

When I test this code, I see that I first need to take a picture before I can encode the QR-code. It is possible to let Streamlit check every frame of the incoming camera footage to check for a QR-code right? Hope so!

Greetings,

Kris

4

Hi @Data_Dam,

I wasn’t aware of a simple way to do that, but it seems like a useful thing to have in the streamlit ecosystem, so I created a new component: New Component: Streamlit camera live input

You can see the example app at https://camera.streamlitapp.com and the source code here.

1 Like
5

Hello. Is there a way to store the QR code image in MongoDb, once read, as an image for later reuse/scan?
And if so, how to do that?
I was successful in doing all the above, wuth the exception of storing it in Mongo. It stores it as Null.
Thoughts?

6

Hello,

New component base htm5qrcode

Example:

import streamlit as st
from streamlit_qrcode_scanner import qrcode_scanner

qr_code = qrcode_scanner(key='qrcode_scanner')

if qr_code:
    st.write(qr_code)

Demo: https://phamxtien-streamlit-qrcode-scanner---init---ibk12k.streamlit.app/