Webcam Videostream im Dashboard

Hallo Forum,

ich möchte gerne einen Videostream von meiner Webcam in meine Dashboard Oberfläche einbinden. Die URL meines streams habe ich mit Firebug (Danke Werner) herausgefunden. Sie lautet: http://<kamera_ip>/video2.mjpg

Wenn ich im Firefox diese URL eingebe, erscheint tatsächlich auch eine Webpage mit nur diesem angezeigten Stream drauf.

Ich habe dann im Dashboard ein Panel mit Webbrowser eingerichtet und als URL eben genau diese URL eingerichtet, intervall 0, muss ja nur einmal geladen werden.

Leider versucht aber jetzt der IPS Webbrowser das „File“ downzuloaen und bleibt bei 0% hägen, er scheint nicht zu erkennen, dass es sich um einen stream handelt.

Mache ich etwas falsch?

Welche anderen Möglichkeiten gibt es den Stream in IPS und das Dahsboard zu bekommen.

wupperi

Der Webbrowser im Dashboard ist der Internet Explorer. Den musst Du dazu bekommen, dass er die Seite anzeigt, nicht den Firefox.

aus Wikipedia:

Häufig genutzte Clients zur Darstellung von M-JPEG Streams sind übliche Webbrowser wie zum Beispiel Firefox. Zur Zeit unterstützt der Internet Explorer keine M-JPEG Streams. Für diesen populären Browser existieren Lösungen wie zum Beispiel Java-Applets.

Na super, und wie kriege ich jetzt ein Java applet in mein Dashboard?
Gibts vieleicht eine andere Möglichkeit, das Bild ins Dahsboard zu bekommen? Die Kamera unterstützt auch einen RTSP Stream.

Kannst Du anstelle des Streams nicht in kurzen Intervallen einzelne Bilder in den Mediapool schieben?

Das ist eher unschön, permanent HDD Aktivität.
Ausserdem ist die Kamera so eingestellt, dass Sie nur bei Bewegungserkennung Bilder auf einen Share schreibt. Diese Funktionalität wäre dann auch futsch…

Ich würde schon gerne den Stream nutzen.

Hi wupperi

Leider wirst Du nicht um ein Applet herumkommen wenn Du ein Livestream im Dashboard darstellen moechtest.

Ich habe in meinem Fall fuer jede Kamera eine eigene kleine Html Seite angelegt die das Applet fuer den Livestream aufruft. Diese Seite liegt bei mir auf jedem Client in einem lokalen Ordner. Ueber das WebPage Control kannst Du es dann ins Dashboard mit einbinden.

Nun aber das eigentliche Problem… Wie greift man auf das Applet zu ?

In einem anderem Post habe ich dazu etwas geschrieben -> http://www.ip-symcon.de/forum/f18/webfront-modul-external-page-8031/

Es gibt leider keinen einheitlichen Standard fuer die Applets. Die grossen Hersteller arbeiten daran, aber zur Zeit kocht jeder seine eigene Suppe.

Hier mal ein Beispiel wie es bei einer AXIS Kamera aussieht:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>

<body>
<SCRIPT LANGUAGE="JavaScript">
// Set the BaseURL to the URL of your camera
var BaseURL = "http://192.168.0.90/";

// DisplayWidth & DisplayHeight specifies the displayed width & height of the image.
// You may change these numbers, the effect will be a stretched or a shrunk image
var DisplayWidth = "352";
var DisplayHeight = "288";

