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

Organisation der Live-Übertragung von der IP-Kamera auf der Website

Auf Seite


Organisation der Live-Übertragung von der IP-Kamera auf der Website

Herausforderung

Betrachten Sie die Aufgabe, eine Live-Videoübertragung von einer IP-Kamera auf einer Site zu organisieren.

Unser Stand besteht aus drei Komponenten:

  • IP-Kamera
  • Medienserver
  • Flash Player im clientseitigen Browser

Auswahl der IP-Kamera

Um den Stream bequem von der Kamera aufnehmen zu können, muss die Übertragung von Live-Videos unterstützt werden (normalerweise über das RTSP- Protokoll). Es gibt eine andere Option, wenn Sie ein JPEG mit dem aktuellen Bild mithilfe des HTTP-Protokolls jederzeit von der Kamera abrufen können, dies ist jedoch nicht so praktisch. Daher wurde die D'Link DCS-2121-Kamera mit RTSP-Unterstützung ausgewählt.

Medienserver

Der schwierigste Teil der Konfiguration besteht darin, dass die Funktionen zum Empfangen von Videos von der Kamera, Konvertieren in das erforderliche Format, Zwischenspeichern und Verteilen an Clients vorhanden sind. In diesem Fall ist es empfehlenswert, das von Flash-Playern unterstützte Adobe RTMP-Protokoll oder HTTP zu verwenden.

Für RTMP gibt es kostenpflichtige Lösungen: FMS , Wowza (letzteres ist kostenlos bei weniger als zehn gleichzeitigen Verbindungen) und Free ( red5 und rtmpd ).

Wenn Sie über HTTP verteilen, gibt es noch mehr Optionen, da die Aufgabe in zwei Unteraufgaben unterteilt ist:

  1. Videokonvertierung
  2. Videoverteilung

Natürlich wächst die Zahl der Kombinationen. Für die Verteilung können Sie beispielsweise Apache oder Lighthttpd verwenden. Für die Konvertierung - ffmpeg.

In meinem Fall war es notwendig, alles zu tun

  1. unter Linux
  2. kostenlos
  3. einfach

Daher habe ich mich meiner Meinung nach für die einfache Option entschieden, bei der wir auf dem Server nur ein Programm benötigen - den VLC- Videoplayer, den wir jedoch für unsere Bedürfnisse konfigurieren und kompilieren werden. Dieser Videoplayer hat noch keine normale RTMP-Unterstützung, daher senden wir die FLV-Datei per HTTP.

Flash Player im clientseitigen Browser

Grundsätzlich sollte es jeder tun, aber aus irgendeinem Grund funktionierte es für mich nicht, JW Player zu konfigurieren. Die FLV-Datei wurde endlos auf den Client heruntergeladen und die Pufferung wurde nicht beendet. Das Timing lief aus und der Player wurde zum Flow-Player , wodurch dieses Problem verschwand.

Anpassung

Variablen

Um keine weiteren Reservierungen vorzunehmen, gehen wir davon aus, dass ich die Server-IP-Adresse 10.0.0.2, die Kameras 10.0.0.3, die Maske 255.0.0.0 und das Gateway 10.0.0.1 habe. Unter Linux arbeite ich als Benutzer user und führe alle erforderlichen Befehle über sudo aus .

Kameraeinstellung

Wir werden die Kamera über das Webinterface konfigurieren, die notwendigen Netzwerkparameter einstellen: IP-Adresse, Maske, Gateway, Uhrzeit einstellen. Wir müssen auch den Port angeben, über den die Kamera den RTSP-Stream sendet (Port 554 wird standardmäßig verwendet, ich habe ihn verlassen).

Im Abschnitt „Audio und Video“ legen wir die Eigenschaften des Videos fest, die wir benötigen. In jedem Fall können wir die Bitrate und Größe des Images später auf dem Server während der Konvertierung ändern, aber damit alles in Ordnung ist, geben wir hier sofort an. Wir werden MPEG4 640x480, 15 fps, 512 kb Bitrate verwenden.

Auch hier muss die RTSP-URL angegeben werden, diese Adresse wird bei der Aufnahme des Streams von der Kamera verwendet, wir müssen nur den Dateinamen angeben. Ich habe camera1.sdp eingegeben. Folglich ist der Stream unter rtsp: //10.0.0.3: 554 / camera1.sdp verfügbar

Server-Setup

