FHEM Forum

FHEM => Anfängerfragen => Thema gestartet von: ext23 am 08 Februar 2014, 13:04:15

Titel: Webcam Motion JPEG Stream einbinden
Beitrag von: ext23 am 08 Februar 2014, 13:04:15
Hallo,

ich hab eine Überwachungskamera mit einem MJPEG fähigen USB Grabber an meinem Server angeschlossen. Mit der Software Motion biete ich diesen Stream über einen Netzwerk Port an. (Aus Sicherheit um den direkten Zugriff auf Motion zu unterbinden habe ich einen PHP proxy zwischen, also ein PHP script was das einfach nur umsetzt. Beispiel:
    fwrite( $fp, "GET /?action=stream HTTP/1.0\r\n\r\n" );
    while( $str = trim( fgets( $fp, 4096 ) ) )header( $str );
    fpassthru( $fp );
    fclose( $fp );


Ich gehe mal davon aus, dass jede IPCam out of the box mittlerweile mjpeg streams sendet oder setzen die meisten da auf Java?!?

So jetzt würde ich das Bild allerdings auf in FHEM einbinden, was ich jetzt als IFrame gemacht habe. Das dumme ist nur, dass die meisten Android Browser kein MJpeg verstehen und anzeigen können. Was kann man denn da noch machen? Hat einer ein Idee? Das Cam Modul von FHEM zeigt nur snapshots an aber keinen Stream wenn ich das richtig verstanden habe. Und ein sekündlicher Bildaufbau sieht vermutlich nicht so toll aus, auch bezogen auf das "Flackern" beim Aufbau.

Gibt es da schon gescheite Lösungen? Zum Thema Webcam finde ich hier noch nicht all zu viel in dem Forum.

Gruß und Danke für Hilfreiche Tipps.
Daniel
Titel: Antw:Webcam Motion JPEG Stream einbinden
Beitrag von: locutus am 09 Februar 2014, 10:14:07
Zitat von: ext23 am 08 Februar 2014, 13:04:15
ich hab eine Überwachungskamera mit einem MJPEG fähigen USB Grabber an meinem Server angeschlossen. Mit der Software Motion biete ich diesen Stream über einen Netzwerk Port an.
Nach demselben Prinzip betreibe ich schon seit einer Weile eine analoge Kamera an einem Debian System. Allerdings verwende ich das Paket MJPG-Straemer. Die Software hat den Vorteil, dass man auch auf Java umstellen kann.

ZitatIch gehe mal davon aus, dass jede IPCam out of the box mittlerweile mjpeg streams sendet oder setzen die meisten da auf Java?!?
Einige Hersteller setzen MPEG4 oder H.264 zur hocheffizienten Videokompression ein.

ZitatDas dumme ist nur, dass die meisten Android Browser kein MJpeg verstehen und anzeigen können. Was kann man denn da noch machen?
Einen anderen Browser aus dem Play Store ziehen, das Device auf KitKat updaten oder wie in meinem Fall einfach das Gerät loswerden und ein neues leistungsfähigeres erwerben.
Titel: Antw:Webcam Motion JPEG Stream einbinden
Beitrag von: ext23 am 09 Februar 2014, 10:25:16
Den MJPG-Streamer hab ich auch laufen ja. Java mag ich nicht so, aber was heißt "umstellen", das bleibt trotzdem MJPEG, nur eben gezogen von einem Applet oder Javascript, das hat ja nichts mit der Software an sich zu tun.

Mit dem H264 stimmt, aber das machen mehr die HD-Cams und ich hab eben auch eine gute alte analoge ja ;-)

Und ein leistungsfähigeres Gerät? Das hat doch nichts mit dem tablet an sich zu tun, der Browser ist doch das Problem. Oder meinst du die Kamera? Würde das mit H264  denn eigentlich gehen? Können sowas die Browser mittlerweile direkt oder auch nur über Java Umwege?

Dann werd ich mal schauen ob das WebViewControl auch mit dem Dolphin HD Browser zu vereinen ist, der kann mjpeg eigentlich, naja oder der Firefox, aber der ist grottig langsam unter Android.