// This is the path to the image generating file inside the camera itself
var File = "axis-cgi/mjpg/video.cgi?resolution=CIF&camera=1";
// No changes required below this point
var output = "";
if ((navigator.appName == "Microsoft Internet Explorer") &&
   (navigator.platform != "MacPPC") && (navigator.platform != "Mac68k"))
{
  // If Internet Explorer under Windows then use ActiveX 
  output  = '<OBJECT ID="Player" width='
  output += DisplayWidth;
  output += ' height=';
  output += DisplayHeight;
  output += ' CLASSID="CLSID:DE625294-70E6-45ED-B895-CFFA13AEB044" ';
  output += 'CODEBASE="';
  output += BaseURL;
  output += 'activex/AMC.cab#version=5,2,13,12">';
  output += '<PARAM NAME="MediaURL" VALUE="';
  output += BaseURL;
  output += File + '">';
  output += '<param name="MediaType" value="mjpeg-unicast">';
  output += '<param name="ShowStatusBar" value="0">';
  output += '<param name="ShowToolbar" value="0">';
  output += '<param name="AutoStart" value="1">';
  output += '<param name="StretchToFit" value="1">';
  // Remove the // for the ptz settings below to use the code for click-in-image. 
     //  output += '<param name="PTZControlURL" value="';
     //  output += BaseURL;
     //  output += '/axis-cgi/com/ptz.cgi?camera=1">';
     //  output += '<param name="UIMode" value="ptz-relative">'; // or "ptz-absolute"
  output += '<BR><B>Axis Media Control</B><BR>';
  output += 'The AXIS Media Control, which enables you ';
  output += 'to view live image streams in Microsoft Internet';
  output += ' Explorer, could not be registered on your computer.';
  output += '<BR></OBJECT>';
} else {
  // If not IE for Windows use the browser itself to display
  theDate = new Date();
  output  = '<IMG SRC="';
  output += BaseURL;
  output += File;
  output += '&dummy=' + theDate.getTime().toString(10);
  output += '" HEIGHT="';
  output += DisplayHeight;
  output += '" WIDTH="';
  output += DisplayWidth;
  output += '" ALT="Camera Image">';
}
document.write(output);
document.Player.ToolbarConfiguration = "play,+snapshot,+fullscreen"

// Remove the // below to use the code for Motion Detection. 
  // document.Player.UIMode = "MDConfig";
  // document.Player.MotionConfigURL = "/axis-cgi/operator/param.cgi?ImageSource=0"
  // document.Player.MotionDataURL = "/axis-cgi/motion/motiondata.cgi";
</SCRIPT>
</body>
</html>

und hier das Beispiel einer Zavio Kamera aus Taiwan:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>F312A</title>
</head>

<body scroll=no>
<div align="center">
<script type="text/JavaScript">
<!--
//ActiveX Object Defines
var AXOBJECT_ID = "AxVideoView";
var AXOBJECT_PATH = "AxViewer/";
var AXOBJECT_NAME = "AxVideoView.cab";
var AXOBJECT_VER = "1,2,4,53";
var CLASS_ID = "0C71BDAA-5B30-4E12-A317-D225FEB9A068";
var Host_IP = "192.168.0.90";
var Http_Port = "80";
var USER_NAME = "password";
var PASSWORD = "password";
                        