Jedes Linux wird ausreichen, ich habe Debian Lenny verwendet. Erstellen Sie einen Ordner in der Heimat, in dem wir arbeiten werden:

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

Wir müssen die Codecs herunterladen, damit wir das Debian-Multimedia-Repository verbinden können:

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

Fügen Sie die Zeile zu /etc/apt/sources.list hinzu

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

Wir müssen viele Pakete installieren, bevor wir direkt zum VLC gehen. Ich habe versucht, alles hier aufzulisten, aber vielleicht reicht etwas nicht aus, in diesem Fall müssen die fehlenden geliefert werden.

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

Wir werden alles andere aus der Quelle einfügen, damit wir bestimmte Optionen aktivieren oder deaktivieren können. Beginnen wir mit der neuesten Version von ffmpeg:

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

Wenn Sie vorhaben, mit dem h264-Codec zu arbeiten, können Sie ffmpeg mit Optionen konfigurieren

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

Als nächstes benötigen wir die dringend benötigte Live555-Streaming-Medienbibliothek. Mithilfe dieser Bibliothek wird unser VLC-Player mit RTSP zusammenarbeiten.

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

Gehen Sie nun zum VLC-Player. Wir gehen auf http://download.videolan.org/pub/videolan/vlc/latest/ und schauen uns die neueste Version an. Danach pumpen wir die Quellen aus und entpacken sie. In meinem Fall sah es so aus:

  1. wget http: // download.videolan.org / pub / videolan / vlc / latest / vlc-1.1.0.tar.bz2 bzip2 -d vlc-1.1.0.tar.bz2 tar xvf . / vlc-1.1.0.tar cd vlc-1.1.0
  2. wget http: // download.videolan.org / pub / videolan / vlc / latest / vlc-1.1.0.tar.bz2 bzip2 -d vlc-1.1.0.tar.bz2 tar xvf . / vlc-1.1.0.tar cd vlc-1.1.0
  3. wget http: // download.videolan.org / pub / videolan / vlc / latest / vlc-1.1.0.tar.bz2 bzip2 -d vlc-1.1.0.tar.bz2 tar xvf . / vlc-1.1.0.tar cd vlc-1.1.0
  4. wget http: // download.videolan.org / pub / videolan / vlc / latest / vlc-1.1.0.tar.bz2 bzip2 -d vlc-1.1.0.tar.bz2 tar xvf . / vlc-1.1.0.tar cd vlc-1.1.0
Die VLC-Konfiguration ist der kreativste Teil, wir werden versuchen, es so zu gestalten, dass wir was und nichts mehr brauchen.
  1. . / configure --enable-release --enable-faad --disable-dbus --disable-hal \ --disable-remoteosd --disable-qt4 --disable-skins2 --disable-activex \ --disable-v4l2 --disable-libv4l2 --disable-x11 --disable-xvideo --disable-glx \ --disable-opengl --disable-visual --disable-nls --disable-mozilla \ --enable-realrtsp --enable-flac --disable-lua --prefix = / usr\ --with-live555-tree = / home / user / install / live --with-ffmpeg-tree = / home / user / install / ffmpeg
  2. . / configure --enable-release --enable-faad --disable-dbus --disable-hal \ --disable-remoteosd --disable-qt4 --disable-skins2 --disable-activex \ --disable-v4l2 --disable-libv4l2 --disable-x11 --disable-xvideo --disable-glx \ --disable-opengl --disable-visual --disable-nls --disable-mozilla \ --enable-realrtsp --enable-flac --disable-lua --prefix = / usr\ --with-live555-tree = / home / user / install / live --with-ffmpeg-tree = / home / user / install / ffmpeg
  3. . / configure --enable-release --enable-faad --disable-dbus --disable-hal \ --disable-remoteosd --disable-qt4 --disable-skins2 --disable-activex \ --disable-v4l2 --disable-libv4l2 --disable-x11 --disable-xvideo --disable-glx \ --disable-opengl --disable-visual --disable-nls --disable-mozilla \ --enable-realrtsp --enable-flac --disable-lua --prefix = / usr\ --with-live555-tree = / home / user / install / live --with-ffmpeg-tree = / home / user / install / ffmpeg
  4. . / configure --enable-release --enable-faad --disable-dbus --disable-hal \ --disable-remoteosd --disable-qt4 --disable-skins2 --disable-activex \ --disable-v4l2 --disable-libv4l2 --disable-x11 --disable-xvideo --disable-glx \ --disable-opengl --disable-visual --disable-nls --disable-mozilla \ --enable-realrtsp --enable-flac --disable-lua --prefix = / usr\ --with-live555-tree = / home / user / install / live --with-ffmpeg-tree = / home / user / install / ffmpeg
  5. . / configure --enable-release --enable-faad --disable-dbus --disable-hal \ --disable-remoteosd --disable-qt4 --disable-skins2 --disable-activex \ --disable-v4l2 --disable-libv4l2 --disable-x11 --disable-xvideo --disable-glx \ --disable-opengl --disable-visual --disable-nls --disable-mozilla \ --enable-realrtsp --enable-flac --disable-lua --prefix = / usr\ --with-live555-tree = / home / user / install / live --with-ffmpeg-tree = / home / user / install / ffmpeg
  6. . / configure --enable-release --enable-faad --disable-dbus --disable-hal \ --disable-remoteosd --disable-qt4 --disable-skins2 --disable-activex \ --disable-v4l2 --disable-libv4l2 --disable-x11 --disable-xvideo --disable-glx \ --disable-opengl --disable-visual --disable-nls --disable-mozilla \ --enable-realrtsp --enable-flac --disable-lua --prefix = / usr\ --with-live555-tree = / home / user / install / live --with-ffmpeg-tree = / home / user / install / ffmpeg

