Video Streaming Widget with OV7670 and ESP32

Need Help With My Project
1

Hello Blynkers.

I’m using an ESP32 Dev Kit C and an OV7670 camera to stream images, like 6 frames per second, with the esp32 functioning as a server. When accessing the local IP via web Browser it’s all working as intended and I get 6 frames per second that change in real-time. Putting it into the Video stream Widget does not much. I get the three loading dots and that’s it. In the Serial Monitor, I see that the connection is stable and Blynk sends requests to the esp32. Nonetheless, I get the loading dots and no image.

I’m using the code in this GitHub repos: https://github.com/bitluni/ESP32CameraI2S . The server itself and how it sends the images are written in the ESP32_I2S_Camera.ino.

Any ideas why this is not working and what I need to change to make it work? Thank you in advance.

2

The Video Widget requires a streaming URL, perhaps this library you referenced does not provide the required video stream?

3

The sketch is buffering a bitmap image on the esp and then uploading sending it to the connected client.

This is basically what’s happening:


while (client.connected()) 
    {
      if (client.available()) 
      {
        char c = client.read();
        //Serial.write(c);
        if (c == '\n') 
        {
          if (currentLine.length() == 0) 
          {
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();
            client.print(
              "<style>body{margin: 0}\nimg{height: 100%; width: auto}</style>"
              "<img id='a' src='/camera' onload='this.style.display=\"initial\"; var b = document.getElementById(\"b\"); b.style.display=\"none\"; b.src=\"camera?\"+Date.now(); '>"
              "<img id='b' style='display: none' src='/camera' onload='this.style.display=\"initial\"; var a = document.getElementById(\"a\"); a.style.display=\"none\"; a.src=\"camera?\"+Date.now(); '>");
            client.println();
            break;
          } 
          else 
          {
            currentLine = "";
          }
        } 
        else if (c != '\r') 
        {
          currentLine += c;
        }
        
        if(currentLine.endsWith("GET /camera"))
        {
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:image/bmp");
            client.println();
            
            client.write(bmpHeader, BMP::headerSize);
            client.write(camera->frame, camera->xres * camera->yres * 2);
        }
      }
    }

I guess this is not the required video stream then? Is there a possible way to change it accordingly?

4

That would most likely be a programming or “find another library” thing.

You might want to load up the beta App and look at the possibility of at least loading in the images with the new Beta ImageWidget… but not sure if it takes BMP

5

I tried your suggestion and it seems to work partly. I took the Image Gallery Widget and I am updating the URL with the same URL over and over again so I get a new picture (With the following command in a BlynkTimer: Blynk.setProperty(V1, "urls", "http://192.168.178.56/camera") ). The problem is the loading times for a new image are varying pretty much and sometimes take longer than a second even though it’s just a 160x120 image. But the bigger problem is that while it’s loading the new image the old one disappears until the new one is done loading.

Any ideas on how to solve these issues? Then it would be perfect.

Edit: After testing a bit around with two URLS constantly changing to each other I realized it would be optimal already if only the picture change would go flawlessly. So I would want the image to not disappear before the new one is available to be displayed.

E2: To give you an idea what it looks like, here is a screen capture: https://youtu.be/HUG7vAgvhco

6

No, sorry I am unsure what the issue is… possibly buffering, caching? I have a test with 209 images that upon initial running of the project it will display the same blanking as you described.

But if I stop the project, scroll through the image list (at least partially) then restart the project, it will flip through them seamlessly like a smooth video. @BlynkAndroidDev any ideas on this “blanking” issue when switching images?