//Video Stream Defines
var PROTOCOL_TYPE = "1"; //(client PC connection protocol) 1->TCP, 2->UDP, 3->HTTP 4->Multicast,
//default connect order  Multicast->TCP->UDP->HTTP
var MPEG4_ACCESS_NAME = "video.mp4"; 
var MJPEG_ACCESS_NAME = "video.mjpg";
var MULTICAST_ACCESS_NAME = "multicast.mp4";
var RECORDER_SUPPORT = "0"; //1->on, 0->off
var VIDEO_FMT=0;    // video format 1->MPEG4, 0->MJPEG
var PLUGIN_LANG="en-US"  //"da-DK", "de-DE", "el-GR", "en-US", "es-ES", "ja-JP", "ko-KR", "zh-CN", or "zh-TW"
var INITMODE = "Normal"; //"Normal", "Player", "MotionDetect", or "PrivateMask"
var width=320;
var height=240;
function Viewer()
{
document.open();
document.write("<OBJECT NAME=\"" + AXOBJECT_ID + "\"");
document.write(" CLASSID=CLSID:" + CLASS_ID);
document.write(" CODEBASE=\"" + (AXOBJECT_PATH + AXOBJECT_NAME) + "#version=" + AXOBJECT_VER + "\" width=" + width + " height=" + height + ">");
document.write("    <PARAM name=\"HostIP\" VALUE=\"" + Host_IP + "\">");
document.write("    <PARAM name=\"HttpPort\" VALUE=\"" + Http_Port + "\">");
document.write("    <PARAM name=\"Protocol\" VALUE=\"" + PROTOCOL_TYPE + "\">");
document.write("    <PARAM name=\"Mpeg4Name\" VALUE=\"" + MPEG4_ACCESS_NAME + "\">");
document.write("    <PARAM name=\"MjpegName\" VALUE=\"" + MJPEG_ACCESS_NAME + "\">");
document.write("    <PARAM name=\"MulticastName\" VALUE=\"" + MULTICAST_ACCESS_NAME + "\">");
document.write("	<PARAM name='InitMode' VALUE=\"" + INITMODE + "\">");
 //document.write("	<PARAM name='ViewSize'  VALUE=\"" + VIEW_SIZE + "\">");
document.write("    <PARAM name=\"CompressType\" VALUE=\"" + VIDEO_FMT + "\">");
document.write("    <PARAM name=\"Language\" VALUE=\"" + PLUGIN_LANG + "\">");
document.write("    <PARAM name=\"RecorderEn\" VALUE=\"" + RECORDER_SUPPORT + "\">");
document.write("    <PARAM name=\"UserName\" VALUE=\"" + USER_NAME + "\">");
document.write("    <PARAM name=\"Password\" VALUE=\"" + PASSWORD + "\">");
document.write("</OBJECT>");
document.close();
videoPlay()
}
function Cam()
{
if(opener) {
Host_IP =opener.document.getElementById('url').value;
Http_Port = opener.document.getElementById('port').value;
USER_NAME = opener.document.getElementById('userName').value;
PASSWORD = opener.document.getElementById('password').value;
VIDEO_FMT = opener.document.getElementById('videoFmt').value;
INITMODE = opener.document.getElementById('initMode').value;
width=opener.document.getElementById('width').value;
height=opener.document.getElementById('height').value;
}
Viewer();
}
function videoPlay()
{
if(AxVideoView.InitMode)
{
AxVideoView.AVConnect(1);
AxVideoView.VideoStart(1);
AxVideoView.AudioStart(0);
AxVideoView.TalkEnable(0);
}
}
function videoStop()
{
if(AxVideoView.InitMode)
{
AxVideoView.AVConnect(0);
AxVideoView.VideoStart(0);
AxVideoView.AudioStart(0);
AxVideoView.TalkEnable(0);
}
}
function onunload()
{
videoStop();
}
function fullScreen()
{
AxVideoView.SetFullScreen(1);
}
                        //-->
</script>
<script>Cam()</script>
</div>
</body>
</html>

Wie Du siehst nicht besonders identisch. :frowning:

Es besteht eigentlich nur die Moeglichkeit den Hersteller anzuschreiben und zu fragen ob es eine SDK Beschreibung am Besten mit Beispielen gibt. Die Frage ist bloss ob sie die dann rausruecken.

Axis als Vorbild z.B. generiert Dir den Code direkt im Webbrowser der Kamera. Einfach copy & paste in eine Html Seite und es funzt. Tja aber leider sind nur wenige so vorbildlich.

Tja Livestream ist nicht gleich Livestream… aber vielleicht bald.

Eventuell als Alternative. Webcam XP pro. Dieses Programm generiert auch Code. Der Link ist hier irgendwo verstreut :rolleyes:

Wenn Du ihn nicht findest meld dich noch mal.

Hallo RWN (Rainer?), danke für den Tip, habe ich auf einem meiner Clients installiert, aber wie genau soll mir das helfen?

@bolzebruce: Grüsse in die Wüste :slight_smile:
Schau mal unter VIVOTEK - SDK
Wenn ich die High Levels downloade, kannst Du was damit anfangen?

Du kannst die Kamera dort einbinden und dir den Code erzeugen lassen.

@wupperi
yep denke schon. :smiley:

Kann sogar mal morgen im Buero schauen, da einige unserer neuen Kameras OEM von Vivotek sind. Mal sehen vielleicht bekommen ich den Applet Aufruf so raus.

Sonntag Buero ?? Nicht wundern Wochenende ist hier Freitags und Samstag. Wenn Ihr schoen alle Formel 1 schaut bin ich am schufften :frowning:

Mensch, das würde mir ja super helfen.
Ich weiss, dass Ihr Sonntags ran müsste, allerdings ist bei den meisten ja auch Donnerstag Abends Schluss…

Ich habe übrigens einen Weg gefunden, einen mpeg4 stream mittels Quicktime aus einer webseite heraus zu öffnen:

<object classid=„clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b“ width=„320“ height=„280“ codebase="http://www.apple.com/qtactivex/qtplugin.cab>
<http://www.apple.com/qtactivex/qtplugin.cab> ";>
<param name=„src“ value=„sample.qtif“>
<param name=„autoplay“ value=„true“>
<param name=„qtsrc“ value=„rtsp://a.b.c.d/live2.sdp“;>
<embed src=„sample.qtif“ width=„320“ height=„280“ autoplay=„true“ qtsrc=„rtsp://a.b.c.d/live2.sdp“; pluginspage="http://www.apple.com/quicktime/download/>
<http://www.apple.com/quicktime/download/> ";>
</embed>
</object>

