如何在HTML中实现Synology Surveillance Web API认证并获取摄像头快照？

我来帮你排查这个问题！Synology Surveillance Station的摄像头快照嵌入网页确实容易在认证上踩坑，毕竟手动浏览器访问和HTML自动请求的机制不太一样。下面是几个常见的解决思路和具体步骤：

手动浏览器访问时，浏览器会自动帮你处理会话Cookie或记住Basic Auth凭证，但HTML里的请求（比如<img>标签）默认不会自动携带这些认证信息，得主动配置：

• HTTP Basic Auth：可以尝试把用户名密码直接嵌入快照URL，格式是http://username:password@your-nas-ip:port/webapi/...。但注意：现代浏览器大多会拦截这种明文凭证的请求，因为存在安全风险，不推荐在生产环境使用。
• Session Cookie认证（更安全）：先通过Synology的官方API获取会话ID（sid），再在请求快照时带上这个sid参数，或者确保请求携带认证后的Cookie。

别用手动访问时的临时链接，一定要用Surveillance Station的标准API接口，格式大概是：

http://your-nas-ip:5000/webapi/entry.cgi?api=SYNO.SurveillanceStation.Camera&method=GetSnapshot&version=1&cameraId=YOUR_CAMERA_ID&_sid=YOUR_SESSION_ID

• 其中cameraId是你的摄像头ID，可以在Surveillance Station的摄像头列表里找到，或者调用SYNO.SurveillanceStation.Camera.List API获取。
• _sid是认证后拿到的会话ID，必须带上（除非你通过Cookie保持了会话）。

如果你的网页和NAS不在同一个域名下，浏览器会触发CORS限制，导致快照请求被拦截：

• 简单方案：把网页部署在NAS本地（比如放在Synology的Web Station目录里），这样就不存在跨域问题。
• 进阶方案：在NAS的控制面板里开启API的CORS支持（部分版本需要在API设置中添加允许的跨域域名）；或者用后端代理——让你的网页服务器先请求NAS的快照，前端再请求自己的服务器接口，绕开浏览器的跨域限制。

如果你用Cookie认证，要确保前端页面先完成认证，并且请求快照时带上Cookie。比如用AJAX先认证再加载快照的示例代码：

// 第一步：调用认证API获取会话
fetch('http://your-nas-ip:5000/webapi/auth.cgi?api=SYNO.API.Auth&method=Login&version=3&account=your-username&passwd=your-password&session=SurveillanceStation&format=sid', {
  method: 'GET',
  credentials: 'include' // 确保保存Cookie
})
.then(response => response.json())
.then(data => {
  if (data.success) {
    // 第二步：加载快照，带上sid参数
    const img = document.createElement('img');
    img.src = `http://your-nas-ip:5000/webapi/entry.cgi?api=SYNO.SurveillanceStation.Camera&method=GetSnapshot&version=1&cameraId=1&_sid=${data.data.sid}`;
    document.body.appendChild(img);
  }
})
.catch(error => console.error('认证失败:', error));

确保你用的账号有足够的权限：

• 登录NAS控制面板→用户和群组，找到该用户，确认勾选了「Surveillance Station」的摄像头查看权限和API访问权限。
• 还要检查Surveillance Station里的摄像头权限，确保该用户能查看目标摄像头。

先用Postman或curl测试快照API是否能返回图片，比如：

curl -u your-username:your-password "http://your-nas-ip:5000/webapi/entry.cgi?api=SYNO.SurveillanceStation.Camera&method=GetSnapshot&version=1&cameraId=1"

如果这个命令能返回图片，说明API本身没问题，问题出在HTML请求的认证传递上；如果不行，先排查API参数或权限。

如果还是没解决，打开浏览器开发者工具（F12）查看快照请求的响应码：401代表认证信息没传对，403可能是权限或跨域问题，根据响应码再针对性排查。

内容的提问来源于stack exchange，提问作者Eric