In der letzten Zeile geben wir die Pfade zu den Quellen ffmpeg und live555 an, mit denen wir in den vorherigen Schritten gearbeitet haben. Wenn Sie den Player unter root ausführen möchten , müssen Sie den Schlüssel --enable-run-as-root hinzufügen, wenn der Codec h264 --enable-x264 lautet

Als nächstes kompilieren und platzieren Sie den Player. Dieser Vorgang dauert lange. In meinem Fall fehlte ständig etwas zum Kompilieren. Ich habe versucht, alle erforderlichen Bibliotheken aufzulisten, aber auf jeden Fall kann sich alles von Version zu Version ändern. Achten Sie also auf Fehler und liefern Sie das, wonach es verlangt.

  1. make make install
  2. make make install

Nach Abschluss der Softwareinstallation müssen wir den Player nur noch mit den erforderlichen Parametern starten. Im Allgemeinen ist ein VLC-Player in seiner Flexibilität einzigartig.

Der Player arbeitet für uns in zwei simultanen Streams: Der erste empfängt das Video von der Kamera über RTSP, multiplext es in MPEG TS und sendet es an localhost: 8001, der zweite nimmt das Ergebnis von localhost: 8001, klemmt es, codiert es, packt es in den FLV-Container und sendet es per HTTP auf Port 8080. Erstellen Sie zwei Dateien, um diese Threads auszuführen:

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

In stream1.sh fügen wir die Zeilen ein:

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

Hier haben wir den Spieler darauf hingewiesen, was und wo er verlieren soll. Der Stream von der Kamera rtsp: //10.0.03: 554 / camera1.sdp wurde als Quelle ausgewählt, die Größe des Puffers wurde angegeben, und es war nicht sofort die erste Stufe, die unseren Film dumm machte ( --no-sout-audio ). Das Ergebnis wird von diesem Stream an die Adresse http://127.0.0.1:8001 gesendet. In stream2.sh fügen wir die folgenden Zeilen ein:

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

Der zweite Stream nimmt http://127.0.0.1:8001, hat einen eigenen Cache, klemmt ihn (vb-Bitrate, fps-fps) und verteilt ihn über HTTP auf Port 8080 als Datei view01.flv. Befinden sich auf dem Server mehrere Schnittstellen, können Sie in dst auch die spezifische IP-Adresse der Schnittstelle angeben, auf die Sie verteilen möchten.

Im industriellen Betrieb müssen Threads im Hintergrund und ohne Bezug zur Konsole gestartet werden. In unserem Beispiel werden sie in nur zwei Konsolen gestartet. VLC sollte den Puffer für eine Weile füllen und dann in den normalen Modus wechseln. Die Dauer des Füllens hängt von der Größe des Caches ab ( --rtsp-caching bzw. --http-caching ). Wir müssen eine Seite mit dem Player erstellen. Der Einfachheit halber werden wir dies auf demselben Server tun.

  1. apt-get install apache2
Player einrichten
  1. cd / var / www /

