# Opencv on browser

**URL:** <https://forum.opencv.org/t/opencv-on-browser/18535>\
**Category:** Uncategorized\
**Created:** [August 19, 2024, 2:28pm UTC](https://forum.opencv.org/t/opencv-on-browser/18535 "2024-08-19T14:28:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![abd-ashraf](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.opencv.org/abd-ashraf/32/8105_2.png) [@abd-ashraf](https://forum.opencv.org/u/abd-ashraf)\
**Post date:** [August 19, 2024, 2:28pm UTC](https://forum.opencv.org/t/opencv-on-browser/18535/1 "2024-08-19T14:28:45Z")

</div>

Hi everyone,

I’m working on converting a Python Tkinter GUI application into a web app, with Flask as the backend and React for the frontend. For real-time communication, I’m using [Socket.IO](http://Socket.IO).

To give some context, the application is a digital microscope that captures images using OpenCV by setting the appropriate camera properties. These images are then processed using PyTorch and other libraries.

As I transition to a web app, I’m facing a challenge: the camera will be on the client side, and `opencv.VideoCapture()` won’t be able to access the client’s hardware directly.

Does anyone have suggestions on how to overcome this technical issue? I’m really stuck and would appreciate any advice.

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![crackwitz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.opencv.org/crackwitz/32/14_2.png) [@crackwitz](https://forum.opencv.org/u/crackwitz)\
**Post date:** [August 19, 2024, 2:37pm UTC](https://forum.opencv.org/t/opencv-on-browser/18535/2 "2024-08-19T14:37:13Z")

</div>

[crosspost](https://meta.stackoverflow.com/a/266159):

> <https://stackoverflow.com/questions/78888417/opencv-in-browser-for-my-ai-app-need-solutions>

---

<div class="post-metadata">

**Author:** ![berak](https://avatars.discourse-cdn.com/v4/letter/b/85f322/32.png) [@berak](https://forum.opencv.org/u/berak)\
**Post date:** [August 19, 2024, 2:38pm UTC](https://forum.opencv.org/t/opencv-on-browser/18535/3 "2024-08-19T14:38:41Z")

</div>

hmm, at least you see the elephant in the room …

> [@abd-ashraf](#):
>
> the application is a digital microscope that captures images using OpenCV by setting the appropriate camera properties

as you found out, that won’t work anymore, you’ll have to do with html5&js. would the microscope still work then ?

tell us more about this cam, please !  
do you get [opencv.js](https://docs.opencv.org/4.x/d5/d10/tutorial_js_root.html) to run with it, locally ?

---

<div class="post-metadata">

**Author:** ![abd-ashraf](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.opencv.org/abd-ashraf/32/8105_2.png) [@abd-ashraf](https://forum.opencv.org/u/abd-ashraf)\
**Post date:** [August 19, 2024, 3:19pm UTC](https://forum.opencv.org/t/opencv-on-browser/18535/4 "2024-08-19T15:19:55Z")

</div>

this is the code that’s being done in the python gui application, i want to replicate it in the web app.

```auto
cam = cv2.VideoCapture(camera_port, cv2.CAP_DSHOW)

    cam.set(cv2.CAP_PROP_FRAME_WIDTH, x_res_.value)
    cam.set(cv2.CAP_PROP_FRAME_HEIGHT, y_res_.value)

    # Set camera properties
    cam.set(cv2.CAP_PROP_FOURCC, cv2.VideoWriter_fourcc(*"MJPG"))
    cam.set(cv2.CAP_PROP_EXPOSURE, exposure.value) # -8
    cam.set(cv2.CAP_PROP_GAIN, gain.value) # 1.0

```

---

<div class="post-metadata">

**Author:** ![crackwitz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.opencv.org/crackwitz/32/14_2.png) [@crackwitz](https://forum.opencv.org/u/crackwitz)\
**Post date:** [August 19, 2024, 4:09pm UTC](https://forum.opencv.org/t/opencv-on-browser/18535/5 "2024-08-19T16:09:24Z")

</div>

[related](https://meta.stackoverflow.com/a/266159):

> <https://stackoverflow.com/questions/78888763/replicate-opencv-cam-properties-to-capture-images-on-web-frontend>