Release 0.0.8

Release notes

• Unified view and grid views. A grid is a view with multiple cameras and a view has only one camera view. Same views, javascript files and stylesheets for both.
  
• New getCamerasSortedArray() method in config to return a sorted cameras array. This is used to display the cameras list properly ordered.

Release 0.0.7

Release notes

• Implemented the grab exit event to try to rerun the process after a short delay.
• Max video time limit in seconds.
• Links to grid, views and events in the cameras list at the main page.

Release 0.0.6

Release notes

• Socket.io reconnect ok. Moved the for loop that emits subscribe events for the cameras into the connect event. After reconnect this event is fired again.
• Alert box to show client disconnect.
• Fixed a bug in using the '(new Date()).toISOString().substr(0,10)' expression to get the date folder name where the recordings are saved. The time returned did not consider the  timezone.
• Added -y option in ffmpeg command to overwrite output files without asking.

Release 0.0.5

Release notes

• New page for viewing the recorded events.
• Fixed bug with event mp4 video generated. Added "-pix_fmt yuv420p" output parameter to the ffmpeg command. Now the generated video plays in Google Chrome browse.

Convert multiple jpeg files to mp4 video using ffmpeg

This doesn't work:

ffmpeg -r 2 -f image2 -i %05d.jpg out.mp4

The video generated doesn't play in Chrome.

The problem is with the pixel format. This is the correct way to generate the video:

ffmpeg -r 2 -f image2 -i %05d.jpg -pix_fmt yuv420p out2.mp4

Release 0.0.4

Screenshots from release 0.0.4

Grid view with a customized layout showing some dragged and resized cameras:

A singled camera viewed from an iPhone:

The home/configuration page showing all my five configured cameras:

Release notes

• Fixed the problem with multichannel cards. Reads from multiple cameras connected to the same chip (device - e.g. /dev/video0) are now synchronous.
• Implemented a simple image change detection routine to trigger event recording.
• Improvements in the client (browser) to allow grid camera view positioning and resizing, saving these customizations using HTML5 localStorage feature.
• Events recording for each configured camera.

Let's rock the client

The next image shows how the cameras were displayed in the client browser. So annoying, the image of each camera after the previous, all the same size. Without possibility of any sort of customization. Really very annoying!

So, let's start with a little of rock and roll in this project. Let's use tiny drops of jQuery UI to move and resize the camera images the way we want.

For the times they are a-changin. In the next image we can see how the presentation is now. We can freely move and resize each camera image regardless of the other cameras sizes and positions. We may even overlap then.

The coolest thing is that we can do it all with very few new lines of code.

Some relevant parts of the Jade script:

doctype 5
html
  head
    ...
    link(rel='stylesheet', href='http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css')
    script(src='/javascripts/jquery.min.js')
    script(src='/javascripts/jquery-ui.custom.min.js')
    ...
    script
      $(function() {
        $(".draggable").draggable();
        $(".resizable").resizable({
          aspectRatio: 320 / 240
        });        
      });
  body
    #grid
      .linha
        #cam01.camera.draggable
          .image
            img#img01.resizable(src='#', width=320, height=240) 
          .info
        ...