webopencv · demo · 1-click setup
Stream webcam from a webpage to a server-side OpenCV Python script. This gives 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 Glitch or on Github
created by Alvin Wan, for an online computer vision tutorial
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 tools on 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.
For the 1-click WebOpenCV setup, fork on Glitch.
Alternatively, to setup locally on your machine instead, install the Python package.
pip install webopencvCreate a new file app.py.
import webopencv as wcv
app = wcv.WebApplication()
@app.transform('Hello')
def helloworld(img, frame):
return img
if __name__ == '__main__':
app.run()Then, run the file.
python app.pyThis launches a web server by default at https://localhost:8080. Navigate to that URL, and hit "Start" to see the demo in action. Note: When developing locally, navigating to https://0.0.0.0:8080 won't work. Make sure to use localhost.
Create transforms, or hooks that process images in a real-time video feed. Each transform takes in an
img: numpy array imageframe:VideoFrameobject that additionally contains metadata, like time
Like 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')
def cinematic(img, frame):
h, w, _ = img.shape
img[-w//4:] = 0
img[:w//4] = 0Default Transform: Use default=True in the transform decorator to set a transform as the default on page load. Note that only 1 transform can be set as default. If no transform has default=True set, the default is no transform on page load.
To build a custom homepage:
- Initialize the app without the default homepage. You can use either the
aiohttporFlaskbackends. - Add your own homepage with:
- WebOpenCV's client-side Javascript:
<script src="/client.js"></script> - a
videotag withid="video", for the webcam feed:<video id="video" autoplay="true" playsinline="true"></video> - a
buttontag withid="action", for "Start" and "Stop":<button id="action"></button>
- WebOpenCV's client-side Javascript:
aiohttp: The default backend uses aiohttp, so you can treat app as you would any other web.Application object.
from aiohttp import web
import webopencv as wcv
app = 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>
"""
def index(app):
return web.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 the app as you would any other Flask object. Note that the Flask implementation drops the ICE connection. Needs debugging.
import webopencv as wcv
app = wcv.Flask(use_default_homepage=False)
@app.route("/")
def index():
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 the aiortc official server example.