nicht angemeldet
AXIS M1031-W Network Camera (nur Stream in HTML einbinden)
Hallo zusammen,
ich habe zwei Axis Netzwerkkameras (M1031-W) die mir einen H.264-Stream liefern. Ich möchte eine einfach HTML-Seite erstellen, die mir nur die zwei Streams nebeneinander darstellt, um eine Übersicht zu erstellen.
Ich habe dies bereits mit einer AXIS 205 Network Camera geschafft, mit der neuen (M1031-W) habe ich da so meine probleme.
Für den H.264-Stream gibt es unterschiedliche Methoden diesen einzubinden, ich bevorzuge die Java oder ActiveX Variante da diese IE kompatibel ist (ist hierfür wichtig).
Am besten ich kopier hier mal den Code für meine jetzige Übersicht, für das Modell AXIS 205:
<html>
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<title>CAM-Übersicht</title>
[code lang=javascript]
<script language="JavaScript" type="text/javascript"><!--
function launch(url) {
var w = 480, h = 340;
if (document.all) {
/* the following is only available after onLoad */
w = document.body.clientWidth;
h = document.body.clientHeight;
}
else if (document.layers) {
w = window.innerWidth;
h = window.innerHeight;
}
var popW = 465, popH = 570;
var leftPos = (w-popW)/2, topPos = (h-popH)/2;
self.name = "opener";
remote = open(url, "helpWin", "resizable,scrollbars,status,width=" + popW + ",height="+popH+",left="+leftPos+",top="+topPos+"");
}
function openPopUp(thePage, theName, theWidth, theHeight)
{
var someFeatures = 'scrollbars=yes,toolbar=0,location=no,directories=0,status=0,menubar=0,resizable=1,width=' + theWidth + ',height=' + theHeight;
var aPopUpWin = window.open(thePage, theName, someFeatures);
if (navigator.appName == "Netscape") {
aPopUpWin.focus();
}
}
function showStatus(msg)
{
window.status = msg
return true
}
// -->
</script>
<script language="JavaScript">
<!--
function CSS ()
{
if ((navigator.appVersion.indexOf("Mac") != -1) && (navigator.appName.indexOf("Netscape") != -1)) {
document.write('<link rel="stylesheet" href="/language/css/mac_ns.css" type="text/css">');
} else if ((navigator.appVersion.indexOf("Mac") != -1) && (navigator.appName.indexOf("Microsoft Internet Explorer") != -1)) {
document.write('<link rel="stylesheet" href="/language/css/mac_ie.css" type="text/css">');
} else if ((navigator.appVersion.indexOf("Win") != -1) && (navigator.appName.indexOf("Netscape") != -1)) {
document.write('<link rel="stylesheet" href="/language/css/win_ns.css" type="text/css">');
} else if ((navigator.appVersion.indexOf("Win") != -1) && (navigator.appName.indexOf("Microsoft Internet Explorer") != -1)) {
document.write('<link rel="stylesheet" href="/language/css/win_ie.css" type="text/css">');
} else {
document.write('<link rel="stylesheet" href="/language/css/other.css" type="text/css">');
}
}
// -->
</script>
<script language="JavaScript" type="text/javascript"><!--
CSS ();
// -->
</script>
<script language="JavaScript" type="text/javascript">
<!--
function SubmitForm()
{
document.WizardForm.submit();
}
// -->
</script>
<!-- END GLOBAL JAVASCRIPTS -->
<SCRIPT LANGUAGE="JavaScript">
<!--
function zoom(size)
{
var url = document.URL
if (url.indexOf("size=") != -1)
url = url.substring(0, url.indexOf("size=")-1)
if (url.indexOf("?") == -1)
url += '?'
else
url += '&'
document.location = url + 'size=' + size
}
function snapshot(imagepath)
{
var picturepath = imagepath.replace(/video/, "image")
picturepath = picturepath.replace(/mjpg/g, "jpg")
var page = 'snapshot.shtml?picturepath=' + picturepath
openPopUp(page, 'Take_snapshot', 640, 480)
}
<!--
function DrawAMC(height, width, imagepath, CLSID_AMC, ver_AMC, ShowAMCToolbar, ptzgui, useWithCam, camnbr, UseRel, UseMotion)
{
document.write('<OBJECT ID="Player" height="' + height + '" width="' + width + '" border="0" CLASSID="CLSID:' + CLSID_AMC + '" CODEBASE="/activex/AMC.cab#version=' + ver_AMC + '" STANDBY="Loading Axis Media Control components...">');
document.write('<param name="MediaURL" value="' + imagepath + '">');
document.write('<param name="MediaType" value="mjpeg-unicast">');
document.write('<param name="ShowStatusBar" value="0">');
document.write('<param name="ShowToolbar"');
if(ShowAMCToolbar == "yes")
{
document.write('value="1">');
} else {
document.write('value="0">');
}
document.write('<param name="AutoStart" value="1">');
document.write('<param name="StretchToFit" value="1">');
if(ShowAMCToolbar == "yes")
{
document.write('<param name="ToolbarConfiguration" value="play,+snapshot,+fullscreen">');
}
if((ptzgui == "yes") && (useWithCam == "yes"))
{
document.write('<param name="PTZControlURL" value="/axis-cgi/com/ptz.cgi?camera=' + camnbr + '">');
document.write('<param name="UIMode"');
if(UseRel == "yes")
{
document.write('value="ptz-relative">');
} else {
document.write('value="ptz-absolute">');
}
}
if(UseMotion == "yes")
{
document.write('<param name="UIMode" value="MDConfig">');
document.write('<param name="MotionConfigURL" value="/axis-cgi/operator/param.cgi?ImageSource=' + [camnbr - 1] + '">');
document.write('<param name="MotionDataURL" value="/axis-cgi/motion/motiondata.cgi">');
}
document.write('</OBJECT>');
}
//-->
function video(imagepath)
{
var height = 240
var width = 320
var picturepath = imagepath.replace(/video/, "image")
picturepath = picturepath.replace(/mjpg/g, "jpg")
if ('1' != '1') {
width = width*1
height = height*1
}
if ((navigator.appName == "Microsoft Internet Explorer")&&(navigator.platform != "MacPPC")&&(navigator.platform != "Mac68k")) {
DrawAMC(height, width, imagepath, "745395C8-D0E1-4227-8586-624CA9A10A8D", "2,0,21,0", "", "", "", "", "", "no");
} else {
theDate = new Date();
var output = '<img SRC="' + imagepath + '"width="' + width + '"height="' + height +'" width="' + width;
output += '" border=0 ALT="If no image is displayed, there might be too many viewers, or the browser configuration may have to be changed. See help for detailed instructions on how to do this." width=' + width + ' height=' + height +' width=' + width + '>';
document.write(output);
}
}
// -->
</SCRIPT>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
video("http://IP_CAM_1/mjpg/video.mjpg")
// -->
</SCRIPT>
<br />~~~javascript
<SCRIPT LANGUAGE="JavaScript">
<!--
video("http://IP_CAM_2/mjpg/video.mjpg")
// -->
</SCRIPT>
</body>
</html>
[/code]
Nun der Code, der neuen Kamera (M1031-W) (leider etwas lang, deswegen extern verlinkt), dies ist allerdings der Code vom Kamerainterface (ich will ja nur Stream haben):
[http://www.nopaste.nl/?paste=1717](http://www.nopaste.nl/?paste=1717)
Falls ihr weitere Informationen braucht, schreibt einfach! Ich hoffe mir kann jemand helfen und ihr habt verstanden was ich vor habe!
Vielen Dank!
-
Moin Moin!
Falls ihr weitere Informationen braucht, schreibt einfach! Ich hoffe mir kann jemand helfen und ihr habt verstanden was ich vor habe!
Dir ist bewußt, dass SelfHTML kein Code-Writing-Service ist?
Such dir in den Web-Interfaces der betroffenen Kameras die Seite, die Dir den Stream für diese eine Kamera so darstellt wie gewünscht. Kopiere die Seite, werfe allen unnötigen Kram weg, bis Du eine Minimallösung für das Betrachten des Streams einer bestimmten Kamera hast. Wiederhole das für alle anderen Kameratypen. Füge die Minimallösungen zu einer Seite zusammen, so dass eine Seite alle Streams anzeigt. Füge CSS hinzu, um ein Layout zu bekommen.
Alexander
--
Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so".