Gruß
Daniel
Titel: Antw:Webcam Motion JPEG Stream einbinden
Beitrag von: locutus am 09 Februar 2014, 11:12:48
Zitat von: ext23 am 09 Februar 2014, 10:25:16
Den MJPG-Streamer hab ich auch laufen ja. Java mag ich nicht so, aber was heißt "umstellen", das bleibt trotzdem MJPEG, nur eben gezogen von einem Applet oder Javascript, das hat ja nichts mit der Software an sich zu tun.
So meinte ich das auch.

ZitatUnd ein leistungsfähigeres Gerät? Das hat doch nichts mit dem tablet an sich zu tun, der Browser ist doch das Problem. Oder meinst du die Kamera? Würde das mit H264  denn eigentlich gehen? Können sowas die Browser mittlerweile direkt oder auch nur über Java Umwege?
Die Erkenntnisse fehlen noch, weil ich kein Gerät mit H.264 besitze.
Ich kann nur aus eigener Erfahrung berichten, dass die Androiden in der 100 Euro Preisklasse keinen MJPG-Stream im Browser darstellen konnten. Beide Geräte waren mit guter CPU aber schwacher GPU ausgestattet.
Dagegen bewerkstelligt der Webbrowser des Nexus 7 (2013) die Aufgabe mit Bravour.
Titel: Antw:Webcam Motion JPEG Stream einbinden
Beitrag von: ext23 am 09 Februar 2014, 11:25:01
Ähh wie? Ich hab auch ein Nexus 7 (aber das 2012er) aber da ist standardmäßig Chrome drauf und der kann das nicht. Da ich das Teil allerdings auch beruflich nutze habe ich das nicht gerooted, also da ist das originale rom drauf was derzeit aktuell ist (4.4.2).

Der Firefox macht das, aber der macht das auch auf meinem 60 Euro 10" Tab anstandslos (3 Streams dann kotzt der).

Mhh egal, wie dem auch sei, ich wollt ja nur wissen ob es noch andere alternativen zum Streamen gibt, aber dem ist dann wohl nicht so. Dann werd ich eventuell doch ein Java Applet im iFrame benutzen, naja oder vielleicht reich auch Java Script aus.

Gruß
Daniel
Titel: Antw:Webcam Motion JPEG Stream einbinden
Beitrag von: locutus am 09 Februar 2014, 12:07:18
Faszinierend! - hätte Mr. Spock jetzt wohl gesagt.

Mein abschließender Kommentar dazu: typisch Android!
Das System weist nur eine Konstante auf: Chaos.
Titel: Antw:Webcam Motion JPEG Stream einbinden
Beitrag von: ext23 am 09 Februar 2014, 12:29:45
*lol* Naja das stimmt schon ja, aber Apple kommt mir trotzdem nicht ins Haus ;-)
Titel: Antw:Webcam Motion JPEG Stream einbinden
Beitrag von: Kuzl am 27 Februar 2014, 08:11:36
mich würde auch interessieren wenn wer eine lösung findet.
die einzige Lösung, die ich bis jetzt gefunden habe, war dass ich mit der cam jpg machen lasse und diese über das Modul weblink in FHEM einbinde.
über Javascript wird dieses Bild alle 5 Sekunden aktualisiert aber das ist natürlich kein flüssiger stream :(
Titel: Antw:Webcam Motion JPEG Stream einbinden
Beitrag von: Thargor am 03 März 2014, 11:31:00

@Kuzl: Könntest Du bitte mal dein Javascript-Code posten?
Vielen Dank!
Titel: Antw:Webcam Motion JPEG Stream einbinden
Beitrag von: Kuzl am 03 März 2014, 11:58:58
hab mitlerweile sogar noch ne viel einfachere lösung gefunden :)

Zitatdefine webcam weblink htmlCode <html>
<img name="dyn_bild" src="http://192.168.178.62:8081" width="320" height="240">
<br>
<a href="http://192.168.178.62:8083/fhem?detail=webcam">webcam</a>   
</body></html>

