Saturday, October 21, 2017

Live Video Streaming from Raspberry Pi using MJPG-Streamer and HTML5 in the Local Network Area(LAN)

Hello there! After Remote Connection to MySQL Database in the Local Network Area(LAN) post, I am here with another fancy topic which makes live stream over HTTP. There are many ways to do this. But after a quick search, I have found the one that leads to minimal latency and works really well over a WIFI connection. The solution is the combination of MJPG-Streamer on the Raspberry Pi and HTML5 client website on the other computer.

Here is the technical description.

1 - My laptop's config:

- IP Adress:192.168.1.106
- Operating System: Windows 10
- HTML5 client website will be implemented in this computer.

2 - My Raspberry Pi's config:

- IP Adress:192.168.1.108
- Operating System: Raspbian Jessie Lite
- MJPG-Streamer program will be installed here and it will stream live video.

Both are on a wireless LAN connected through a TP-LINK router(192.168.1.1).

One by one we need to do following steps:

1 - Installation of the MJPG-Streamer program in Raspberry Pi: Instead of using the standard MJPG-Streamer, specific MJPG-Streamer version will be used in the project. Because, standard version does not include the built-in libraries for the Raspberry Pi. This specific version allows streaming video frames directly from your Raspberry Pi's camera, which is very efficient as well as convenient. After log in to Raspberry Pi, we need to call the following command:

cd /usr/src
sudo mkdir mjpg-streamer
sudo chown `whoami`:users mjpg-streamer
cd mjpg-streamer

First, we change the current directory to '/usr/src', then create another directory which is called 'mjpg-streamer'. After that we set the owner and the group of the directory and the last go into the new directory.

Now clone the specific MJPG-Streamer from the Github repository:

git clone https://github.com/jacksonliam/mjpg-streamer.git .


In order to compile the code, we will need to install some library dependencies:

apt-get install libv4l-dev libjpeg8-dev imagemagick build-essential cmake subversion


Next, we will need to compile the MJPG-Streamer.

cd mjpg-streamer-experimental
make

2 - Stream the live video from Raspberry Pi's camera: Now, we should start streaming the video from Raspberry Pi's camera. There are many options you can set. For details, visit the GitHub page above and look at the read-me page. Here, we will do a simple example of streaming of 640×480 resolution video at 15 frames per second.

export LD_LIBRARY_PATH=/usr/src/mjpg-streamer/mjpg-streamer-experimental
.mjpg_streamer -o "output_http.so -w ./www" -i "input_raspicam.so -x 640 -y 480 -fps 15 -ex night"


The export LD_LIBRARY_PATH variable sets the directory as a path where programs should look for libraries. Our program uses output_http.so and input_raspicam.so libraries found in the current directory, which is why we added that directory to LD_LIBRARY_PATH.

Now, it is done! MJPG-Streamer will stream the live video to the port which is 8080 on Raspberry Pi. We will access the streamer from the other computer over the network by typing the url(http://192.168.1.108:8080).

3 - Display the live stream over HTML5: 

The last step is to create an HTML5 file that displays the live stream from Raspberry Pi's camera. The source code of the HTML5 file is below:

<html>
<head>
<title>Real Time Video Stream</title>
</head>
<body>

 <div>

  <img src="http://192.168.1.108:8080/?action=stream" />

 </div>
  
</body>
</html>


Basically, we created the HTML5 file that has <img> tag whose source is 'http://192.168.1.108:8080/?action=stream'. It gets live stream from Raspberry Pi's camera communicates over 8080 port. If you have any problem, do not hesitate to ask. See you soon!


No comments:

Post a Comment