Webbrowser + MJPEG oplossing

[DennusB]

Hee allemaal,

Ik zit even met een probleempje waar ik zelf niet meer uitkom.
Op mijn werk maken we gebruik van Axis camera's, deze werken middels ActiveX of MPJEG.
Nou is MJPEG niet zo moeilijk en kan je gewoon op een pagina te krijgen door:

<img src="http://ip/mjpg/video.mjpg">

te doen. Geen enkel probleem.
Waarom wil ik dit?
We willen een overzicht maken van 4 camera's op 1 pagina.
Zodat je dus niet elke keer tussen tabs hoeft te wisselen op je pc.

Nu is het probleem er dat IE7 geen MJPEG support heeft, Chrome heeft het naar mijn idee ook niet(laad niet), Firefox heeft het wel(maar trekt zoveel geheugen dat hij na een tijdje op z'n bek gaat), en Opera kan er ook niet mee omgaan.

Hoe ga ik dit oplossen?
Het moet stabiel in een browser draaien, zijn er betere manieren om zo'n overzichtje te maken?
Google levert niks op qua MJPEG support, en ook niet voor Axis camera overzichten.

Ik hoop dat jullie mij een schop in de goede richting kunne geven

[LuckY]

Wat heeft een Webpagina met networking and servers te maken ?
kan je niet beter naar de Devschuur® gaan.
Tevens kan je Mjpeg ook naar avi converteren. Heb je trouwens ook verschillende pluggins gebruikt?

[DennusB]

LuckyY schreef op woensdag 04 februari 2009 @ 12:19:
Wat heeft een Webpagina met networking and servers te maken ?
kan je niet beter naar de Devschuur® gaan.
Tevens kan je Mjpeg ook naar avi converteren. Heb je trouwens ook verschillende pluggins gebruikt?

Het is een MJPEG stream he, die kan je denk ik moeilijk per client on the fly om gaan laten zetten naar een avi stream of niet ?

Welke plugins heb jij het over ?

[storeman]

Wellicht kun je met een flash applicatie de stream laden. Op die manier werkt het in de meeste browsers en wellicht is het geheugenmanagement ook beter zodat het niet meer zo traag wordt.

[DennusB]

storeman schreef op woensdag 04 februari 2009 @ 12:24:
Wellicht kun je met een flash applicatie de stream laden. Op die manier werkt het in de meeste browsers en wellicht is het geheugenmanagement ook beter zodat het niet meer zo traag wordt.

Zou inderdaad een oplossing zijn.
Probleem is alleen dat ik een drama in flash ben
Zijn er misschien mensen die me hierbij op weg kunnen helpen?

[Rolfie]

Misschien zeg ik iets stoms, maar 4 frames?

[DennusB]

Rolfie schreef op woensdag 04 februari 2009 @ 13:02:
Misschien zeg ik iets stoms, maar 4 frames?

Ja dat is het probleem ook niet, het staat nu op 1 pagina.
Maar het trekt zo enorm veel processor-kracht & geheugen, dat firefox elke keer ervan op z'n bek gaat
Daar moet ik dus vanaf juist

[antonboonstra]

DennusB schreef op woensdag 04 februari 2009 @ 10:05:
Hee allemaal,

Ik zit even met een probleempje waar ik zelf niet meer uitkom.
Op mijn werk maken we gebruik van Axis camera's, deze werken middels ActiveX of MPJEG.
Nou is MJPEG niet zo moeilijk en kan je gewoon op een pagina te krijgen door:

[...]

te doen. Geen enkel probleem.
Waarom wil ik dit?
We willen een overzicht maken van 4 camera's op 1 pagina.
Zodat je dus niet elke keer tussen tabs hoeft te wisselen op je pc.

Nu is het probleem er dat IE7 geen MJPEG support heeft, Chrome heeft het naar mijn idee ook niet(laad niet), Firefox heeft het wel(maar trekt zoveel geheugen dat hij na een tijdje op z'n bek gaat), en Opera kan er ook niet mee omgaan.

Hoe ga ik dit oplossen?
Het moet stabiel in een browser draaien, zijn er betere manieren om zo'n overzichtje te maken?
Google levert niks op qua MJPEG support, en ook niet voor Axis camera overzichten.

Ik hoop dat jullie mij een schop in de goede richting kunne geven

Ik weet dat je uit Axis camera's ook een snapshot kan halen (http://ipadres/axis-cgi/jpg/image.cgi?resolution=320x240). Je zou met een javascript deze afbeeldingen om de seconde oid kunnen laten ophalen. Heb je alleen geen vloeiende beelden meer.

[DennusB]

antonboonstra schreef op woensdag 04 februari 2009 @ 13:08:
[...]


Ik weet dat je uit Axis camera's ook een snapshot kan halen (http://ipadres/axis-cgi/jpg/image.cgi?resolution=320x240). Je zou met een javascript deze afbeeldingen om de seconde oid kunnen laten ophalen. Heb je alleen geen vloeiende beelden meer.

Ja klopt, en dat vloeiende is juist net een eis
Ja ik weet het, we zijn moeilijk hier

[antonboonstra]

DennusB schreef op woensdag 04 februari 2009 @ 13:10:
[...]


Ja klopt, en dat vloeiende is juist net een eis
Ja ik weet het, we zijn moeilijk hier

In de camera zelf staat ook een prima uitleg. Deze heb je al gezien? Heb 'm getest met IE en Firefox en werkt beide perfect. Zolang je geen volledige resolutie doorstuurt, zou Firefox niet moeten crashen.

HTML:

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

// 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 = "320";
var DisplayHeight = "240";

// This is the path to the image generating file inside the camera itself
var File = "axis-cgi/mjpg/video.cgi?resolution=320x240";
// 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=4,1,5,5">';
  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">';
  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>

[DennusB]

antonboonstra schreef op woensdag 04 februari 2009 @ 13:18:
[...]

In de camera zelf staat ook een prima uitleg. Deze heb je al gezien? Heb 'm getest met IE en Firefox en werkt beide perfect. Zolang je geen volledige resolutie doorstuurt, zou Firefox niet moeten crashen.

HTML:

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

// 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 = "320";
var DisplayHeight = "240";

// This is the path to the image generating file inside the camera itself
var File = "axis-cgi/mjpg/video.cgi?resolution=320x240";
// 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=4,1,5,5">';
  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">';
  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>

Ja die code werkt, alleen het probleem is dan dat hij bij elke camera om een wachtwoord blijft vragen
En het oplossen door http://iets:nerd@ip/ werkt dus niet

[antonboonstra]

DennusB schreef op woensdag 04 februari 2009 @ 13:36:
[...]

Ja die code werkt, alleen het probleem is dan dat hij bij elke camera om een wachtwoord blijft vragen
En het oplossen door http://iets:nerd@ip/ werkt dus niet

Basic Configuration -> 1. Users -> Enable anonymous viewer login (no user name or password required)

[DennusB]

antonboonstra schreef op woensdag 04 februari 2009 @ 14:16:
[...]


Basic Configuration -> 1. Users -> Enable anonymous viewer login (no user name or password required)

Ja en als we nou is niet willen dat iedereen er zomaar inkan?
Er zit niet voor niks een wachtwoord op hier

[antonboonstra]

DennusB schreef op woensdag 04 februari 2009 @ 14:22:
[...]

Ja en als we nou is niet willen dat iedereen er zomaar inkan?
Er zit niet voor niks een wachtwoord op hier

Het wachtwoord voor admin taken blijft. Je krijgt als anonieme gebruiker alleen kijkrechten op de videobeelden.

[DennusB]

antonboonstra schreef op woensdag 04 februari 2009 @ 14:41:
[...]


Het wachtwoord voor admin taken blijft. Je krijgt als anonieme gebruiker alleen kijkrechten op de videobeelden.

Dat weet ik, maar dat is juist niet de bedoeling.
Helaas, anders had ik het zo ook zelf opgelost

[DGTL_Magician]

DennusB schreef op woensdag 04 februari 2009 @ 14:22:
[...]


Ja en als we nou is niet willen dat iedereen er zomaar inkan?
Er zit niet voor niks een wachtwoord op hier

Ik zou je camera beelden sowieso in een apart VLAN stoppen waar alleen mensen heen kunnen routen die toegang hebben.

[DennusB]

DGTL_Magician schreef op woensdag 04 februari 2009 @ 14:58:
[...]

Ik zou je camera beelden sowieso in een apart VLAN stoppen waar alleen mensen heen kunnen routen die toegang hebben.

Haha wordt het nog leuker, dat was een wens inderdaad.
Helaas ondersteunen onze routers geen VLANS

[alt-92]

DennusB schreef op woensdag 04 februari 2009 @ 15:06:
[...]

Helaas ondersteunen onze routers geen VLANS

Dan koop je die?
En als alternatief stop je er een ip ACL voor.
Kan zelfs door je webpagina op een webserver te planten waar je dat op instelt (IIS heeft dat, Apache, noem maar op.

[ Voor 20% gewijzigd door alt-92 op 04-02-2009 17:55 ]

[Verwijderd]

Modbreak:

Please, laten we geen RTFM, letmegooglethatforyou replies gaan plaatsen.. Laten we het gezellig houden..

[ Voor 77% gewijzigd door Equator op 04-02-2009 18:50 ]

[Equator]

Beste DennusB, wat heeft een webpagina in hemelsnaam te maken met PNS

Iets dergelijk had in de devschuur gemoeten of zo. Maar ik denk dat ze daar ook wat meer inzet verwachten van de topicstarter.
Maar goed, je hebt een aantal schoppen in de juiste richting gehad, laten we het daar bij houden.

Suc6 met je webpagina