Video 打开/关闭a<；img>；视频流_Video_Camera_Esp32_Html5 Img

Video 打开/关闭a<；img>；视频流

video camera

Video 打开/关闭a<；img>；视频流,video,camera,esp32,html5-img,Video,Camera,Esp32,Html5 Img,我使用Arduino Esp32和摄像头将视频流传输到我创建的网页中。Esp32在大约一小时后关闭，因此页面需要刷新以返回流（当没有可用图像时，窗口仅显示符号）所以我想有一个按钮，重新打开图像视频流，我已经尝试了各种事情，但没有成功。一个问题是Esp32是HTTP服务器而不是HTTPS 问题：我想要一个打开/关闭图像的按钮，如果图像已经打开，则刷新它。这是我的代码： <img style="-webkit-user-select: none;margin: auto;&

我使用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

事件）“刷新”

属性
下面是一些可测试的代码。如果它解决了您的问题，请告诉我：
<!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>





刷新视频
函数vidUpdate（）
{
//#按ID访问图像标记并更改源URL
document.getElementById（“myimage”）.src=“xx.xx.xx.xx:82”；
}
但您的实际问题是什么。。。如何制作刷新网页的HTML按钮？展示你制作按钮的代码和你尝试过的任何东西，我们将帮助你修复它。使用.OK，我编辑IP是为了安全，我需要一个按钮来打开/关闭图像，如果图像已经打开，则刷新它；我会试试看，我不知道你可以简单地通过元素ID重新定义src。不，它不起作用。我应该指出，视频流服务器与使用刷新按钮为网页提供服务的服务器不同。当我在控制台中查看错误消息时，该页面正在将网页服务器的IP地址与视频服务器的IP地址相加，这显然会导致404。您正在测试哪个浏览器？这在铬上很好用。不同的服务器部分并不重要，它所需要的只是一个有效的URL作为替换。（1） 确保使用视频的完整URL，例如：“https://something...etc..xx:82“
（2）尝试使用来自其他替代服务器或站点的2个图像（jpg或png）进行测试，现在可以了吗？嗯，我正在使用chrome，当我单击按钮时，会出现404错误，未找到，控制台报告其试图联系的IP是网页和视频流服务器的IP。我删除了我添加的内容，我会再试一次，以防出错。