Socket io stream python


  • OpenCV – Stream video to web browser/HTML page
  • Local Classes in C++
  • Real-Time Client Notifications Using Redis and Socket.IO
  • Streaming Flask-SocketIO
  • Asynchronous updates to a webpage with Flask and Socket.io
  • OpenCV – Stream video to web browser/HTML page

    IO Backbone. Its declarative event-handling makes it easy to listen for actions in the UI and keep your data model in sync, but what about changes that occur to your data model on the server? Take a simple example: users A and B are viewing the same data at the same time, while user A makes a change to that data. How do we propagate those changes to user B? Now, how do we do it at scale, say, several thousand concurrent users? What about external consumers of that data? We needed notifications to be easily consumable beyond the scope of a web client, e.

    Polling sucks. Server-Sent Events are an improvement. They provide a less rich API than the WebSocket protocol , which supports bi-directional communication, but they do have some niceties like handling reconnects and operating over traditional HTTP. IO provides a nice wrapper around WebSockets while falling back to other transport methods when necessary.

    The solution I decided on was a library called gevent-socketio , which is a Python implementation of the Socket. IO protocol built on gevent , making it incredibly simple to hook in to our existing Flask app.

    The gevent-socketio solution really only solves a small part of the overarching problem by providing a way to broadcast messages to clients.

    We still need a way to hook these messages in to our Backbone application and, more important, a way to publish and subscribe to events across threads and processes. The Socket. IO dispatcher is just one of potentially many consumers after all. The other piece of the solution is to use Redis for its excellent pubsub capabilities. Redis allows us to publish and subscribe to messages from anywhere, even from different machines. Events that occur as a result of user actions, task queues, or cron jobs can all be captured and published to any interested parties as they happen.

    Hooking gevent-socketio into our Flask app is pretty straightforward. We essentially just wrap it with a SocketIOServer. The other piece is registering client subscribers for notifications: NotificationsNamespace is a Socket. IO namespace we will use to broadcast notification messages. When a connection is received, we spawn a greenlet that listens for messages and broadcasts them to clients in the notifications namespace.

    We can then build a minimal API that can be used across our application to publish notifications. Wiring notifications up to the UI is equally simple. To facilitate communication between our Backbone components while keeping them decoupled, we use an event-dispatcher pattern relying on Backbone.

    The pattern looks something like this: This pattern makes it trivial for us to allow our views, collections, and models to subscribe to our Socket. IO notifications because we just have to pump the messages into the dispatcher pipeline. Now our UI components can subscribe and react to client- and server-side events as they see fit and in a completely decoupled fashion. This makes it very easy for us to ensure our client-side views and models are updated automatically while also letting other services consume these events.

    Click here to download the source code to this post Last updated on July 9, Ever have your car stolen? Mine was stolen over the weekend. Parking is hard to find in our neighborhood, so I was in need of a parking garage. I heard about a garage, signed up, and started parking my car there.

    Fast forward to this past Sunday. My wife and I arrive at the parking garage to grab my car. We were about to head down to Maryland to visit my parents and have some blue crab Maryland is famous for its crabs. I walked to my car and took off the cover. After a few short minutes I realized the reality — my car was stolen.

    While I continue to do paperwork with the police, insurance, etc, you can begin to arm yourself with Raspberry Pi cameras to catch bad guys wherever you live and work. Update July Added two new sections. The first section provides suggestions for using Django as an alternative to the Flask web framework.

    The second section discusses using ImageZMQ to stream live video over a network from multiple camera sources to a single central server. Looking for the source code to this post? Putting all these pieces together results in a home surveillance system capable of performing motion detection and then streaming the video result to your web browser.

    The Flask web framework Figure 1: Flask is a micro web framework for Python image source. Flask is a popular micro web framework written in the Python programming language.

    However, unlike Django, Flask is very lightweight, making it super easy to build basic web applications. The webstreaming. In order for our web browser to have something to display, we need to populate the contents of index. By use of background subtraction for motion detection, we have detected motion where I am moving in my chair.

    Our motion detector algorithm will detect motion by form of background subtraction. We can easily extend this method to handle multiple regions of motion as well.

    Open up the singlemotiondetector. All of these are fairly standard, including NumPy for numerical processing, imutils for our convenience functions, and cv2 for our OpenCV bindings. We then define our SingleMotionDetector class on Line 6. The class accepts an optional argument, accumWeight, which is the factor used to our accumulated weighted average.

    The larger accumWeight is, the less the background bg will be factored in when accumulating the weighted average. Conversely, the smaller accumWeight is, the more the background bg will be considered when computing the average. Otherwise, we compute the weighted average between the input frame, the existing background bg, and our corresponding accumWeight factor.

    Given our input image we compute the absolute difference between the image and the bg Line A series of erosions and dilations are performed to remove noise and small, localized areas of motion that would otherwise be considered false-positives likely due to reflections or rapid changes in light.

    We then initialize two sets of bookkeeping variables to keep track of the location where any motion is contained Lines 40 and Otherwise, motion does exist in the frame so we need to start looping over the contours Line For each contour we compute the bounding box and then update our bookkeeping variables Lines , finding the minimum and maximum x, y -coordinates that all motion has taken place it. Finally, we return the bounding box location to the calling function.

    Open up the webstreaming. Line 7 imports the threading library to ensure we can support concurrency i. We then create a lock on Line 18 which will be used to ensure thread-safe behavior when updating the ouputFrame i. Line 21 initialize our Flask app itself while Lines access our video stream: If you are using a USB webcam, you can leave the code as is. However, if you are using a RPi camera module you should uncomment Line 25 and comment out Line The next function, index, will render our index.

    Our next function is responsible for: Looping over frames from our video stream Applying motion detection Drawing any results on the outputFrame And furthermore, this function must perform all of these operations in a thread safe manner to ensure concurrency is supported.

    Converting to grayscale. Gaussian blurring to reduce noise. We then grab the current timestamp and draw it on the frame Lines If so, we apply the. If motion is None, then we know no motion has taken place in the current frame. Otherwise, if motion is not None Line 67 , then we need to draw the bounding box coordinates of the motion region on the frame. Line 76 updates our motion detection background model while Line 77 increments the total number of frames read from the camera thus far.

    Finally, Line 81 acquires the lock required to support thread concurrency while Line 82 sets the outputFrame. We need to acquire the lock to ensure the outputFrame variable is not accidentally being read by a client while we are trying to update it. Then generate starts an infinite loop on Line 89 that will continue until we kill the script. Inside the loop, we: First acquire the lock Line Ensure the outputFrame is not empty Line 94 , which may happen if a frame is dropped from the camera sensor.

    Check to see if the success flag has failed Lines and , implying that the JPEG compression failed and we should ignore the frame.

    Finally, serve the encoded JPEG frame as a byte array that can be consumed by a web browser. That was quite a lot of work in a short amount of code, so definitely make sure you review this function a few times to ensure you understand how it works.

    The app. Your web browser is smart enough to take this byte array and display it in your browser as a live feed. ArgumentParser ap. We need three arguments here, including: --ip: The IP address of the system you are launching the webstream. By default, we use 32 frames to build the background model. Lines launch a thread that will be used to perform motion detection. Finally, Lines and launches the Flask app itself. The template itself is populated by the Flask web framework and then served to the web browser.

    Your web browser then takes the generated HTML and renders it to your screen. Our web browser is then smart enough to properly render the webpage and serve up the live video stream. Do not use it in a production deployment. Use a production WSGI server instead. I even pulled out my iPhone and opened a few connections from there. Flask is arguably one of the most easy-to-use, lightweight Python web frameworks, and while there are many, many alternatives to build websites with Python, the other super framework you may want to use is Django.

    It definitely takes a bit more code to build websites in Django, but it also includes features that Flask does not, making it a potentially better choice for larger production websites. Alternative methods for video streaming Figure 4: The ImageZMQ library is designed for streaming video efficiently over a network. It is a Python package and integrates with OpenCV.

    The library is designed to pass video frames, from multiple cameras, across a network in real-time. What's next? I recommend PyImageSearch University. Do you think learning computer vision and deep learning has to be time-consuming, overwhelming, and complicated? Or has to involve complex mathematics and equations? Or requires a degree in computer science? All you need to master computer vision and deep learning is for someone to explain things to you in simple, intuitive terms.

    My mission is to change education and how complex Artificial Intelligence topics are taught. If you're serious about learning computer vision, your next stop should be PyImageSearch University, the most comprehensive computer vision, deep learning, and OpenCV course online today.

    Join me in computer vision mastery. Click here to join PyImageSearch University Summary In this tutorial you learned how to stream frames from a server machine to a client web browser. Using this web streaming we were able to build a basic security application to monitor a room of our house for motion.

    Background subtraction is an extremely common method utilized in computer vision. Typically, these algorithms are computationally efficient, making them suitable for resource-constrained devices, such as the Raspberry Pi. Furthermore, our implementation supports multiple clients, browsers, or tabs — something that you will not find in most other implementations.

    To download the source code to this post, and be notified when future posts are published here on PyImageSearch, just enter your email address in the form below!

    Inside you'll find my hand-picked tutorials, books, courses, and libraries to help you master CV and DL! Download the code! All too often I see developers, students, and researchers wasting their time, studying the wrong things, and generally struggling to get started with Computer Vision, Deep Learning, and OpenCV.

    I created this website to show you what I believe is the best possible way to get your start. Reader Interactions.

    Its declarative event-handling makes it easy to listen for actions in the UI and keep your data model in sync, but what about changes that occur to your data model on the server? Take a simple example: users A and B are viewing the same data at the same time, while user A makes a change to that data. How do we propagate those changes to user B? Now, how do we do it at scale, say, several thousand concurrent users? What about external consumers of that data?

    We needed notifications to be easily consumable beyond the scope of a web client, e.

    Local Classes in C++

    Polling sucks. Server-Sent Events are an improvement. They provide a less rich API than the WebSocket protocolwhich supports bi-directional communication, but they do have some niceties like handling reconnects and operating over traditional HTTP.

    IO provides a nice wrapper around WebSockets while falling back to other transport methods when necessary.

    Real-Time Client Notifications Using Redis and Socket.IO

    The solution I decided on was a library called gevent-socketiowhich is a Python implementation of the Socket. IO protocol built on geventmaking it incredibly simple to hook in to our existing Flask app. The gevent-socketio solution really only solves a small part of the overarching problem by providing a way to broadcast messages to clients. We still need a way to hook these messages in to our Backbone application and, more important, a way to publish and subscribe to events across threads and processes.

    The Socket.

    Streaming Flask-SocketIO

    IO dispatcher is just one of potentially many consumers after all. On the client side, a little bit of JavaScript wizardry with jQuery is used to handle incoming and trigger outgoing events. I would really recommend the JavaScript path on CodeSchool if you are not familiar with these technologies. In this specific example, we want the server to be continually working in the background generating new information, while at the same time allowing new clients to connect, and pushing new information to connected clients.

    Asynchronous updates to a webpage with Flask and Socket.io

    Hence, in application. Client presentation is done, for this example, using a simple bootstrap themed page contained in the Flask Template folder, and the number handling logic is maintained in the static JavaScript file application. A running list of 10 numbers is maintained and all connected clients will update simultaneously as new numbers are generated by the server. Flask served web pages that react to events on the server. Perhaps in part2.

    The final output should look like this: You can find all of the source code on GitHubwith instructions on how to install the necessary libraries etc. Feel free to adapt to your own needs, and leave any comments if you come up with something neat or have any problems. This functionality is documented in the original documentation for Flask-SocketIO.


    thoughts on “Socket io stream python

    • 21.09.2021 at 22:10
      Permalink

      In my opinion you are not right. Let's discuss. Write to me in PM, we will communicate.

      Reply
    • 23.09.2021 at 10:55
      Permalink

      You are mistaken. Let's discuss. Write to me in PM.

      Reply
    • 25.09.2021 at 04:27
      Permalink

      The authoritative point of view

      Reply
    • 25.09.2021 at 21:48
      Permalink

      Quite right! Idea excellent, it agree with you.

      Reply

    Leave a Reply

    Your email address will not be published. Required fields are marked *