video stream

364 Views Asked by Dr pepper At 04 April 2025 at 01:25

I'm using an Arduino Esp32 with a camera to stream video into a web page I've created. The Esp32 shuts down after around an hour and so the the page needs refreshing to bring the stream back (the window just shows the symbol when no image is available).

So I'd like to have a button that re-opens the image video stream, I have tried various things without success. One issue is the Esp32 is a HTTP server not HTTPS.

Problem:
I want a button that opens/closes the image, refreshing it if it's already open. This is my code:

<img style="-webkit-user-select: none;margin: auto;" src="xx.xx.xx.xx:82" id='myimage' width="640" height="480" name="securityStream">

Original Q&A

There are 1 best solutions below

VC.One On 15 November 2020 at 00:13

You can try creating a button with a function (via onClick event) to "refresh" the <img> tag.
The refresh is simply a re-feeding of the same URL as a new .src property.

Here is some testable code. Let me know if it solves your problem:

<!DOCTYPE html>
<html>
<body>

<img style="-webkit-user-select: none;margin: auto;" src="xx.xx.xx.xx:82" id='myimage' width="640" height="480" name="securityStream">

<br> <br>
<button onclick="vidUpdate()"> Refresh The Video </button>
 
<script>

function vidUpdate() 
{
    //# access the image tag by ID and change the source URL
    document.getElementById("myimage").src = "xx.xx.xx.xx:82";
}

</script>

</body>
</html>

Open/close a <img> video stream

There are 1 best solutions below

Related Questions in VIDEO

Related Questions in CAMERA

Related Questions in ESP32

Related Questions in HTML5-IMG

Trending Questions

Popular # Hahtags

Popular Questions