0

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">
VC.One
  • 14,790
  • 4
  • 25
  • 57
Dr pepper
  • 1
  • 1
    What is your actual question though... How to make an HTML button that refreshes a web page? Show your code for making a button and anything else you tried and we'll help you fix it. Use the [edit option to update your question](https://stackoverflow.com/posts/64801741/edit). – VC.One Nov 12 '20 at 19:51
  • OK, I edited the IP for security, I want a button that opens/closes the image, refreshing it if its already open. – Dr pepper Nov 14 '20 at 13:46

1 Answers1

0

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>
VC.One
  • 14,790
  • 4
  • 25
  • 57
  • Ok I;ll try that, I didnt know you could simply redifine the src by the elements ID. – Dr pepper Nov 15 '20 at 12:01
  • No it doesnt work. I should point out that the server for the video stream is a different server to the one serving the webpage with the refresh button. When I look at the error message in the console the page is adding together the IP address for the web page server with that of the video server, and that is obviously causing a 404. – Dr pepper Nov 15 '20 at 18:04
  • What browser are you testing on? This works fine in Chrome. The different servers part doesn't matter, all it wants is a valid URL as replacement. **(1)** Make sure you use the full URL to video _eg:_ `"https://something...etc..xx:82"` **(2)** Try to test with 2 images (jpg or png) from **other** alternative servers or sites, now does it work? – VC.One Nov 15 '20 at 19:03
  • Hmm, I'm using chrome, when I click the button it comes up with an 404 error, not found, and the console reports its tried to contact an IP which is that of the webpage and that of the video stream server put together. I deleted my addition I'll try it again in case I made the mistake. – Dr pepper Nov 15 '20 at 20:06