Das ist zwar nicht so schön wie ein eigenes Applet, aber es geht zumindest.
@Bolzebruce: Soll ich Dir die SDK files per mail senden, oder downloadest Du sie selber? Falls ich senden soll bitte PN mit Deiner mailadresse.

@wupperi

Na bitte da hast Du ja eigentlich schon alles. Das was zwischen den Tags OBJECT steht ist ja Dein kameraspezifisches Applet, halt fuer MPEG4. Die meisten MPEG4 nutzen Quick Time oder Java. Es hat vor und Nachteile.

Nachteile:

  • Man muss QuickTime installiert haben (je nach Kamera)
  • Funktioniert nicht mit jedem Browser (abhaengig wie gut das ActiveX ist)

Vorteile:

  • MPEG4 ist wesentlich schmallbandiger als MJPEG, da bei MJPEG jedes volles Bild uebertragen wird. Bei MPEG4 nur die sogenannten P Frames und dazwischen nur die Aenderungen im Bild.
  • Wenn die Kamera Audio unterstuetzt muesstest Du es hoeren, geht bei MJPEG nicht.

Warte mal mit der SDK. Schaue morgen erst einmal am Liveobjekt im Buero.

Poste dann wieder hier.

29.8 Grad warme und sandige Gruesse (22:22 Uhr local time):cool:

Hallo Bolzebruce, schon was rausbekommen? Das Quicktime läuft nämlich auf allen Clients, nur nicht auf dem wichtigsten, meinem Panel-PC. Siehe: http://www.ip-symcon.de/forum/project.php?issueid=522

Hi wupperi

Ups… Eigentlich hatte ich gestern Abend noch eine Antwort geschrieben, aber irgendwie ist die abhanden gekommen, oder ich habe tatsaechlich vergessen auf antworten zu druecken. :frowning:

Ich hatte mir die SDK mal bei denen runtergeladen. Die tiefgruendige SDK kann man nur herunterladen wenn man ein NDA unterschreibt.

Also noch einmal. Lade Dir bitte mal die SDK VitaminCtrl runter. Im Ordner „bin“ liegt eine Decoder Exe, die das ActiveX installiert. Im Ordner doc ist eine PDF, wo auch ein Beispiel drin ist fuer die Einbindung in einer HTML Seite. Wenn Du das ActiveX installierst (habe ich noch nicht gemacht) soll auch eine html als Beispiel drinliegen.

Zitat Vivotek Webseite:

You can visit our web site then register in the left side and visit Support->SDK to download 2000/3000/6000/7000 ActiveX SDK VitaminCtrl. The SDK includes software in VitaminCtrl\lib\VitaminDecoder, which can be installed on your PC. Installation program contains ActiveX control (.dll), the cab file, the sample page to host the cab file. There should be example HTML code for your reference.

Kann es leider nicht mailen oder hochladen, da zu gross.

Schaue aber immer noch ob es noch einen anderen Weg gibt.

Ok, klappt. Die haben aber glaube ich Height und Width vertauscht…Naja. :slight_smile:
Du schriebst, dass Du Vivotek OEMs hast, was sind das für Kamera’s, unter welchem Handelsnamen laufen die. Oder sind das Whitelabels, die Du selber an den Mann bringst?

Freut mich das es klappt. :cool:

Ein Beispiel findest Du z.B. in der folgenden Kamera: IP Cameras & Domes

Ich selber spiele privat mit Kameras von Y-Cam, AXIS und Zavio rum, wobei natuerlich AXIS mit am Besten, aber auch am teuersten sind. Die anderen sind aber kraeftig am nachziehen.

Fuer ein anderes Projekt bin ich gerade dabei bezueglich Kameras etwas eigenes auf die Beine zu stellen. Wird aber wohl noch ein bisserl dauern… Weisst ja in der arabischen Welt geht halt manches sehr schnell und anderes eher langsam. Hier braucht man fuer 4 Jahre fuer eine 50km lange Metro und in Berlin 13-14 Jahre fuer 1,5km.:smiley: