Mjpeg multipart streaming. Wie geht das?

[Hadmut F. (hadmut)]

Ich habe fortlaufende jpeg bilder die ich an einen browser streamen 
will. Kann mir jemand erklären welche header und was noch da gesendet 
werden muss?

Ich kenne den esp32-webcam code. Dieser läuft aber mit httpd und nicht 
mit dem esp32 <WebServer.h>. Und ich kapier das multipart zeugs nicht.

Einzelbilder läuft

void capture_handler()
{
    fb = esp_camera_fb_get();
    if (fb) 
    {
      if(fb->format == PIXFORMAT_JPEG) 
      {
        s_server.send(200, "image/jpg",String(fb->buf, fb->len));  
        esp_camera_fb_return(fb);
      }
    }
    else Serial.println("Camera capture failed");
}

Aber streamen bring ich nicht hin. Hat jemand einen link?

[Hadmut F. (hadmut)]

Ich habs mir mal rausgesucht. Das müsste so sen:

httpd_resp_set_type(req, "multipart/x-mixed-replace;boundary=123456789000000000000987654321");

LOOP:
fb = esp_camera_fb_get();

httpd_resp_send_chunk(req, "Content-Type: image/jpeg\r\nContent-Length: xxxx\r\n\r\n"); //xxxx=_jpg_buf_len

httpd_resp_send_chunk(req, (const char *)_jpg_buf, _jpg_buf_len);

strlen(_STREAM_BOUNDARY));
httpd_resp_send_chunk(req, "\r\n--123456789000000000000987654321\r\n");

Was ich nicht verstehe ist das "httpd_resp_set_type". Wie heisst die 
entsprechende funktion im esp32 "webserver.h" ?

[Εrnst B. (ernst)]

Hadmut F. schrieb:
> httpd_resp_set_type
setzt wohl nur den Content-Type.

