ESP32-CAM WebSocket Server: Failure to Stream Camera Feed after Page Refresh or Multiple Connections

[KeyanAbtahi]

Bug Description:

The streaming of the camera feed from ESP32-CAM to a website/server fails after a page refresh or when a secondary device connects. This issue is suspected to be related to the WebSocket server. I'm personally quite inexperienced with networking/servers, so this might be intended, but I'd still post this in case it's not.

Detailed Description:

When the web server is started using the command websocket_server_main.listen(82); and the webpage is accessed for the first time, the server successfully loads the webpage, which includes a video stream from the ESP32-CAM. Upon inspecting the HTML, the video stream element appears as follows:

<img id="stream" src="blob:http://192.168.1.49/e474322533-46c3-4053-860b-37a606b707f3">

However, if the page is refreshed or a second device accesses the website using the same IP, the webpage loads, but the video feed is no longer streamed through the server. The HTML element mentioned above becomes:
<img id="stream" src=""> with an empty src attribute.

Restarting the ESP32, and consequently, the server, allows one more device to connect and stream video until either a page refreshes or another device attempts to view the stream. It seems that the server only accepts one client and loses the ability to receive data or the video stream upon refresh or a new connection.

Steps to Reproduce:

1. Start the webserver using the code websocket_server_main.listen(82);.
2. Access the webpage for the first time, which results in the client connecting to the server.
3. Verify that the server loads the webpage correctly, displaying the video stream from ESP32-CAM.
4. Refresh the page or access the website from a secondary device.
5. Observe that the webpage loads, but the video feed is no longer streamed through the server. The HTML element mentioned containing the video stream/image stream becomes <img id="stream" src="">

Expected Behavior:

The video feed should continue streaming even after a page refresh or when secondary devices connect to the server. The server should be able to handle multiple clients and maintain the ability to receive data and stream the video.

Code Snippets:

Below are relevant code snippets related to the webserver:

// Global
WebsocketsServer websocket_server_main;
WebsocketsClient main_client;

// WebSocket server setup
void setup(){
    websocket_server_main.listen(82);
}

// WebSocket server loop
void loop(){
    main_client.poll();
    if (websocket_server_main.available() ) {
        main_client = websocket_server_main.accept();
    }
}

// HTTP function, might be irrelevant but added in this report for clarity.
bool setup_http_server() {
    httpd_config_t config = HTTPD_DEFAULT_CONFIG();
    if (httpd_start(&camera_httpd, &config) == ESP_OK) {
        Serial.println("HTTP server started.");
        httpd_uri_t index_uri = {.uri = "/",
                                 .method = HTTP_GET,
                                 .handler = index_handler,
                                 .user_ctx = NULL};
        httpd_register_uri_handler(camera_httpd, &index_uri);
        return true;
    } else {
        return false;
    }
}

// Might also be irrelevant but added in this report for clarity.
static esp_err_t index_handler(httpd_req_t *req) {
    httpd_resp_set_type(req, "text/html");
    httpd_resp_set_hdr(req, "Content-Encoding", "gzip");
    return httpd_resp_send(req, (const char *)index_ov2640_html_gz,
                           index_ov2640_html_gz_len);
}

Additional Context:

It is unclear what might be causing this issue, but I do suspect the websocket server is unable to handle persistent/more than one connection per 'boot' of the ESP.