das wandelt den Stream der Webcam in ein dynamisches Bild um das sich in Echtzeit aktualisiert.
Titel: Antw:Webcam Motion JPEG Stream einbinden
Beitrag von: ext23 am 05 März 2014, 12:50:11
Naja das ist schon richtig, geht aber auch wieder nur mit Browsern die mjpeg direkt abspielen können.

Noch ein kleiner Tip, ich sehe du benutzt da Größenangaben, das solltest du in deiner cam einstellen falls möglich. Übertragen wird der Stream nämlich trotzdem als 640er Auflösung oder was auch immer... Das macht sich dann bemerktbar wenn du mit dem Handy unterwegs bist.

Gruß
Daniel
Titel: Antw:Webcam Motion JPEG Stream einbinden
Beitrag von: Kuzl am 05 März 2014, 12:56:07
Das ist nicht ganz richtig, geht auch mit google chrome, der sonst keinen mjpeg stream unterstützt. IE hab ich jetzt zwar nicht getestet aber den benutzt hoffentlich keiner von euch :D

Ja das mit der Auflösung ist richtig und gewollt, da so mit Abstand das sauberste Ergebnis zu sehen war... und so oft sehe ich mir die cam auch nicht unterwegs an :)
Titel: Antw:Webcam Motion JPEG Stream einbinden
Beitrag von: ext23 am 05 März 2014, 13:17:01
Also Chrome kann mjpeg, meiner auf dem Tablet zumindest.

Und das musste mir jetzt mal erklären wieso es mit den 2 Zeilen gehen soll du bindest doch den mjpeg Stream direkt ein... Wie hast du es denn sonst gemacht wo es nicht ging?

Gruß
Daniel
Titel: Antw:Webcam Motion JPEG Stream einbinden
Beitrag von: Thargor am 05 März 2014, 13:29:32
Ich verstehe den Code auch nicht  ???

Inzwischen hab ich selbt den Code eine Javascriptlösung gefunden:


<img src="http://192.168.0.140/image/jpeg.cgi" width="600" height="450" name=webcam_image>

<script language="JavaScript">
var imageUrl = document.webcam_image.src;
var random = new Date().getTime();
var delay = 1; // update vertraging in seconden
var counter = 0;
var buffer = new Image;

function DisplayImage()
{
document.webcam_image.src = buffer.src;
LoadNextImage();
}

function LoadBuffer ()
{
var trickname = imageUrl;
++counter;
trickname += "?counter=" + (random + counter);
buffer.src = trickname;
buffer.onload = DisplayImage;
}

function LoadNextImage()
{
setTimeout("LoadBuffer()", 1000*delay);
}

LoadNextImage();

</script>
Titel: Antw:Webcam Motion JPEG Stream einbinden
Beitrag von: Kuzl am 05 März 2014, 17:16:50
ich hab keine Ahnung warum es geht, wurde aber in einem Forum als Workaround so angeboten, da der Chrome (zuminderst Desktop-Version) offiziell die Unterstützung für MJPEG-Streams eingestellt hat. Ich habs getestet wenn ich die URL des Streams eingegeben habe, ging es nicht und so geht es, warum genau, keine Ahnung. => Never touch a running system :D

Das Javascript, das ich davor hatte, war dem von Thargor sehr ähnlich.
Titel: Antw:Webcam Motion JPEG Stream einbinden
Beitrag von: ext23 am 05 März 2014, 17:32:27
Jupp ich kenn das script in der Art auch, vom mjpeg streamer. Aber gut ist auch klar das die alle gleich aussehen, machen ja auch dasselbe :-)

Also mit diesem Workaround da mhh das muss ich zu Hause echt mal ausprobieren, ich bin im Moment in Düsseldorf und da ist es so wo mjpeg nicht geht geht auch der workaround nicht. Aber ich hab hier auch nur eine Maschine zum testen. Wäre ja klasse wenn das auf meinem Tab zu Hause geht.

Gruß
Daniel
Titel: Antw:Webcam Motion JPEG Stream einbinden
Beitrag von: Kuzl am 05 März 2014, 17:57:00
Ich kann wie gesagt leider nur vom Desktop Chrome berichten, dass es ohne Workaround nicht gegangen ist und mit geht es nun :) Beim Chrome auf dem Android Smartphone gehts auch, allerdings auch nur mit Workaround.
Ich streame übrigens mit Motion, kann sein dass das einen Unterschied macht.

