Package: webopencv
webopencv ·demo·1-click setupStream webcam from a webpage to a server-side OpenCV Python script. Thisgives you the ability to work with a webcam in Python, without installing anything on your computer.🎥 Live demo:webopencv.glitch.me👉 1-click WebOpenCV Setup:Fork on Glitch💻 View demo source:on Glitchoron Githubcreated byAlvin Wan, for an online computer vision tutorialWhy Use WebOpenCV?WebOpenCV makes it easy for anyone to start working with their own webcam, in Python. Before WebOpenCV, you would need to (1) install packages, their package managers, and miscellaneous toolson your own computer, then (2) pray that webcam access worked. Now, you simply click once to launch a free, remote server that comes pre-setup. No installation on your own computer necessary.Getting StartedFor the 1-click WebOpenCV setup,fork on Glitch.Alternatively, to setup locally on your machine instead, install the Python package.pipinstallwebopencvCreate a new fileapp.py.importwebopencvaswcvapp=wcv.WebApplication()@app.transform('Hello')defhelloworld(img,frame):returnimgif__name__=='__main__':app.run()Then, run the file.pythonapp.pyThis launches a web server by default athttps://localhost:8080. Navigate to that URL, and hit "Start" to see the demo in action. Note: When developing locally, navigating tohttps://0.0.0.0:8080won't work. Make sure to uselocalhost.TransformsCreatetransforms, or hooks that process images in a real-time video feed. Each transform takes in animg: numpy array imageframe:VideoFrameobject that additionally contains metadata, like timeLike with Flask routes, you can register transforms using a decorator. Add whatever processing you would like to the transform, and return the image at the end. For example, the below adds a "cinematic" crop to the live feed, by adding black bars.@app.transform('Cinematic')defcinematic(img,frame):h,w,_=img.shapeimg[-w//4:]=0img[:w//4]=0Default Transform: Usedefault=Truein thetransformdecorator to set a transform as the default on page load. Note that only 1 transform can be set as default. If no transform hasdefault=Trueset, the default is no transform on page load.Customize HomepageTo build a custom homepage:Initialize the appwithoutthe default homepage. You can use either theaiohttporFlaskbackends.Add your own homepage with:WebOpenCV's client-side Javascript:<script src="/client.js"></script>avideotag withid="video", for the webcam feed:<video id="video" autoplay="true" playsinline="true"></video>abuttontag withid="action", for "Start" and "Stop":<button id="action"></button>aiohttp: The default backend usesaiohttp, so you can treatappas you would any otherweb.Applicationobject.fromaiohttpimportwebimportwebopencvaswcvapp=wcv.WebApplication(use_default_homepage=False)html="""<html>Custom webpage<button id="action"></button><video id="video" autoplay="true" playsinline="true"></video><script src="/client.js"></script></html>"""defindex(app):returnweb.Response(text=html,content_type="text/html")if__name__=='__main__':app.router.add_get_url('/',index)app.run()Flask: You can alternatively use the Flask backend, treating theappas you would any otherFlaskobject.Note that the Flask implementation drops the ICE connection. Needs debugging.importwebopencvaswcvapp=wcv.Flask(use_default_homepage=False)@app.route("/")defindex():return"""<html>Custom webpage<button id="action"></button><video id="video" autoplay="true" playsinline="true"></video><script src="/client.js"></script></html>"""if__name__=='__main__':app.run()Acknowledgments: This library was built off of theaiortcofficial server example.