diff --git a/pkg/webui/components/qr/input/video/index.js b/pkg/webui/components/qr/input/video/index.js
index aae505400f6..d08e614ce7e 100644
--- a/pkg/webui/components/qr/input/video/index.js
+++ b/pkg/webui/components/qr/input/video/index.js
@@ -120,38 +120,38 @@ const Stream = props => {
   const { deviceId, getDevices, setDeviceIdFromStream, onRead, setCapture, setError } = props
   const [stream, setStream] = useState(undefined)
 
-  const getStream = useCallback(async () => {
-    // Initially request the stream with the default camera for facing mode environment
-    // if device id is set then create stream with that device id and display video
-    try {
-      if (!deviceId) {
-        const userStream = await navigator.mediaDevices.getUserMedia({
-          video: { facingMode: 'environment' },
-        })
-        // After requesting the stream, get the devices again as we now have permission to see all devices
-        getDevices()
-        // On initial request set the device id from the stream, this should rerender this component
-        setDeviceIdFromStream(userStream)
-      } else {
-        const userStream = await navigator.mediaDevices.getUserMedia({
-          video: { deviceId },
-        })
-        // Only set the stream if the device id is set
-        setStream(userStream)
-      }
-    } catch (error) {
-      if (error instanceof DOMException && error.name === 'NotAllowedError') {
-        setCapture(false)
-        setError(true)
-      } else {
-        throw error
+  useEffect(() => {
+    const getStream = async () => {
+      // Initially request the stream with the default camera for facing mode environment
+      // if device id is set then create stream with that device id and display video
+      try {
+        if (!deviceId) {
+          const userStream = await navigator.mediaDevices.getUserMedia({
+            video: { facingMode: 'environment' },
+          })
+          // After requesting the stream, get the devices again as we now have permission to see all devices
+          getDevices()
+          // On initial request set the device id from the stream, this should rerender this component
+          setDeviceIdFromStream(userStream)
+        } else {
+          const userStream = await navigator.mediaDevices.getUserMedia({
+            video: { deviceId },
+          })
+          // Only set the stream if the device id is set
+          setStream(userStream)
+        }
+      } catch (error) {
+        if (error instanceof DOMException && error.name === 'NotAllowedError') {
+          setCapture(false)
+          setError(true)
+        } else {
+          throw error
+        }
       }
     }
-  }, [deviceId, getDevices, setCapture, setDeviceIdFromStream, setError])
 
-  useEffect(() => {
     getStream()
-  }, [getStream])
+  }, [deviceId, getDevices, setCapture, setDeviceIdFromStream, setError])
 
   return <Video stream={stream} onRead={onRead} />
 }