In this article we'll show how to stream live videos from your Pi to a web browser. The technology that we've used to achieve that is an MJPG-streamer application and a Raspberry Pi camera. The end result will look as show in the GIF image above.
Step 1: Pre-requisites
You will need:
- Raspberry Pi connected to the internet.
- Raspberry Pi camera
- Dataplicity installed. (This is a free service that will provide functionality to have our stream available on the internet. Please go to dataplicity to install it)
Step 2: Connect Raspberry Pi Camera
The first thing to do is to set up the camera and make sure it's working. Connect the camera to your Pi as shown on the image with the blue marking on the camera tape connector facing the ethernet port.
Step 3: Enable Camera
After the camera is physically connected you have to enable it. This is done using the native Raspberry Pi configuration tool - raspi-config. Run the tool using the command below.
A menu with different configuration options will appear. Navigate to Enable camera and press enter.
Select Yes option and press enter.
From the main menu exit raspi-config by pressing the right arrow twice to navigate to the <Finish> option and press enter to exit. You will be prompted to reboot your Raspberry Pi for changes to take effect - select Yes.
Step 4: Test the Camera
To test that the camera is functioning correctly we'll take one image and save it to /home/pi using the command below.
raspistill -o /home/pi/image.jpg
When the command is executed you will see a camera preview appear on your display. The preview will stay on for few seconds and then an image will be taken.
Step 5: Turn Raspberry Pi Camera Into a USB Video Device
The Raspberry Pi camera can appear in /dev as a standard USB video device (required by MJPG-streamer) if we load the "Video for Linux 2" (V4L2) module for the corresponding hardware (BCM2835). We do this as follows:
sudo modprobe bcm2835-v4l2
Upon successful execution of this command you should see Video0 device file inside /dev directory. To verify, run the command below.
ls /dev | grep vid
Step 6: Update Your System Software
Prior to proceeding with the steps below please first make sure that the latest updates are installed on your Pi. To update your Pi run the two commands below.
sudo apt-get install update sudo apt-get install upgrade
Step 7: Install MJPG-streamer Dependencies
This project requires the presence of libjpeg-dev, imagemagick, libv4l-dev. Install them as follows:
sudo apt-get install libjpeg8-dev imagemagick libv4l-dev
Step 8: Build MJPG-streamer
The MJPG-streamer application doesn't come in a package form that we can install using sudo apt-get install command. Instead, what we have to do is to download and compile it from source code.
Source code usually comes in the form of a "tarball" i.e. multiple files packed together into an archive using the tar utility and then compressed using gzip utility to reduce the size of the archive.
Download MJPG-streamer tarball using the command below.
Unpack the tarball as follows:
tar -xvzf mjpg-streamer.tar.gz
Make a symlink between two libraries that will be used to compile MJPG-streamer:
sudo ln -s /usr/include/libv4l1-videodev.h /usr/include/linux/videodev.h
Navigate into MJPG-streamer directory and edit Makefile using your favourite editor.
cd mjpg-streamer nano Makefile
In this file, comment out the input_gspcav1 plugin by inserting " # " at the beginning of the line, like so:
# PLUGINS += input_gspcav1.so
Finally, run make to compile the program.
Compilation should only take couple of seconds and should produce no errors. When successful we'll have an MJPG-streamer application executable built.
Step 9: Run MJPG-streamer Server
The command below will run the server.
sudo ./mjpg_streamer -i "./input_uvc.so -f 10 -r 640x320 -n -y" -o "./output_http.so -w ./www -p 80"
If you see an output similar to the one in the picture it means that the server is running correctly
Step 10: Enable Wormhole
If you haven't already done so, log in to your Dataplicity account and go to the device (e.g. the Pi) you want to link to. At the top of the page will be a link to 'Activate Wormhole'.
Press it and enable Wormhole. The link will contain your device ID.
Step 11: Access Your Video Stream Via Dataplicity Wormhole
To see our video stream embedded using HTML we'll go to the address below (remember to replace with your device Wormhole URL from your Dataplicity account).
Picture above is an example of the video captured from the above URL.
Step 12: Troubleshooting the Video Stream
You might find that sometimes your stream could crash, jitter or suffer high lag. This can happen if your Pi and/or your internet connection cannot sustain the video stream at the framerate and resolution you have selected.
Below is a breakdown of MJPG-streamer run command:
The MJPG-streamer itself contains couple of options. In the above command that we used to run the server we've set two options:
- "-i" is an option that takes path to an input plugin and the parameters to it.
- "-o" is an option that takes path to an output plugin and the parameters to it.
The parameters that we've used for the input plugin are:
- "-f" framerate - this sets how many frames are captured per second.
- "-r" resolution - this sets the size for the image we're capturing.
- "-n" This option suppresses the errors that show up when the command is ran. These errors show because our camera can't be physically controlled. The errors have no impact on the streaming functionality but it's nice to run the server without seeing them.
- "-y" Specifies YUV format for the output image.
The parameters that output option takes that we're using are:
- "-w" path to folder where the website content is served from.
- "-p" port on which the website and stream is served on.
Accordingly, as we ran it above, mjpg_streamer was operating at a resolution of 640x320 and a framerate of 10 images per second. Here is the command to run it at a reduced 5 frames per second:
sudo ./mjpg_streamer -i "./input_uvc.so -f 5 -r 640x320 -n -y" -o "./output_http.so -w ./www -p 80"