AXIS M1031-W Network Camera (nur Stream in HTML einbinden) von networx, 25.02.2010 10:12

AXIS M1031-W Network Camera (nur Stream in HTML einbinden)

networx 25.02.2010 10:12

multimedia (audio & video)

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-&Uuml;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

  
[/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!

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

networx: AXIS M1031-W Network Camera (nur Stream in HTML einbinden)

Beitrag lesen

AXIS M1031-W Network Camera (nur Stream in HTML einbinden)

AXIS M1031-W Network Camera (nur Stream in HTML einbinden)