How to use streamlit_webrtc with widgets? #620

shinjikato2012 · 2022-01-19T10:51:08Z

shinjikato2012
Jan 19, 2022

I'd like to do as follows.

Push START button (streamlit_webrtc)
Scan QR code (employee ID)
Select work area
Select activity
Push submit button
Print result (2sec)
Delete widgets (Selectbox, button, success message)
Goto "No.1" (infinite loop)

Discussion points as follows.

Discuss-1
How to use streamlit_webrtc with widgets?
Cannot be rescanned...

Discuss-2
I want to check the reason why TypeError occurs

            while True:
                #sleep(1.0)  # due to TypeError: cannot unpack non-iterable NoneType object
                with ctx.video_transformer.frame_lock:
                    out_image = ctx.video_transformer.out_image

拙い英語で申し訳御座いませんがstreamlit_webrtcの使用方法について相談させて下さい。
・QRコードスキャン後のウィジェット選択時の更新処理により、QRコードの再スキャンが出来なくなる
・sleepを一定以上入れないとTypeErrorが発生する

---Code

import threading
from typing import Union

from time import sleep
import streamlit as st
from streamlit_webrtc import VideoTransformerBase, webrtc_streamer

import av
import numpy as np
from pyzbar.pyzbar import decode, ZBarSymbol

st.title("QRCD scan")

def main():

    class VideoTransformer(VideoTransformerBase):
        frame_lock: threading.Lock
        in_image: Union[np.ndarray, None]
        out_image: Union[np.ndarray, None]

        def __init__(self) -> None:
            self.frame_lock = threading.Lock()
            self.in_image = None
            self.out_image = None

        def transform(self, frame: av.VideoFrame) -> np.ndarray:
            in_image = frame.to_ndarray(format="bgr24")

            out_image = in_image[:, ::-1, :] 

            with self.frame_lock:
                self.in_image = in_image
                self.out_image = out_image

            return out_image

    ctx = webrtc_streamer(key="example",sendback_audio=False,video_processor_factory =VideoTransformer)

    if "qrcd_str" not in st.session_state:
        st.session_state["qrcd_str"] = ""
    if "item1" not in st.session_state:
        st.session_state["item1"] = ""
    if "item2" not in st.session_state:
        st.session_state["item2"] = ""

    selected_items1 = ["Area-A","Area-B"]
    selected_items2 = ["Work-1","Work-2"]
    selected_items3 = ["Work-3","Work-4","Work-5"]

    if ctx.video_transformer:
        if st.session_state["qrcd_str"] == "":
            while True:
                #sleep(1.0)  # due to TypeError: cannot unpack non-iterable NoneType object
                with ctx.video_transformer.frame_lock:
                    out_image = ctx.video_transformer.out_image

                    value = decode(out_image, symbols=[ZBarSymbol.QRCODE])
                    if value:
                        qrcd = value[0][0]
                        st.session_state["qrcd_str"] = qrcd.decode('utf-8') #from byte to str
                        break

        if st.session_state["qrcd_str"] != "":
            PlaceHolder1 = st.empty()
            l_col, r_col = PlaceHolder1.columns(2)

            st.session_state["item1"] = l_col.selectbox("Work area", list(selected_items1))
            if st.session_state["item1"] == "Area-A":
                st.session_state["item2"] = r_col.selectbox("activity", list(selected_items2))
            elif st.session_state["item1"] == "Area-B":
                st.session_state["item2"] = r_col.selectbox("activity", list(selected_items3))
            else:
                st.write = "Error"

            if r_col.button("Submit"):
                st.success("employee ID : " + st.session_state["qrcd_str"] + "-" + st.session_state["item1"] + "-" + st.session_state["item2"])
                sleep(2.0)
                st.session_state["qrcd_str"] = ""
                st.session_state["item1"] = ""
                st.session_state["item2"] = ""

if __name__ == "__main__":
    main()

Answered by whitphx

Jan 21, 2022

なるほど、

・但し、TypeErrorが引き続き発生します。
　sleepを1秒程度入れるとエラーが発生せず、sleepを入れないと確実に下記が発生します。

こちらは再生開始直後に ctx.video_transformer.out_image が None だからです。
以下の２つのタイミング

映像送信の接続が確立して ctx.video_transformer がセットされる
最初の映像フレームが到達し、transform()が呼ばれ、out_imageがセットされる

の間にラグがあるためです。

ctx.video_transformer.out_imageがNoneかどうかチェックするようにするのが素直な解決かと思います。

カメラ映像の表示サイズを小さくしたい。

プレビュー映像の表示サイズの幅を50%にするサンプルがこちらです。
こんな感じでプレビュー表示に使っているHTMLの <video> タグのスタイルをいじれるので、適宜指定してください。