also das, was bei dir:
> s_server.send(200, "image/jpg"

"image/jpg"
ist.

[Hadmut F. (hadmut)]

Ich komm da nicht weiter.
Das chrome "seitenquelltext anzeigen" zu untersuchen läuft dabei auch 
nicht.

[Εrnst B. (ernst)]

Erstmal schauen, ob dein Browser das überhaupt noch unterstützt.

Chromium, die OpenSource-Basis von Chrome, wollte das schon vor über 10 
Jahren aus dem Browser schmeißen:

https://issues.chromium.org/issues/41017445

Firefox könnte das vielleicht noch...


Nachtrag: Chrome kann das noch, wenn du den Bilder-Stream nicht toplevel 
aufmachst, sondern z.B. in einem img-tag als src angibst.

[Hadmut F. (hadmut)]

Ist kein browser problem. Chrom macht multipart/x-mixed-replace; bei jpg 
bildern.
Der code läuft:

#define PART_BOUNDARY "123456789000000000000987654321"
static const char* _STREAM_CONTENT_TYPE = "multipart/x-mixed-replace;boundary=" PART_BOUNDARY;
static const char* _STREAM_BOUNDARY = "\r\n--" PART_BOUNDARY "\r\n";
static const char* _STREAM_PART = "Content-Type: image/jpeg\r\nContent-Length: %u\r\n\r\n";

  res = httpd_resp_set_type(req, _STREAM_CONTENT_TYPE);
 
  while(true)
  {    
    delay(10);
    fb = esp_camera_fb_get();
    if (!fb) res = ESP_FAIL;
     if(res == ESP_OK)
    {      
      size_t hlen = snprintf((char *)part_buf, 64, _STREAM_PART, fb->len);
      res = httpd_resp_send_chunk(req, (const char *)part_buf, hlen);
    }
    if(res == ESP_OK){
      res = httpd_resp_send_chunk(req, (const char *)fb->buf, fb->len);
    }
    if(res == ESP_OK){
      res = httpd_resp_send_chunk(req, _STREAM_BOUNDARY, strlen(_STREAM_BOUNDARY));
    }
    if(fb)
    {
      len = fb->len;
      esp_camera_fb_return(fb);
      fb = NULL;
    } 
    if(res != ESP_OK) break;
  }
  return res;

Ich möchte das nicht mit httpd server sondern mit
https://github.com/espressif/arduino-esp32/blob/master/libraries/WebServer/src/WebServer.h

also mit den  funktionen machen:

  void send(int code, const char* content_type = NULL, const String& content = String(""));
  void send(int code, char* content_type, const String& content);
  void send(int code, const String& content_type, const String& content);
  void send(int code, const char* content_type, const char* content);

  void setContentLength(const size_t contentLength);
  void sendHeader(const String& name, const String& value, bool first = false);
  void sendContent(const String& content);
  void sendContent(const char* content, size_t contentLength);

Grund is httpd erlaubt mir keine UDP kommunikation nebenher zu fahren.

Eine beschreibung unterschied send - sendContent - sendHeader habe ich 
nicht gefunden.

[Hadmut F. (hadmut)]

Meiner analyse nach macht der laufende code:

httpd_resp_set_type(req, "multipart/x-mixed-replace;boundary=123456789000000000000987654321");

LOOP
// get picture
fb = esp_camera_fb_get();

// set length, xxxx = length
res = httpd_resp_send_chunk(req, "Content-Type: image/jpeg\r\nContent-Length: xxxx\r\n\r\n"); 

// send data
httpd_resp_send_chunk(req, (const char *)_jpg_buf, _jpg_buf_len);

// boundary to next picture
httpd_resp_send_chunk(req, "\r\n--123456789000000000000987654321\r\n");
ENDLOOP

[Frank E. (Firma: Q3) (qualidat)]

Man kann das Auffrischen eines Bildes (erneutes Abrufen), ohne die ganze 
Seite neu zu laden, auch per Javascript (eingebettet in die Webseite) 
vom Browser machen lassen ...

[Hadmut F. (hadmut)]

Denke ich habs gefunden.
Mit "WiFiServer server(80);"

Erstes mal:

  client->println("HTTP/1.1 200 OK");
  client->printf("Content-Type: %s\r\n", _STREAM_CONTENT_TYPE);
  client->println("Content-Disposition: inline; filename=capture.jpg");
  client->println("Access-Control-Allow-Origin: *");
  client->println();

Dann dauerschleife bild mit:

  client->print(_STREAM_BOUNDARY);
  client->printf(_STREAM_PART, fb);
  client->write(out_buf, len) // bilddaten

[Hadmut F. (hadmut)]

JA! Läuft. Bild über http-streaming, fernsteuerung über UDP. Alles auf 
einem ESP32.
Kater lässt sich durch die RC karre nicht mehr stören :o)
Das ohr, das war eine elster.

[Enrico E. (pussy_brauser)]

Hadmut F. schrieb:
> Das Ohr, das war eine Elster.

Das sieht aber eher aus wie mit einer Schere schön gerade abgeschnitten. 
Eltern haben normalerweise keine Zähne!

[Hadmut F. (hadmut)]

Falls das interessiert, hier der ganze streaming code.

void stream_handler()
{
  WiFiClient wfc = s_server.client();
  String out;

  Serial.println("Image stream start");
  out  = "HTTP/1.1 200 OK\r\n";
  out += "Content-Type: ";
  out += "multipart/x-mixed-replace;boundary="; 
  out += "123456789000000000000987654321\r\n";
  out += "Content-Disposition: inline; filename=capture.jpg\r\n";
  out += "Access-Control-Allow-Origin: *\r\n"; 
  out += "\r\n";
     
  Serial.println(out);  
  s_server.sendContent(out);

  while(wfc.connected())
  {
    delay(100);
    fb = esp_camera_fb_get();
    if (fb) 
    {

      out  = "\r\n--123456789000000000000987654321\r\n";
      out += "Content-Type: image/jpeg\r\nContent-Length: ";
      out += fb->len;
      out += "\r\n\r\n";    
      s_server.sendContent(out);

      s_server.sendContent(String(fb->buf, fb->len)); 
       
      esp_camera_fb_return(fb);
    }
    else break;
  } 
  Serial.println("Disc"); 
}

