{"id":24732661,"url":"https://github.com/gonzalo123/opencv2ws","last_synced_at":"2025-10-12T06:06:10.841Z","repository":{"id":172196966,"uuid":"648979463","full_name":"gonzalo123/opencv2ws","owner":"gonzalo123","description":"Live stream over WebSocket with Python and OpenCV","archived":false,"fork":false,"pushed_at":"2023-06-03T12:14:27.000Z","size":3,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-24T19:36:10.137Z","etag":null,"topics":["flask","opencv","python"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gonzalo123.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-03T11:54:29.000Z","updated_at":"2025-01-03T16:32:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"b4c90052-9dec-4945-ae58-60210e53331d","html_url":"https://github.com/gonzalo123/opencv2ws","commit_stats":null,"previous_names":["gonzalo123/opencv2ws"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gonzalo123/opencv2ws","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gonzalo123%2Fopencv2ws","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gonzalo123%2Fopencv2ws/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gonzalo123%2Fopencv2ws/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gonzalo123%2Fopencv2ws/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gonzalo123","download_url":"https://codeload.github.com/gonzalo123/opencv2ws/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gonzalo123%2Fopencv2ws/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279010477,"owners_count":26084756,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-12T02:00:06.719Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flask","opencv","python"],"created_at":"2025-01-27T17:53:32.849Z","updated_at":"2025-10-12T06:06:10.827Z","avatar_url":"https://github.com/gonzalo123.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Live stream over WebSocket with Python and OpenCV\n\nIn 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:\n\n\n\n```python\nimport cv2\nfrom flask import Flask, render_template\nfrom flask_socketio import SocketIO\nfrom datetime import datetime\n\napp = Flask(__name__)\nsocketio = SocketIO(app)\n\n\n@app.route('/')\ndef index():\n    return render_template('index.html')\n\n\ndef video_stream():\n    face_cascade = cv2.CascadeClassifier(cv2.data.haarcascades + 'haarcascade_frontalface_default.xml')\n    video_capture = cv2.VideoCapture(0)\n\n    while True:\n        success, frame = video_capture.read()\n\n        if success:\n            gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)\n            faces = face_cascade.detectMultiScale(gray, scaleFactor=1.1, minNeighbors=5, minSize=(30, 30))\n            current_time = datetime.now().strftime(\"%H:%M:%S\")\n            cv2.putText(frame, current_time, (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 255, 0), 2)\n\n            for (x, y, w, h) in faces:\n                cv2.rectangle(frame, (x, y), (x + w, y + h), (0, 255, 0), 2)\n            _, encoded_frame = cv2.imencode('.jpg', frame)\n            frame_data = encoded_frame.tobytes()\n            socketio.emit('frame', frame_data)\n\n    video_capture.release()\n\n\nsocketio.start_background_task(video_stream)\nsocketio.run(app, allow_unsafe_werkzeug=True)\n```\n\nThe 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.\n\nAnd finally the cliente part:\n\n```html\n\u003chtml\u003e\n\u003chead\u003e\n    \u003ctitle\u003eVideo Streaming Example\u003c/title\u003e\n    \u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.0/socket.io.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cimg id=\"video-frame\" src=\"\"/\u003e\n\u003cscript type=\"text/javascript\"\u003e\n    (function () {\n        let socket = io();\n        let img = document.getElementById('video-frame');\n\n        socket.on('frame', function (frameData) {\n            let byteArray = new Uint8Array(frameData);\n            let binaryData = '';\n            for (var i = 0; i \u003c byteArray.length; i++) {\n                binaryData += String.fromCharCode(byteArray[i]);\n            }\n            img.src = 'data:image/jpeg;base64,' + btoa(binaryData);\n        });\n    })();\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nHere, 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.\n\nAnd that's all. Our live stream from a camera in our browser.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgonzalo123%2Fopencv2ws","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgonzalo123%2Fopencv2ws","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgonzalo123%2Fopencv2ws/lists"}