streamlit-webrtc/app.py

Line 686 in 48045bf

"style": {"width": "50%", "margin": "0 auto", "border": "5px yellow solid"},

カメラ映像を一時的に非表示にしたい。

↑の幅を変えるサンプルをベースに↓とか指定するとどうでしょう。

        video_html_attrs={
            "style": {"display": "none"…

View full answer

whitphx · 2022-01-19T16:40:19Z

whitphx
Jan 19, 2022
Maintainer

Disclaimer:
First, please note that I cannot run zbar in my local env (M1 mac), so I tested the code with a mocked decode() like below:

cnt = 0
def decode(img):
    global cnt
    cnt += 1
    if cnt % 20 == 19:
        return [
            [b"foo"]
        ]
    else:
        return []

I could not see the real behavior of the zbar program.

I could not found any problems.
Please let me know the following things:

What does it means that the QR code cannot be scanned?
- Doesn't decode() return valid results?
- Does the video stream stop?
It seems that the image passed to the decode() is flipped (out_image = in_image[:, ::-1, :]). Is it OK? I think the flipped QR code is invalid.
Which line does the TypeError occurred? Please paste the error log so that I can investigate it.

日本語でも大丈夫です。後から見る人のために英語の方が好ましい、くらいですので

1 reply

shinjikato2012 Jan 21, 2022
Author

一先ず実現したかったことは自己解決出来ました。
結論としては私のミスで、streamlit_webrtcの問題ではありませんでした。

・但し、TypeErrorが引き続き発生します。
　sleepを1秒程度入れるとエラーが発生せず、sleepを入れないと確実に下記が発生します。

TypeError: cannot unpack non-iterable NoneType object
Traceback:
File "C:\Users\shinj\anaconda3\lib\site-packages\streamlit\script_runner.py", line 354, in _run_script
exec(code, module.dict)
File "C:\Users\shinj\Python_VSCode\GitHUB_QRCD_v1.py", line 83, in
main()
File "C:\Users\shinj\Python_VSCode\GitHUB_QRCD_v1.py", line 57, in main
value = decode(out_image, symbols=[ZBarSymbol.QRCODE])
File "C:\Users\shinj\anaconda3\lib\site-packages\pyzbar\pyzbar.py", line 181, in decode
pixels, width, height = _pixel_data(image)
File "C:\Users\shinj\anaconda3\lib\site-packages\pyzbar\pyzbar.py", line 147, in _pixel_data
pixels, width, height = image

・decode部の反転処理は特にエラーが発生しませんでした。
　仰る通り不要な処理なので削除しました。

・追加での質問なのですが、以下の様なことは可能でしょうか？
　カメラ映像の表示サイズを小さくしたい。
　カメラ映像を一時的に非表示にしたい。非表示後、ウィジェットの操作などを行った後に再表示したい。
　STARTやSTOPの釦をユーザーに押下させず、コードの中で押下したい。
　（例えば起動時に自動的にSTART、或いは30秒スキャンされなかったら停止させる、などを実現したい）

参考まで、現在のソースを記載します。

from logging import PlaceHolder
import threading
from typing import Union

from time import sleep
import streamlit as st
from streamlit_webrtc import VideoTransformerBase, webrtc_streamer

import av
import numpy as np
from pyzbar.pyzbar import decode, ZBarSymbol

st.title("QRCD scan")

def main():

    class VideoTransformer(VideoTransformerBase):
        frame_lock: threading.Lock
        in_image: Union[np.ndarray, None]
        out_image: Union[np.ndarray, None]

        def __init__(self) -> None:
            self.frame_lock = threading.Lock()
            self.in_image = None
            self.out_image = None

        def transform(self, frame: av.VideoFrame) -> np.ndarray:
            in_image = frame.to_ndarray(format="bgr24")

            out_image = in_image[:, ::-1, :] 

            with self.frame_lock:
                self.in_image = in_image
                self.out_image = out_image

            # return out_image
            return in_image

    ctx = webrtc_streamer(key="example",sendback_audio=False,video_processor_factory =VideoTransformer)

    if "qrcd_str" not in st.session_state:
        st.session_state["qrcd_str"] = ""
    if "item1" not in st.session_state:
        st.session_state["item1"] = ""
    if "item2" not in st.session_state:
        st.session_state["item2"] = ""

    selected_items1 = ["Area-A","Area-B"]
    selected_items2 = ["Work-1","Work-2"]
    selected_items3 = ["Work-3","Work-4","Work-5"]

    if ctx.video_transformer:
        if st.session_state["qrcd_str"] == "":
            while True:
                sleep(1.0)  # due to TypeError: cannot unpack non-iterable NoneType object
                with ctx.video_transformer.frame_lock:
                    out_image = ctx.video_transformer.out_image

                    value = decode(out_image, symbols=[ZBarSymbol.QRCODE])
                    if value:
                        qrcd = value[0][0]
                        st.session_state["qrcd_str"] = qrcd.decode('utf-8') #from byte to str
                        break

        if st.session_state["qrcd_str"] != "":
            # sleep(1)
            # st.success(st.session_state["qrcd_str"])
            # sleep(1)

            PlaceHolder1 = st.empty()
            l_col, r_col = PlaceHolder1.columns(2)

            st.session_state["item1"] = l_col.selectbox("Work area", list(selected_items1))
            if st.session_state["item1"] == "Area-A":
                st.session_state["item2"] = r_col.selectbox("activity", list(selected_items2))
            elif st.session_state["item1"] == "Area-B":
                st.session_state["item2"] = r_col.selectbox("activity", list(selected_items3))
            else:
                st.write = "Error"

            placeholder2 = st.empty()

            isclick1 = placeholder2.button("Submit")
            if isclick1:
                placeholder2.empty()
                placeholder3 = st.empty()
                placeholder3.success("employee ID : " + st.session_state["qrcd_str"] + "-" + st.session_state["item1"] + "-" + st.session_state["item2"])
                sleep(3.0)
                placeholder3.empty()
                PlaceHolder1.empty()

                st.session_state["qrcd_str"] = ""
                st.session_state["item1"] = ""
                st.session_state["item2"] = ""

                placeholder4 = st.empty()
                if placeholder4.button("Reload"):
                    placeholder4.empty()

if __name__ == "__main__":
    main()

whitphx · 2022-01-21T16:59:14Z

whitphx
Jan 21, 2022
Maintainer

なるほど、

・但し、TypeErrorが引き続き発生します。
　sleepを1秒程度入れるとエラーが発生せず、sleepを入れないと確実に下記が発生します。

こちらは再生開始直後に ctx.video_transformer.out_image が None だからです。
以下の２つのタイミング

映像送信の接続が確立して ctx.video_transformer がセットされる
最初の映像フレームが到達し、transform()が呼ばれ、out_imageがセットされる

の間にラグがあるためです。

ctx.video_transformer.out_imageがNoneかどうかチェックするようにするのが素直な解決かと思います。

カメラ映像の表示サイズを小さくしたい。

プレビュー映像の表示サイズの幅を50%にするサンプルがこちらです。
こんな感じでプレビュー表示に使っているHTMLの <video> タグのスタイルをいじれるので、適宜指定してください。

streamlit-webrtc/app.py

Line 686 in 48045bf

"style": {"width": "50%", "margin": "0 auto", "border": "5px yellow solid"},

カメラ映像を一時的に非表示にしたい。

↑の幅を変えるサンプルをベースに↓とか指定するとどうでしょう。

        video_html_attrs={
            "style": {"display": "none"},
        },

もしくは、webrtc_streamerの呼び出し自体をif文で一時的に無くしてしまっても期待通りに動くかもしれません（未検証）

STARTやSTOPの釦をユーザーに押下させず、コードの中で押下したい。

Pythonプログラム側からStart/Stopを制御するサンプルが↓です。

streamlit-webrtc/app.py

Lines 694 to 703 in 48045bf

    
           def app_programatically_play(): 
        
               """A sample of controlling the playing state from Python.""" 
        
               playing = st.checkbox("Playing", value=True) 
        
               webrtc_streamer( 
        
                   key="media-constraints", 
        
                   desired_playing_state=playing, 
        
                   mode=WebRtcMode.SENDRECV, 
        
                   rtc_configuration=RTC_CONFIGURATION, 
        
               )

0 replies

shinjikato2012 · 2022-01-23T23:45:23Z

shinjikato2012
Jan 23, 2022
Author

色々とご教示頂きまして有難う御座いました！
これでテスト運用が出来そうです。

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to use streamlit_webrtc with widgets? #620

{{title}}

Replies: 3 comments 1 reply

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

How to use streamlit_webrtc with widgets? #620

shinjikato2012 Jan 19, 2022

Replies: 3 comments · 1 reply

whitphx Jan 19, 2022 Maintainer

shinjikato2012 Jan 21, 2022 Author

whitphx Jan 21, 2022 Maintainer

shinjikato2012 Jan 23, 2022 Author

shinjikato2012
Jan 19, 2022

Replies: 3 comments 1 reply

whitphx
Jan 19, 2022
Maintainer

shinjikato2012 Jan 21, 2022
Author

whitphx
Jan 21, 2022
Maintainer

shinjikato2012
Jan 23, 2022
Author