Viele Grüße
Kuzl
Titel: Antw:Webcam Motion JPEG Stream einbinden
Beitrag von: ext23 am 05 März 2014, 19:30:37
Ich hab beides, Motion und mjpeg streamer, das sollte kein Unterschied machen. mjpeg ist mjpeg.

Naja ich bin mal gespannt, wenn es läuft umso besser ;-)
Titel: Antw:Webcam Motion JPEG Stream einbinden
Beitrag von: ext23 am 07 März 2014, 12:43:19
Hi, so wieder zu Hause, 5h von Düsseldorf nach Berlin... so eine freie Piste hatte ich schon lange nicht mehr ;-)

Aber leider haut das bei mir nicht hin, wie ich schon vermutet habe, da wo mjpeg direkt nicht geht, geht es auch mit dem Workaround nicht, ich sehe nur ein leeren transparenten Kasten :-( Schade.

Gruß
Daniel
Titel: Antw:Webcam Motion JPEG Stream einbinden
Beitrag von: ext23 am 08 März 2014, 08:56:25
Moin

Die Java Scripte haben übrigens allesamt ein Problem. Die cachen jedes einzelne Bild. Da kotzt dann irgend wann der Browser wenn das Stundenlang läuft. WebViewControl mag das auch nicht, da bricht der bei mir nach 10 Minuten ab.

Ist das bei euch auch so?

Gruß
Daniel
Titel: Antw:Webcam Motion JPEG Stream einbinden
Beitrag von: Kuzl am 08 März 2014, 10:28:18
okay das ist sehr eigenartig warum geht das bei mir und bei dir nicht ???
Hast du dann versucht die Seite ein Paar mal neu zu laden? bei mir kommt manchmal auch nur das "Broken-Image"-Symbol

ich kenn mich zwar mit JS nicht aus, allerdings gibts da so einen Befehl, mit dem man das Cachen vom Browser deaktivieren kann, war bei mir auch drinnen.

Viele Grüße
Kuzl
Titel: Antw:Webcam Motion JPEG Stream einbinden
Beitrag von: ext23 am 08 März 2014, 11:31:27
Auf meine PC mir Firefox läuft es derzeit stabil, der cache schnell nach dem löschen auf 2,7 MB an und bleibt da. Aber das WebViewControl schießt es ab nach einiger Zeit, je nachdem welche Framerate ;-)

Btw. das ist der JS Code vom mjpeg streamer:

<!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>
<title>MJPEG-Streamer</title>
</head>
<script type="text/javascript">

/* Copyright (C) 2007 Richard Atterer, richard©atterer.net
   This program is free software; you can redistribute it and/or modify it
   under the terms of the GNU General Public License, version 2. See the file
   COPYING for details. */

var imageNr = 0; // Serial number of current image
var finished = new Array(); // References to img objects which have finished downloading
var paused = false;

function createImageLayer() {
  var img = new Image();
  img.style.position = "absolute";
  img.style.zIndex = -1;
  img.onload = imageOnload;
  img.onclick = imageOnclick;
  img.src = "/?action=snapshot&n=" + (++imageNr);
  var webcam = document.getElementById("webcam");
  webcam.insertBefore(img, webcam.firstChild);
}

// Two layers are always present (except at the very beginning), to avoid flicker
function imageOnload() {
  this.style.zIndex = imageNr; // Image finished, bring to front!
  while (1 < finished.length) {
    var del = finished.shift(); // Delete old image(s) from document
    del.parentNode.removeChild(del);
  }
  finished.push(this);
  if (!paused) createImageLayer();
}

function imageOnclick() { // Clicking on the image will pause the stream
  paused = !paused;
  if (!paused) createImageLayer();
}

</script>
<body onload="createImageLayer();">

<div id="webcam"><noscript><img src="/?action=snapshot" /></noscript></div>

</body>
</html>


Ich seh da nur immer eine Variable die hochgezählt wird. Ich frage mich was passiert wenn die überläuft ...

Gruß
Daniel