打开/关闭<img>视频流

编程问答 2022-06-03

问题描述

我正在使用带摄像头的Arduino Esp32将视频流式传输到我创建的网页中。 Esp32大约一个小时后关闭，因此该页面需要 刷新以将流带回（没有图像可用时，窗口仅显示符号）。

因此，我想要一个可以重新打开图像视频流的按钮，我尝试了各种尝试，但均未成功。 一个问题是Esp32是HTTP服务器而不是HTTPS。

问题：
我想要一个打开/关闭图像的按钮，如果它已经打开，则刷新它。 这是我的代码：

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

解决方法

您可以尝试创建一个带有功能的按钮（通过onClick事件来“刷新” <img>标签。
刷新只是重新馈送与新.src属性相同的URL。

这是一些可测试的代码。让我知道它是否可以解决您的问题：

<!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>
cameracameraesp32html5-imgvideovideo