Android Tutorial MJPEG / CCTV Server

Discussion in 'Tutorials & Examples' started by Erel, Dec 4, 2016.

  1. Erel

    Erel Administrator Staff Member Licensed User

    A few days ago I've helped a developer with implementing a MJPEG client: https://www.b4x.com/android/forum/threads/73702/#content
    It was a good experience as while implementing it I've become familiar with the MJPEG protocol.
    MJPEG is quite simple. Each frames look like:

    --myboundary
    Content-Type:image/jpeg
    Content-Length:xxx

    <image data>

    Note that the end of lines are made of Chr(13) & Chr(10) and not the standard Chr(10) which is the value of CRLF in B4A, B4i and B4J (this is the natural end of line character on those platforms).

    This example turns the device into a CCTV camera. You can connect to it with any browser (including mobile browsers) and see the video stream. You can also access it over the internet if the router is configured to allow it.

    The nice thing about this example is that it supports multiple clients.

    [​IMG]

    Each connection is managed by a different instance of the "client" class. This makes it simple to support multiple and concurrent clients. AsyncStreams is responsible for the concurrency.

    Note that the image sent as-is. The orientation might be wrong.


    The frame rate is currently set to 6 frames per second. You can change it by modifying IntervalMS. Set it to 50 (1000 / 50 = 20 fps) and it will look much better.

    Test it by running the app on the device and then enter the device ip address in the browser followed by the port (51042).

    B4i example is available here: https://www.b4x.com/android/forum/threads/mjpeg-cctv-server.73821/
     

    Attached Files:

    Last edited: Dec 5, 2016
  2. Filippo

    Filippo Expert Licensed User

    Wow !!!:)
     
  3. Widget

    Widget Well-Known Member Licensed User

    Does it also transmit audio along with the video?
    Can someone do a short video to show what it is capable of? Maybe with multiple clients (to show how fast it is)?
    I'm trying to figure out the applications for it.

    Can it be used for:
    1. Baby monitor?
    2. Home security system?
    3. Remote doorbell?
    4. Anyone else can feel free to jump in and add your own suggestions to this list
     
  4. jsanchezc

    jsanchezc Member Licensed User

    Nice!!
     
  5. SNOUHyhQs2

    SNOUHyhQs2 Member Licensed User

    does it work with b4a 6.30?
     
  6. Erel

    Erel Administrator Staff Member Licensed User

    No. Only (low FPS) video.

    You can implement a similar solution and add AudioStreamer to send audio: https://www.b4x.com/android/forum/threads/30648/#content

    It is really simple to try it. Just run the example and connect with one or more browsers. Make sure to test performance in release mode.

    You will need to recreate the layout file.
     
  7. tchart

    tchart Active Member Licensed User

    @Erel, any chance we can get a B4J sample displaying the feeds?
     
  8. HAH

    HAH Active Member Licensed User

    Excellent
    That's what i was want....
    WOW!!!!!
    Thank you @Erel
     
  9. Erel

    Erel Administrator Staff Member Licensed User

  10. tchart

    tchart Active Member Licensed User

  11. Filippo

    Filippo Expert Licensed User

    In Wifi works fine, why not work with mobile?
    What needs to be set differently?
     
  12. Erel

    Erel Administrator Staff Member Licensed User

    Ohanian likes this.
  13. Filippo

    Filippo Expert Licensed User

    As always, thank you Erel!
     
  14. BertI

    BertI Member Licensed User

    Indeed it is great to see your approach. In fact this type of MJPEG streaming was part of the application I had been working on when I dsicovered the memory leak issue (https://www.b4x.com/android/forum/threads/camera-preview-memory-leak.73321/). As far as I can tell so far there has been a fundamental flaw in the native YUV to JPEG conversion procedure (severe memory leak) which has only been fixed in Android 6 upwards.

    Erm, just to clarify, reason I posted this comment here is to pre-warn anyone who subsequently finds their app crashes after a few hours and may be wondering why. Not all devices affected to same extent.
     
    Last edited: Dec 27, 2016
  15. Beja

    Beja Expert Licensed User

    Hi Erel,
    Tried the example and opened the page in Google Chrome, worked like a charm with acceptable result for security. Then I opened it in another computer in Internet Explorer, this time I got a message saying if I wanted to save it.. please see the attached screenshot.
    The message maybe not clear but saying: Do you want to open or save XWFESQX6 from 192.168.1.2?
    My guess is this browser is asking me to open or save the first frame that came up, instead of streaming the frames.

    cctvmsg.png
     
  16. Erel

    Erel Administrator Staff Member Licensed User

    It does work here with Internet Explorer. Maybe you need to use a newer version of IE.
     
  17. Beja

    Beja Expert Licensed User

    It's IE that comes with Windows 10, I couldn't find the help menu to know it's version.
     
  18. Erel

    Erel Administrator Staff Member Licensed User

    My mistake. I've tested it now on IE 11 and it doesn't work. IE doesn't support mjpeg streaming.

    Maybe MS Edge does support it.
     
    Beja likes this.
  19. tigrot

    tigrot Well-Known Member Licensed User

    Filippo, I don't think that this Mjpeg server can work on a mobile network. A few companies support listening ports and the IP is quite random. I have tested a solution for 2 years and had to move server logic to cabled Internet and create a client APP for Android. This works ...
     
  20. Mikel Huerta

    Mikel Huerta Member Licensed User

    Sorry @Erel, how can i recreate the layout file "1" ???
    I have 6.3
     
Loading...