我有一个网络摄像头,我想把快照放在网页上。如果我把这个放进浏览器,它会返回一个用户名和密码弹出窗口

http://CAM_IP_ADD:PORT/Streaming/Channels/1/picture

如果我输入用户名和密码,就会得到一个快照。所以我发现如果我把这个输入浏览器,它会返回一个快照
http://USERNAME:PASSWORD@CAM_IP_ADD:PORT/Streaming/Channels/1/picture

所以我想我可以用这个
<!DOCTYPE html>
<html>
<body>
    <img src="http://USERNAME:PASSWORD@CAM_IP_ADD:PORT/Streaming/Channels/1/picture">
</body>
</html>

但它不会返回图像。我如何验证才能使它工作?

最佳答案

您的网络摄像机正在使用基本身份验证,您可以将身份验证字符串添加到url。但是,这是一个不推荐使用的功能(https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#Access_using_credentials_in_the_URL),这可能就是为什么不显示网络摄像头图片的原因:浏览器不再支持该格式,至少不再作为图像链接。
首选的身份验证方法是通过以下格式的授权头

Authorization: Basic [Username:Password]

其中[username:password]必须以base64编码。有关详细信息,请参见上面的链接。
所以一个简单的链接不起作用,你必须设置自定义的http头。为此,您可以设置一个简单的web服务器作为反向代理,也可以使用javascript发出ajax请求,然后将结果呈现为图像。不幸的是,所有这些并不像添加一个简单的链接那么简单。
以下链接可能有助于您开始使用任一选项:
带标题的JS帖子
Set a request header in JavaScript
load and display PNG image (Not base64) requiring basic authentication in JavaScript
Apache反向代理指南
https://httpd.apache.org/docs/2.4/howto/reverse_proxy.html
添加url的方法有可能在一些较旧的浏览器中工作,因此在使用干净但繁琐的方法之前,您可能需要尝试使用其他浏览器

关于html - 如何在HTML中进行基本身份验证?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48789053/

10-11 23:31
查看更多