打开/关闭一个 <img> 视频流答案

【问题标题】：Open/close a <img> video stream打开/关闭一个 <img> 视频流
【发布时间】：2020-11-12 10:00:10
【问题描述】：

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

【问题讨论】：

您的实际问题是什么... 如何制作一个刷新网页的 HTML 按钮？显示您制作按钮的代码以及您尝试过的任何其他内容，我们将帮助您修复它。使用edit option to update your question。
好的，xx.xx.xx.xx:82" id='myimage' width="640" height="480" name="securityStream"> 我编辑了 IP 以确保安全，我想要一个打开/关闭图像的按钮，如果它的则刷新它已经打开了。

标签： video camera esp32 html5-img

【解决方案1】：

您可以尝试创建一个带有功能的按钮（通过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>

【讨论】：

好吧，我试试，我不知道你可以简单地通过元素 ID 重新定义 src。
不，它不起作用。我应该指出，视频流的服务器与使用刷新按钮为网页提供服务的服务器不同。当我在控制台中查看错误消息时，页面正在将网页服务器的 IP 地址与视频服务器的 IP 地址相加，这显然导致了 404。
你在什么浏览器上测试？这在 Chrome 中运行良好。不同的服务器部分无关紧要，它只需要一个有效的 URL 作为替代。 (1) 确保使用视频的完整 URL eg: "https://something...etc..xx:82" (2) 尝试使用 2 张图片（jpg 或png）从其他替代服务器或网站，现在它工作了吗？
嗯，我使用的是 chrome，当我单击按钮时出现 404 错误，未找到，控制台报告它试图联系网页的 IP，并且的视频流服务器放在一起。我删除了我的添加，如果我犯了错误，我会再试一次。