Mjpeg Vs Mp4 Video Formats

We will compare Mjpeg Vs Mp4 against key performance params and also look at ways to stream these two diff formats to major browsers. DIY raspberry pi cloud security camera allows you to choose between H264 compressed Mp4 video or Mjpeg.

Network and Delivery

H264 is a standard compression format for HD videos. Mp4 is the most supported container format that is compatible with most of the popular browsers. So H264 contained in Mp4 container can be viewed in almost any browser and gives you good quality audio and video.   To create an H264 video, you need to encode the camera inputs for some duration. In case you use it for your surveillance camera then you need reasonably good bandwidth. If bandwidth is terrible and you lose a part of such encoded video you lose all of the videos for that duration. There will also be a slight lag in surveillance feed for the period that the camera uses for encoding and some more if there is buffering to show you smooth security camera video. A mjpeg video, on the other hand, is a sequence of packed images. A drop in the frame does not affect the subsequent images. The video feels as if it has small jerks in it. Overall the image quality is better. This kind of stream works with low bandwidth. You cannot add audio to Mjpeg. The lag is almost negligible in surveillance cameras as it need not wait to encode subsequent images. [su_highlight background="#fbfdc7"]H264 Vs Mjpeg Network Quality: Mjpeg wins here due to low latency and low bandwidth requirement.[/su_highlight]  

Viewing quality

H264 gives you a smooth and crisp video. On the other hand, Mjpeg gives you a jerking video. One major issue with H264 is that when there is movement in the camera view, the size of the H264 chunk increases; sometimes, if bandwidth is not suitable, you may miss out on the period that was of interest. This issue is not there with Mjpeg videos where each chunk(image) is rough of the same size. Mjpeg works in most of the major browsers across various devices. H264 videos though not as compatible as Mjpeg, also work with major browsers. Many mobile devices like the iPhone and Android cannot play video in the browser window but take up full screen to play them.   So on compatibility with devices,  both Mp4 and Mjpeg are roughly on the same grounds. Mp4 videos can be augmented with sound to give you better surveillance data than Mp4. [su_highlight background="#fbfdc7"]H264 Vs Mjpeg Viewing Quality: Mp4 video with possible augmentation of sound wins here as it gives you the best viewing experience. [/su_highlight]  

Convenience

For viewing, if you have a great bandwidth MP4 is very nice. The motion history is stored in the cloud in forms of Mp4 chunks. Mjpeg history is stored as images. Some may find going thru image history more convenient. On the other hand, video history will not leave out any movement. [su_highlight background="#fbfdc7"]H264 Vs Mjpeg Convenience: Tie.[/su_highlight]

A bit of Tech

Mjpeg

To display mjpeg in most of the major browsers, all you need is multipart image data flowing into the src of an HTML <img tag. For example, on the HTML side, it appears like:

HTML

<?php
....
$url = "https://192.168.1.1/udp/live.php?uuid=".$device->uuid."&rand=".mt_rand();
$img = '<img  width="100%"  id="live'.$uuid.'" src="'.$url.'">';
....
?>

PHP

On the server-side live.php should be writing a multipart image data like below:

<?php
        header($_SERVER["SERVER_PROTOCOL"]." 200 OK");
        header("Pragma: no-cache");
        header("Cache-Control: no-cache");
        header("Cache-Control: no-store");
        header('Content-Type: multipart/x-mixed-replace; boundary=--jpgboundary');
        print("--jpgboundary\n");

// looping while writing live images, assume $img fetches the live data
....
        print("Content-Type: image/jpeg\n");
        $imgsize = strlen($img);
        print("Content-length: ". $imgsize . "\n\n" );
        print $img;
        print("--jpgboundary\n");
        flush();

....
>?

Some browsers can only handle up to a certain size of this infinitely loading image. These need to be handled by carefully refreshing the image URL at regular intervals etc.  

Mp4

Mp4 handling is a bit trickier. You are getting mp4 chunks. So you need to keep the mp4 player updated with the latest mp4 snippet. Playing of such Mp4 fragments can be achieved by a bit of javascript. Create a rest API that indicates the latest mp4 chunk received by the server. Define two video tags; we used videojs as a wrapper:

HTML

 <\video id="video0" class="video-js vjs-default-skin vjs-4-3" 
            style="display: block;" preload="auto" muted="" width="100%" height="500"> 
            autoplay controls >
</\video>
<\video id="video1" class="video-js vjs-default-skin vjs-4-3" 
            style="display: block;" preload="auto" muted="" width="100%" height="500"> 
            autoplay controls >
</\video>

Javascript

Using javascript, the idea is while playing one video container, you load and keep the hidden one ready. The loaded one is played as soon as the current one ends, as shown below:

var player =  videojs("video0"); 
var player_hidden =  videojs("video1");
player_hidden.hide();
player.show();

player.on('play', function(){
  player_hidden.src(dynamicMedia() ); 
  player_hidden.load();
});
player_hidden.on('play', function(){
    player.src(dynamicMedia() ); 
    player.load();
});
player.on('ended', function(){
     player.hide();
     player_hidden.show();
     player_hidden.play();
 });
player_hidden.on('ended', function(){
    player_hidden.hide();
    player.show();
    player.play();
});

player.on('error', function(){
     player_hidden.hide();
     player.show();
     player.src(dynamicMedia());  
     player.load(); 
     player.play();
 });

player_hidden.on('error', function(){
     player.hide();
     player_hidden.show();
     player_hidden.src(dynamicMedia() ); 
     player_hidden.load(); 
     player_hidden.play();
 });

A side by side recording of the two formats

In the above video, we have captured the Mp4 video on the left-hand side, while on the right hand is Mjpeg streaming.

You can set a cloud security camera using our DIY kits.

About DIY Raspberry Pi Cloud Security Camera

DIY Raspberry Pi Cloud Security Camera provides storage support for both formats. It is easier to scroll or play the Mjpeg motion alerts, while to drill down H264 history, you need to play the chunk. DIY Raspberry Pi Cloud Security Camera  specializes in delivering surveillance data that can be accessed from major browsers on any device via the cloud. We also provide video AI that can be switched on from your cloud account. Cloud AI enables the camera to interpret events and alerts you as required.