Page 1 of 1

Video Stream via ESP32 and AMG8833

Posted: Tue Oct 23, 2018 8:20 pm
by Kokodora
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);

}

Re: Video Stream via ESP32 and AMG8833

Posted: Wed Oct 24, 2018 9:03 am
by chegewara
Maybe this code can help you, i found it very useful:
https://github.com/donny681/ESP32_CAMERA_QR

Re: Video Stream via ESP32 and AMG8833

Posted: Wed Oct 24, 2018 11:30 am
by Kokodora
Thanks for the answer, but it doesn´t solve my videostream-problen ;)

Re: Video Stream via ESP32 and AMG8833

Posted: Thu Oct 25, 2018 2:27 am
by Sprite
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.

Re: Video Stream via ESP32 and AMG8833

Posted: Thu Oct 25, 2018 7:18 am
by chegewara
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.

Re: Video Stream via ESP32 and AMG8833

Posted: Thu Apr 23, 2020 5:59 pm
by farhana
Hi, do you manage to stream the video? and are you streaming the video in a web server?

Re: Video Stream via ESP32 and AMG8833

Posted: Sat Jul 18, 2020 7:27 am
by RobotHacker
I've got the beginning of a web capture/stream here: https://github.com/RobotHacker/CameraWebServerThermal

Re: Video Stream via ESP32 and AMG8833

Posted: Thu Jul 23, 2020 5:16 am
by RobotHacker
I made a table based websocket streaming app based on the code and ideas in this thread: https://github.com/RobotHacker/WebBasedThermalCamera