Video Stream via ESP32 and AMG8833

Kokodora
Posts: 2
Joined: Tue Oct 23, 2018 7:22 pm

Video Stream via ESP32 and AMG8833

Postby Kokodora » Tue Oct 23, 2018 8:20 pm

Hello together, I´m new in this forum, actually that´s the first time I post anything in a forum, so if I do something wrong (wrong forum, wrong topic, etc. forgot information) please tell me.

I am working with an ESP32 Feather from Adafruit in combination with an AMG8833 Feather from Adafruit.
https://www.adafruit.com/product/3405
https://www.adafruit.com/product/3622

I´m trying so set up a webpage where I can see the live stream of the thermal cam an also can adjust the Minimum and Maximum Temperature.
So far I can view the Picture via the manipulation of a table and I can also adjust the Min/Max temperature.
Now I cannot figure out how so set up the video stream, I have to say I´m an absolute newbie in Networking. I tried to set up a java script to update the cells of the table but that didn´t work out. I also googled but I can´t find anything similar. Do I have to use Websockets and have an extra Html file on my computer which is the client and one provide an Websocket server on the ESP32 or can I run everything on the ESP32 an use the provided array somehow as an source for an HTML video element?
I´m really stuck here and would appreciate any help.

An image of my actual homepage is in the attachements.
My code so far:

Code: Select all

//ThermalCAM and Server

#include <Wire.h>
#include <Adafruit_AMG88xx.h>

#include <WiFi.h>


Adafruit_AMG88xx amg;

//Comment this out to remove the text overlay
#define SHOW_TEMP_TEXT

//low range of the sensor (this will be blue on the screen)
int minT = 15;
#define MINTEMP minT

//high range of the sensor (this will be red on the screen)
int maxT = 50;
#define MAXTEMP maxT

float pixels[AMG88xx_PIXEL_ARRAY_SIZE];


String camColors[] = {"E50015", "E40006", "E30800", "E31700", "E22600", "E13500", "E14400", "E05300", "E06200", "DF7100", "DE7F00", "DE8E00", "DD9C00", "DDAA00",
                      "DCB900", "DBC700", "DBD500", "D1DA00", "C2DA00", "B3D900", "A4D800", "95D800", "86D700", "78D700", "69D600", "5AD500", "4CD500", "3DD400", "2FD400", "21D300", "13D200", "05D200",
                      "00D109", "00D116", "00D024", "00CF32", "00CF40", "00CE4D", "00CE5B", "00CD68", "00CC76", "00CC83", "00CB90", "00CB9E", "00CAAB", "00C9B8", "00C9C4", "00BFC8", "00B1C8", "00A3C7",
                      "0095C6", "0088C6", "007AC5", "006DC5", "005FC4", "0052C3", "0044C3", "0037C2", "002AC2", "001DC1", "0010C0", "0003C0", "0900BF", "1500BF"
                     };




const char* ssid     = "Martin Router King";
const char* password = "onedaythisbungalowwillbeclean";

// NETWORK: Static IP details...
IPAddress ip(192, 168, 1, 15);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);

WiFiServer server(80);

void setup() {

  Serial.begin(115200);


  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);

  WiFi.config(ip, gateway, subnet);
  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());

  server.begin();

  Serial.println(F("AMG8833 thermal camera!"));

  bool status;

  // default settings
  status = amg.begin();
  if (!status) {
    Serial.println("Could not find a valid AMG88xx sensor, check wiring!");
    while (1);
  }

  Serial.println("-- Thermal Camera Test --");
  delay(100); // let sensor boot up


}


