时间戳

首页 > 解决方案 > 打开/关闭视频流

video - 打开/关闭视频流

问题描述

我正在使用带有摄像头的 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">

标签： videocameraesp32html5-img

解决方案

您可以尝试使用函数（通过事件）创建一个按钮onClick来“刷新”<img>标签。刷新只是重新输入与新属性
相同的 URL 。.src

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

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

推荐阅读