[Εrnst B. (ernst)]

Schön dass es läuft. Du umgehst halt die Webserver-Klasse komplett und 
machst alles zu Fuß selber. Kann man machen.

Zwei Anmerkungen:

UDP Parallel dazu geht so auch nicht, das war doch der Grund für die 
ganze Übung?
Du steckst immer in der "while connected" Schleife fest.

und:

> s_server.sendContent(...

Das Senden direkt auf dem s_server fliegt in einer der nächsten 
Versionen des ESP32-Arduino-Frameworks raus. War nie klar definiert, auf 
welcher Verbindung (oder ob auf Allen) das senden sollte.
Besser: mach die Ausgaben auf "wfc", dafür ist das da, und damit ist 
auch klar welche Verbindung welche Daten erhält.

Und statt sendContent(String(fb->buf, fb->len)) gäb's wfc.write(const 
uint8_t *buf, size_t size) das kommt ohne Kopieren des Framebuffers in 
einen String aus, sondern kann direkt auf dem fb arbeiten.

[Hadmut F. (hadmut)]

Εrnst B. schrieb:
> UDP Parallel dazu geht so auch nicht, das war doch der Grund für die
> ganze Übung?

Da läuft der bildserver auf port 81, der normale server auf port 80 und 
udp auf port 5005. Kein problem.

Die version mit #include <WebServer.h> hat den vorteil dass arduino OTA 
läuft. Das habe ich bei "esp_http_server.h / httpd" und "<WiFi.h> / 
WiFiServer server(80);" nicht hingebracht.

> Du steckst immer in der "while connected" Schleife fest.

Das muss so sein. Den loop kann man auseinander nehmen und dazwischen 
anderes machen. Der muss nicht im handler code sein. Das ist test-code!

> Besser: mach die Ausgaben auf "wfc", dafür ist das da, und damit ist
> auch klar welche Verbindung welche Daten erhält.

Ich habe gestern erstmals etwas von "wfc" gehört. etwas geduld bitte!

> Und statt sendContent(String(fb->buf, fb->len)) gäb's wfc.write(const
> uint8_t *buf, size_t size) das kommt ohne Kopieren des Framebuffers in
> einen String aus, sondern kann direkt auf dem fb arbeiten.

Werde ich anschauen. TY

Edit:

      //s_server.sendContent(String(fb->buf, fb->len)); 
      wfc.write(fb->buf, fb->len);

Geht.

[Hadmut F. (hadmut)]

Εrnst B. schrieb:
> UDP Parallel dazu geht so auch nicht,

Du hast recht.
Müsste den udp-code aus dem stream handler aufrufen. Hässlich.

Die frage ist wie mache ich OTA mit WiFiClient.h ?

[Εrnst B. (ernst)]

Hadmut F. schrieb:
> Ich habe gestern erstmals etwas von "wfc" gehört. etwas geduld bitte!

Hadmut F. schrieb:
> WiFiClient wfc = s_server.client();

den meinte ich :)

[Hadmut F. (hadmut)]

Εrnst B. schrieb:
> den meinte ich :)

Schon klar. Der ist von gestern :)

Wo ist eigentlich der dispatcher von WiFiClient auf die verschiedenen 
WebServer.h server.on("/", handler); zu finden?
Den http decoder von WiFiClient.read() meine ich.

[Εrnst B. (ernst)]

Hadmut F. schrieb:
> Wo ist eigentlich der dispatcher von WiFiClient auf die verschiedenen
> WebServer.h server.on("/", handler); zu finden?

Der Webserver hat eine Linked List der Handler, die "on()"-Methoden 
hängen da einen Eintrag an.

In Parsing.cpp (WebServer::_parseRequest) läuft er, nachdem die 
Request-Header geparst sind, über die Liste, nimmt sich den ersten 
Handler der sich zuständig fühlt:

  RequestHandler* handler;
  for (handler = _firstHandler; handler; handler = handler->next()) {
    if (handler->canHandle(_currentMethod, _currentUri))
      break;
  }