void loop() {

  int i = 0;
  int colorIndex = 0;


  //read all the pixels
  amg.readPixels(pixels);

  Serial.print("[");
  for (int i = 1; i < AMG88xx_PIXEL_ARRAY_SIZE + 1; i++) {

    int colorTemp;
    if (pixels[i - 1] >= MAXTEMP) colorTemp = MAXTEMP;
    else if (pixels[i - 1] <= MINTEMP) colorTemp = MINTEMP;
    else colorTemp = pixels[i - 1];

    uint8_t colorIndex = map(colorTemp, MINTEMP, MAXTEMP, 0, 64);

    //colorIndex = constrain(colorIndex, 0, 255);

    //Serial.print(pixels[i]);
    Serial.print(colorIndex);
    Serial.print(", ");
    if ( i % 8 == 0 ) Serial.println();
  }
  Serial.println("]");
  Serial.println();

  WiFiClient client = server.available();   // listen for incoming clients

  if (client) {                             // if you get a client,
    Serial.println("New Client.");           // print a message out the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    while (client.connected()) {            // loop while the client's connected
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        if (c == '\n') {                    // if the byte is a newline character


          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();
            client.print("<head> <title> Thermal Camera </title>");

            //javaScript

            client.print("<script type=\"text/javascript\" >");
            client.print("function colors(a,b){");
            client.print("document.getElementById('id"); client.print(i); client.print("').style.backgroundColor='#"); client.print(camColors[63 - colorIndex]); client.print("';");
            client.print("</script>");

            client.print("</head>");

            client.print("<center>");
            // the content of the HTTP response follows the header:
            client.print("<h1 style=\"text-align:center;\">Thermal Camera</h1>");

            client.print("<a href=\"HH\"><button background-color:#E50015>Maxtemp +5C</button></a> <t>");
            client.print("<a href=\"HL\"><button>Maxtemp -5C</button></a> <t>");
            client.print("<a href=\"LH\"><button>Mintemp +5C</button></a> <t>");
            client.print("<a href=\"LL\"><button>Mintemp -5C</button></a> <br>");
            // The HTTP response ends with another blank line:
            client.println("<br>");

            client.print("Maxtemp: ");
            client.println(maxT);
            client.println("C  ");
            client.println("<t>");

            client.print("Mintemp: ");
            client.println(minT);
            client.println("C");
            client.println("<br> <br>");

            //for (int i = 0; i < AMG88xx_PIXEL_ARRAY_SIZE; i++) {

            client.print("<table id = \"table\" cellspacing = \"0\">");
            client.print("<tr>");
            for (int i = 1; i < AMG88xx_PIXEL_ARRAY_SIZE + 1; i++) {

              int colorTemp;
              if (pixels[i - 1] >= MAXTEMP) colorTemp = MAXTEMP;
              else if (pixels[i - 1] <= MINTEMP) colorTemp = MINTEMP;
              else colorTemp = pixels[i - 1];

              uint8_t colorIndex = map(colorTemp, MINTEMP, MAXTEMP, 0, 63);

              //colorIndex = constrain(colorIndex, 0, 255);

              //client.print("<td id = \"1\" height=30 width=30 bgcolor=#0xE50015> </td>");
              client.print("<td id = \"id"); client.print (i); client.print("\"height=30 width=30 bgcolor=#"); client.print(camColors[63 - colorIndex]); client.print("></td>");
              if (i % 8 == 0) {
                client.print("</tr>");
                client.print("<tr>");
              }
            }
            client.print("</table>");

            /*   while (millis() < 5000)
                {
                 amg.readPixels(pixels);
                 for (int i = 0; i < AMG88xx_PIXEL_ARRAY_SIZE; i++) {

                   int colorTemp;
                   if (pixels[i - 1] >= MAXTEMP) colorTemp = MAXTEMP;
                   else if (pixels[i - 1] <= MINTEMP) colorTemp = MINTEMP;
                   else colorTemp = pixels[i - 1];

                   uint8_t colorIndex = map(colorTemp, MINTEMP, MAXTEMP, 0, 63);

                   client.print("<script> colors() </script>");
                 }

                }
              client.print("<script>");
              client.print("document.getElementById('id"); client.print("1"); client.print("').style.backgroundColor='#FF0000';");
              client.print("</script>");

              client.print("</center>");
            */
            // break out of the while loop:
            break;
          } else {    // if you got a newline, then clear currentLine:
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }

        // Check to see if the client request was "GET /H" or "GET /L":
        if (currentLine.endsWith("GET /HH")) {
          maxT = maxT + 5;
#define MAXTEMP maxT
        }
        if (currentLine.endsWith("GET /LH")) {
          minT = minT + 5;
#define MINTEMP minT
        }
        if (currentLine.endsWith("GET /HL")) {
          maxT = maxT - 5;
#define MAXTEMP maxT
        }
        if (currentLine.endsWith("GET /LL")) {
          minT = minT - 5;
#define MINTEMP minT
        }
      }
    }
    // close the connection:
    client.stop();
    Serial.println("Client Disconnected.");

  }

  //delay (200);

}
Attachments
Thermal_Cam_aktuell.PNG
Thermal_Cam_aktuell.PNG (34.12 KiB) Viewed 4582 times

chegewara
Posts: 1211
Joined: Wed Jun 14, 2017 9:00 pm

Re: Video Stream via ESP32 and AMG8833

Postby chegewara » Wed Oct 24, 2018 9:03 am

Maybe this code can help you, i found it very useful:
https://github.com/donny681/ESP32_CAMERA_QR

Kokodora
Posts: 2
Joined: Tue Oct 23, 2018 7:22 pm

Re: Video Stream via ESP32 and AMG8833

Postby Kokodora » Wed Oct 24, 2018 11:30 am

Thanks for the answer, but it doesn´t solve my videostream-problen ;)

ESP_Sprite
Posts: 3911
Joined: Thu Nov 26, 2015 4:08 am

Re: Video Stream via ESP32 and AMG8833

Postby ESP_Sprite » Thu Oct 25, 2018 2:27 am

There are multiple approaches that work here. Seeing that you only have 8x8 data, I'd say you were on the right track. You can keep the ESP32 webserver which serves the HTML file and the controls to increase and decrease the temperature, but add a websockets server to stream the actual data of the sensor. Add in some javascript to connect to the websocket and dynamically update the cells and you should be there.

chegewara
Posts: 1211
Joined: Wed Jun 14, 2017 9:00 pm

Re: Video Stream via ESP32 and AMG8833

Postby chegewara » Thu Oct 25, 2018 7:18 am

Kokodora wrote:Thanks for the answer, but it doesn´t solve my videostream-problen ;)
Let start from beginning, you posted in esp-idf topic that suppose to be in arduino part of forum, assuming you want to continue with code you pasted here.

farhana
Posts: 1
Joined: Thu Apr 23, 2020 5:56 pm

Re: Video Stream via ESP32 and AMG8833

Postby farhana » Thu Apr 23, 2020 5:59 pm

Hi, do you manage to stream the video? and are you streaming the video in a web server?

RobotHacker
Posts: 2
Joined: Sat Jul 18, 2020 7:22 am

Re: Video Stream via ESP32 and AMG8833

Postby RobotHacker » Sat Jul 18, 2020 7:27 am

I've got the beginning of a web capture/stream here: https://github.com/RobotHacker/CameraWebServerThermal

RobotHacker
Posts: 2
Joined: Sat Jul 18, 2020 7:22 am

Re: Video Stream via ESP32 and AMG8833

Postby RobotHacker » Thu Jul 23, 2020 5:16 am

I made a table based websocket streaming app based on the code and ideas in this thread: https://github.com/RobotHacker/WebBasedThermalCamera

Who is online

Users browsing this forum: Pschibly and 28 guests