Laden Sie als Nächstes den Flow Player herunter. Auf der Website des Entwicklers befindet sich ein Einstellungsassistent, den Sie erst registrieren können. Ein Assistent ist unter http://flowplayer.org/setup/index.html verfügbar.

Da wir einen Live-Stream haben und die Kamera die aktuelle Uhrzeit direkt im Bild anzeigt, sollte der Player minimalistisch sein. Schalten Sie alles außer der Schaltfläche "Vollbild" aus, laden Sie den Player herunter und entpacken Sie den Inhalt des Archivs in den Ordner "/ var / www" auf unserem Server.

Um alles perfekt zu machen, habe ich die Dateien swf und js in player.swf bzw. player.js umbenannt. Ich würde nicht über diese Tatsache schreiben, wenn ich vergessen hätte, wie sie vorher genannt wurden. Deshalb werde ich im Text auch meine neuen Namen verwenden. Erstellen Sie also die HTML-Seite

  1. touch / var / www / index.html
Wir speichern den folgenden Text darin:
  1. < html >< head > < meta http-equiv = "content-type" content = "text/html; charset=UTF-8" >< script type = "text/javascript" src = "/player.js" >< / script > < title > Просмотр камеры 1 < / title > < / head > < body > < h1 > Камера № 1 < / h1 > < a href = "http://stream.kubsu.ru:8080/view01.flv" style = "display:block;width:520px;height:330px;margin:10px auto;" id = "player" > < / a > < script > flowplayer("player", "/player.swf"); < / script > < / body >< / html >
  2. < html >< head > < meta http-equiv = "content-type" content = "text/html; charset=UTF-8" >< script type = "text/javascript" src = "/player.js" >< / script > < title > Просмотр камеры 1 < / title > < / head > < body > < h1 > Камера № 1 < / h1 > < a href = "http://stream.kubsu.ru:8080/view01.flv" style = "display:block;width:520px;height:330px;margin:10px auto;" id = "player" > < / a > < script > flowplayer("player", "/player.swf"); < / script > < / body >< / html >
  3. < html >< head > < meta http-equiv = "content-type" content = "text/html; charset=UTF-8" >< script type = "text/javascript" src = "/player.js" >< / script > < title > Просмотр камеры 1 < / title > < / head > < body > < h1 > Камера № 1 < / h1 > < a href = "http://stream.kubsu.ru:8080/view01.flv" style = "display:block;width:520px;height:330px;margin:10px auto;" id = "player" > < / a > < script > flowplayer("player", "/player.swf"); < / script > < / body >< / html >
  4. < html >< head > < meta http-equiv = "content-type" content = "text/html; charset=UTF-8" >< script type = "text/javascript" src = "/player.js" >< / script > < title > Просмотр камеры 1 < / title > < / head > < body > < h1 > Камера № 1 < / h1 > < a href = "http://stream.kubsu.ru:8080/view01.flv" style = "display:block;width:520px;height:330px;margin:10px auto;" id = "player" > < / a > < script > flowplayer("player", "/player.swf"); < / script > < / body >< / html >
  5. < html >< head > < meta http-equiv = "content-type" content = "text/html; charset=UTF-8" >< script type = "text/javascript" src = "/player.js" >< / script > < title > Просмотр камеры 1 < / title > < / head > < body > < h1 > Камера № 1 < / h1 > < a href = "http://stream.kubsu.ru:8080/view01.flv" style = "display:block;width:520px;height:330px;margin:10px auto;" id = "player" > < / a > < script > flowplayer("player", "/player.swf"); < / script > < / body >< / html >
  6. < html >< head > < meta http-equiv = "content-type" content = "text/html; charset=UTF-8" >< script type = "text/javascript" src = "/player.js" >< / script > < title > Просмотр камеры 1 < / title > < / head > < body > < h1 > Камера № 1 < / h1 > < a href = "http://stream.kubsu.ru:8080/view01.flv" style = "display:block;width:520px;height:330px;margin:10px auto;" id = "player" > < / a > < script > flowplayer("player", "/player.swf"); < / script > < / body >< / html >
  7. < html >< head > < meta http-equiv = "content-type" content = "text/html; charset=UTF-8" >< script type = "text/javascript" src = "/player.js" >< / script > < title > Просмотр камеры 1 < / title > < / head > < body > < h1 > Камера № 1 < / h1 > < a href = "http://stream.kubsu.ru:8080/view01.flv" style = "display:block;width:520px;height:330px;margin:10px auto;" id = "player" > < / a > < script > flowplayer("player", "/player.swf"); < / script > < / body >< / html >
  8. < html >< head > < meta http-equiv = "content-type" content = "text/html; charset=UTF-8" >< script type = "text/javascript" src = "/player.js" >< / script > < title > Просмотр камеры 1 < / title > < / head > < body > < h1 > Камера № 1 < / h1 > < a href = "http://stream.kubsu.ru:8080/view01.flv" style = "display:block;width:520px;height:330px;margin:10px auto;" id = "player" > < / a > < script > flowplayer("player", "/player.swf"); < / script > < / body >< / html >
  9. < html >< head > < meta http-equiv = "content-type" content = "text/html; charset=UTF-8" >< script type = "text/javascript" src = "/player.js" >< / script > < title > Просмотр камеры 1 < / title > < / head > < body > < h1 > Камера № 1 < / h1 > < a href = "http://stream.kubsu.ru:8080/view01.flv" style = "display:block;width:520px;height:330px;margin:10px auto;" id = "player" > < / a > < script > flowplayer("player", "/player.swf"); < / script > < / body >< / html >
  10. < html >< head > < meta http-equiv = "content-type" content = "text/html; charset=UTF-8" >< script type = "text/javascript" src = "/player.js" >< / script > < title > Просмотр камеры 1 < / title > < / head > < body > < h1 > Камера № 1 < / h1 > < a href = "http://stream.kubsu.ru:8080/view01.flv" style = "display:block;width:520px;height:330px;margin:10px auto;" id = "player" > < / a > < script > flowplayer("player", "/player.swf"); < / script > < / body >< / html >
  11. < html >< head > < meta http-equiv = "content-type" content = "text/html; charset=UTF-8" >< script type = "text/javascript" src = "/player.js" >< / script > < title > Просмотр камеры 1 < / title > < / head > < body > < h1 > Камера № 1 < / h1 > < a href = "http://stream.kubsu.ru:8080/view01.flv" style = "display:block;width:520px;height:330px;margin:10px auto;" id = "player" > < / a > < script > flowplayer("player", "/player.swf"); < / script > < / body >< / html >
  12. < html >< head > < meta http-equiv = "content-type" content = "text/html; charset=UTF-8" >< script type = "text/javascript" src = "/player.js" >< / script > < title > Просмотр камеры 1 < / title > < / head > < body > < h1 > Камера № 1 < / h1 > < a href = "http://stream.kubsu.ru:8080/view01.flv" style = "display:block;width:520px;height:330px;margin:10px auto;" id = "player" > < / a > < script > flowplayer("player", "/player.swf"); < / script > < / body >< / html >
  13. < html >< head > < meta http-equiv = "content-type" content = "text/html; charset=UTF-8" >< script type = "text/javascript" src = "/player.js" >< / script > < title > Просмотр камеры 1 < / title > < / head > < body > < h1 > Камера № 1 < / h1 > < a href = "http://stream.kubsu.ru:8080/view01.flv" style = "display:block;width:520px;height:330px;margin:10px auto;" id = "player" > < / a > < script > flowplayer("player", "/player.swf"); < / script > < / body >< / html >
  14. < html >< head > < meta http-equiv = "content-type" content = "text/html; charset=UTF-8" >< script type = "text/javascript" src = "/player.js" >< / script > < title > Просмотр камеры 1 < / title > < / head > < body > < h1 > Камера № 1 < / h1 > < a href = "http://stream.kubsu.ru:8080/view01.flv" style = "display:block;width:520px;height:330px;margin:10px auto;" id = "player" > < / a > < script > flowplayer("player", "/player.swf"); < / script > < / body >< / html >
  15. < html >< head > < meta http-equiv = "content-type" content = "text/html; charset=UTF-8" >< script type = "text/javascript" src = "/player.js" >< / script > < title > Просмотр камеры 1 < / title > < / head > < body > < h1 > Камера № 1 < / h1 > < a href = "http://stream.kubsu.ru:8080/view01.flv" style = "display:block;width:520px;height:330px;margin:10px auto;" id = "player" > < / a > < script > flowplayer("player", "/player.swf"); < / script > < / body >< / html >

Alles ist fertig, gehen Sie zum Browser unter http://10.0.0.2/ und sehen Sie sich die Sendung an.