This page has been robot translated, sorry for typos if any. Original content here.

Organization of live broadcast from the ip camera on the site

On the page


Organization of live broadcast from the ip camera on the site

A task

Consider the task of organizing live video broadcasts from the ip camera on the site.

Our stand consists of three components:

  • ip camera
  • media server
  • flash player in the browser on the client side

Choosing an ip camera

In order to be comfortable to take a stream from the camera, it must support the live video transmission (usually using the RTSP protocol). There is another option, when from the camera at any time you can pick up JPEG with the current frame via the HTTP protocol, but it's not so convenient. Therefore, the D'Link DCS-2121 camera with RTSP support was selected.

Media server

The most difficult part of the configuration, as it is the functions of getting video from the camera, converting to the required format, caching and distribution to customers. Running forward, I will say that it is expedient to distribute in this case either according to the Adobo protocol RTMP, which is natively supported by flash players, or via HTTP.

For RTMP, there are paid solutions: FMS , Wowza (the latter is free with fewer concurrent connections) and free ( red5 and rtmpd ).

If you distribute via HTTP, then the options are even more, since the task is divided into two sub-tasks:

  1. video conversion
  2. video distribution

Naturally, the number of combinations increases. For distribution, you can use, for example, apache or lighthttpd. To convert - ffmpeg.

In my case, it was necessary to do everything

  1. under Linux
  2. is free
  3. just

That's why I stopped at the very, in my opinion, simple variant, in which we only need one program on the server - the VLC video player , which, however, we will configure and compile for our needs. This video player does not yet have normal support for RTMP, so we will give the flv file via HTTP.

flash player in the browser on the client side

In principle, any should come up, but I, for some reason and did not manage to configure JW Player . The FLV file was endlessly downloaded to the client, and the buffering did not end. The timing was tightened and the player changed to Flow player , as a result of which the problem disappeared.

Customize

Variables

To avoid making further reservations, we will assume that I have the ip address of the server - 10.0.0.2, the camera - 10.0.0.3, the mask 255.0.0.0 and the gateway 10.0.0.1, in Linux I'm working under the user user, I run all the necessary commands via sudo .

Camera setup

Set up the camera through the web interface, set the necessary network parameters: ip address, mask, gateway, expose the time. We also need to specify the port on which the camera will give the RTSP stream (standard port 554 is used, I left it).

In the "Audio and Video" section we will set the characteristics of the video that we need. In any case, we can change the bitrate and the size of the image later on the server while converting, but to ensure that everything was accurate, we will point out immediately here. We will use MPEG4 640x480, 15 fps, 512kb bitrate.

Just here you need to specify RTSP URL this address will be used when picking up the stream from the camera, we only need to specify the file name. I entered camera1.sdp. As a result, the stream will be accessible via rtsp: //10.0.0.3: 554 / camera1.sdp

Server Tuning

Any Linux, I used Debian Lenny. Create a folder in the home where we will work:

  1. mkdir ~ user / install
  2. cd ~ user / install

We need to download the codecs, so we connect the debian-multimedia repository:

  1. wget http: // www.debian-multimedia.org / pool / main / d / debian-multimedia-keyring / debian-multimedia-keyring_2008.10.16_all.deb
  2. dpkg -i . / debian-multimedia-keyring_2008.10.16_all.deb

Add a line to /etc/apt/sources.list

  1. deb http: // www.debian-multimedia.org stable main non-freel.deb

We will need to install many packages before we go directly to VLC. I tried to list everything here, but maybe something is not enough, in this case, the missing will have to be delivered.

  1. apt-get update
  2. apt-get install yasm make subversion xcb libxcb1-dev libxcb-shm0-dev libxcb-keysyms0-dev \
  3. libavformatcvs51 libavcodeccvs51 libavcodeccvs51-dev libavformatcvs51-dev libavutilcvs49-dev \
  4. autoconf g ++ gcc liba52-0.7.4-dev libdvbpsi3-dev libdvbpsi3 libfaad-dev libfaac-dev libfribidi-dev \
  5. libavutilcvs49 libavahi-client3 libavahi-common-dev libpostproccvs51-dev libswscalecvs0-dev \
  6. libswscalecvs0 libxvidcore4-dev libxvidcore4 libx264-dev libx264- 54 automake1.9 libgcrypt11-dev \
  7. liblame-dev liblua5.1-0 -dev libmad0-dev libmpeg2-4 -dev libogg-dev libvorbis-dev zlib1g-dev \
  8. libvcdinfo-dev libiso9660-dev libcddb2-dev libflac-dev libx264-dev x264

All the rest will be put from the source to be able to enable or disable certain options. Let's start with the latest version of ffmpeg:

  1. svn checkout svn : // svn.ffmpeg.org / ffmpeg / trunk ffmpeg
  2. cd ffmpeg
  3. . / configure
  4. make
  5. make install
  6. cd ..

If you plan to work with the h264 codec, you can configure ffmpeg with options

./configure --enable-libx264 --enable-gpl

Next, we need a very necessary library live555 streaming media, it is with it that our VLC player will work with RTSP.

  1. wget http: // www.live555.com / liveMedia / public / live555-latest.tar.gz
  2. tar zxvf. / live555-latest.tar.gz
  3. cd live
  4. . / genMakefiles linux
  5. make
  6. cd ..

