https://github.com/gonzalo123/opencv2ws
Live stream over WebSocket with Python and OpenCV
https://github.com/gonzalo123/opencv2ws
flask opencv python
Last synced: 8 months ago
JSON representation
Live stream over WebSocket with Python and OpenCV
- Host: GitHub
- URL: https://github.com/gonzalo123/opencv2ws
- Owner: gonzalo123
- Created: 2023-06-03T11:54:29.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-03T12:14:27.000Z (about 3 years ago)
- Last Synced: 2025-07-24T19:36:10.137Z (11 months ago)
- Topics: flask, opencv, python
- Language: Python
- Homepage:
- Size: 2.93 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Live stream over WebSocket with Python and OpenCV
In this article, we will conduct a small experiment. We will stream the live feed from a camera (for example, my laptop's camera) and transmit it using WebSockets to a web browser. In a real-life application, I would use a Django application, an MQTT broker as an event bus, and pure WebSockets with Django Channels. However, here we will use a minimal Flask application and WebSockets with the Socket.io library. Here is the application:
```python
import cv2
from flask import Flask, render_template
from flask_socketio import SocketIO
from datetime import datetime
app = Flask(__name__)
socketio = SocketIO(app)
@app.route('/')
def index():
return render_template('index.html')
def video_stream():
face_cascade = cv2.CascadeClassifier(cv2.data.haarcascades + 'haarcascade_frontalface_default.xml')
video_capture = cv2.VideoCapture(0)
while True:
success, frame = video_capture.read()
if success:
gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
faces = face_cascade.detectMultiScale(gray, scaleFactor=1.1, minNeighbors=5, minSize=(30, 30))
current_time = datetime.now().strftime("%H:%M:%S")
cv2.putText(frame, current_time, (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 255, 0), 2)
for (x, y, w, h) in faces:
cv2.rectangle(frame, (x, y), (x + w, y + h), (0, 255, 0), 2)
_, encoded_frame = cv2.imencode('.jpg', frame)
frame_data = encoded_frame.tobytes()
socketio.emit('frame', frame_data)
video_capture.release()
socketio.start_background_task(video_stream)
socketio.run(app, allow_unsafe_werkzeug=True)
```
The video_stream() function captures video frames (in a background task) from the default camera and performs face detection using the Haar cascade classifier from OpenCV. It continuously reads frames, converts them to grayscale, detects faces, and draws rectangles around the detected faces. The frames are encoded as JPEG images and sent to the clients connected via SocketIO.
And finally the cliente part:
```html
Video Streaming Example
![]()
(function () {
let socket = io();
let img = document.getElementById('video-frame');
socket.on('frame', function (frameData) {
let byteArray = new Uint8Array(frameData);
let binaryData = '';
for (var i = 0; i < byteArray.length; i++) {
binaryData += String.fromCharCode(byteArray[i]);
}
img.src = 'data:image/jpeg;base64,' + btoa(binaryData);
});
})();
```
Here, we obtain the binary data of the image from the WebSocket, convert it to base64, and place it in the src attribute of an image.
And that's all. Our live stream from a camera in our browser.