Now go to the VLC player itself. We go http://download.videolan.org/pub/videolan/vlc/latest/ and see what the latest version is, then we extract and unpack the sources. In my case, it looked like this:

  1. wget http: // download.videolan.org / pub / videolan / vlc / latest / vlc-1.1.0.tar.bz2
  2. bzip2 -d vlc-1.1.0.tar.bz2
  3. tar xvf. / vlc-1.1.0.tar
  4. cd vlc-1.1.0
The configuration of VLC is the most creative part, we will try to do it so that there is something we need and nothing superfluous.
  1. . / configure --enable-release --enable-faad --disable-dbus --disable-hal \
  2. --disable-remoteosd --disable-qt4 --disable-skins2 --disable-activex \
  3. --disable-v4l2 --disable-libv4l2 --disable-x11 --disable-xvideo --disable-glx \
  4. --disable-opengl --disable-visual --disable-nls --disable-mozilla \
  5. --enable-realrtsp --enable-flac --disable-lua --prefix = / usr \
  6. --with-live555-tree = / home / user / install / live --with-ffmpeg-tree = / home / user / install / ffmpeg

In the last line, we specify the paths to the sources ffmpeg and live555, with which we worked on the previous steps. If you plan to run the player under the root, you need to add the --enable-run-as-root option, if the h264 codec is --enable-x264

Then we compile and put the player. This procedure takes quite some time. In my case, there was always something missing to compile, I tried to enumerate all the necessary libraries, but in any case, everything can change from version to version, so watch for errors and deliver what he asks for.

  1. make
  2. make install

The installation of the software is complete, all we need is to launch the player with the required parameters. In general, VLC player is unique in its flexibility.

The player will work with us in two simultaneous streams: the first one will receive video from the camera via RTSP, multiplex it into MPEG TS and give it to localhost: 8001, the second will take the result from localhost: 8001, compress, encode, pack into FLV container and give to HTTP on port 8080. Let's make 2 files for launching these streams respectively:

  1. mkdir ~ user / scripts
  2. touch ~ user / scripts / stream1.sh
  3. touch ~ user / scripts / stream2.sh

In stream1.sh we insert the following lines:

  1. #! / bin / sh
  2. vlc -vv rtsp: // 10.0.0.3: 554 / camera1.sdp --rtsp-caching = 100000 --no-sout-audio --sout \
  3. '#std {access = http, dst = 127.0.0.1: 8001, mux = ts}'

Here we told the player what to play and where. As a source, the stream from the rtsp: //10.0.03: 554 / camera1.sdp camera was selected, the buffer size was specified and immediately our first movie was mute ( --no-sout-audio ). The result will be given by this stream at http://127.0.0.1:8001In stream2.sh we insert the lines:

  1. #! / bin / sh
  2. vlc -vv http: // 127.0.0.1: 8001 --loop --http-caching = 10000 --sout \
  3. '#transcode {vcodec = FLV1, vb = 512, fps = 15}: std {access = http {mime = video / x-flv}, dst =: 8080 / view01.flv, mux = ffmpeg {mux = flv}} '

The second thread takes http://127.0.0.1:8001, has its own cache, compresses it (vb - bitrate, fps - fps) and distributes it via HTTP on port 8080 as file view01.flv. If there are several interfaces on the server, you can specify in dst the same specific ip address of the interface on which you want to distribute.

In industrial operation, the threads should be run in the background and without binding to the console, in our example, we will run them just in two consoles. vlc should fill the buffer for a while, and then go into normal mode. Duration of filling directly depends on the size of the cache ( --rtsp-caching and --http-caching, respectively). We need to create a page with the player. For simplicity, we'll make it on the same server.

  1. apt-get install apache2
Setting the player
  1. cd / var / www /

Then download Flow Player. On the developer's site there is a setup wizard to use it, you need to register. A wizard is available at http://flowplayer.org/setup/index.html .

Since we have a live stream and the camera displays the current time directly in the picture, the player should be minimalistic. Disable all but the button "Fullscreen", download the player and unpack the contents of the archive in the folder / var / www on our server.

To make everything perfect, I also renamed the swf and js files to player.swf and player.js, respectively. I would not write about this fact, if I forgot on how they were called before. Therefore, in the text, I will also use my new names. So, create a html page

  1. touch / var / www / index.html
We save the following text in it:
  1. < html > < head >
  2. < meta http-equiv = "content-type" content = "text / html; charset = UTF-8" > < script type = "text / javascript" src = "/player.js" > < / script >
  3. < title > Viewing the camera 1 < / title >
  4. < / head >
  5. < body >
  6. < h1 > Camera # 1 < / h1 >
  7. < a
  8. href = "http://stream.kubsu.ru:8080/view01.flv"
  9. style = "display: block; width: 520px; height: 330px; margin: 10px auto;"
  10. id = "player" >
  11. < / a >
  12. < script >
  13. flowplayer ("player", "/player.swf");
  14. < / script >
  15. < / body > < / html >

Everything is ready, go to the browser at http://10.0.0.2/ and watch the broadcast.