使用 AJAX 在网页上动态预加载/显示网络摄像头快照

Question

我有一台 IP 摄像机，可以将实时视频流式传输到我的网站。问题是，它是由 ActiveX 控件驱动的。更糟糕的是，这个控件是无符号的。为了向使用 IE 以外的浏览器或（理所当然地）不愿更改其安全设置的人们提供更安全的替代方案，我正在利用内置快照脚本的相机，该脚本提供 640x480 实时 JPEG 图像。计划是使用 Javascript 每约 500 毫秒更新一次屏幕上的实时图像，而无需重新加载整个页面。

我尝试使用 Image() 对象预加载图像并在 onload 触发时更新图像元素的 SRC 属性：

function updateCam() {
  var url = "../snapshot.cgi?t=" + new Date().getTime();
  img = new Image();
  img.onload = function() {
    $("#livePhoto").attr("src", url);
    camTimer = setTimeout(updateCam, 500);
  }
  img.src = url;
}

这工作得很好，但很难确定相机何时被禁用，我需要这样做才能优雅地降级。在这种情况下，内部快照脚本设置为返回 204（无内容）的 HTTP 状态代码，当然我无法使用 Image 对象检测到这一点。此外，onload 事件并非 100% 可靠。

因此，我使用 jQuery（版本 1.2.6）ajax 函数对 URL 执行 GET 请求，并在 complete 回调中评估状态代码并相应地设置 URL：

function updateCam() {
  var url = "../snapshot.cgi?t=" + new Date().getTime();

  $.ajax({
    type: "GET",
    url: url,
    timeout: 2000,
    complete: function(xhr) {
      try {
        var src = (xhr.status == 200) ? url : '../i/cam-oos.jpg';
        $("#livePhoto").attr("src", src);            
      }
      catch(e) {
        JoshError.log(e);
      }

      camTimer = setTimeout(updateCam, 500);
    }
  });
}

这很好用。 但仅在 IE 中！ 这是我想回答的问题：为什么这在 Firefox 或 Chrome 中不起作用？ complete 事件甚至不会在 Firefox 中触发。它确实在 Chrome 中触发，但很少设置 SRC 实际加载请求的图像（通常它不显示任何内容）。

Answer 1

发布第二个答案，因为第一个确实不正确。我无法测试此解决方案（因为我无权访问您的网络摄像头脚本），但我建议您尝试清理来自摄像头的响应 - 因为您显然无法处理原始图像数据，请尝试添加 dataFilter设置如下：

function updateCam() {
  var url = "../snapshopt.cgi?t=" + new Date().getTime();

  $.ajax({
    type: "GET",
    url: url,
    timeout: 2000,
    dataFilter : function(data, type) {
       return '<div></div>' //so it returns something...
    },
    complete: function(xhr) {
      try {
        var src = (xhr.status == 200) ? url : '../i/cam-oos.jpg';
        $("#live").attr("src", src);            
      }
      catch(e) {
        JoshError.log(e);
      }

      camTimer = setTimeout(updateCam, 500);
    }
  });
}

就像我说的，我无法对此进行测试 - 但它可能允许 jquery 使用状态代码而不会像疯了一样打破。

Answer 2

img.onerror = function(){
    alert('offline');
}

Answer 3

好吧，我最终在非 IE 浏览器上使用了 data URI scheme（向 Eric Pascarello 致敬）。我编写了一个 HTTP 处理程序（在 VB.NET 中）来代理 IP 摄像头并对图像进行 base-64 编码：

Imports Common
Imports System.IO
Imports System.Net

Public Class LiveCam
    Implements IHttpHandler

    Private ReadOnly URL As String = "http://12.34.56.78/snapshot.cgi"
    Private ReadOnly FAIL As String = Common.MapPath("~/i/cam-oos.jpg")        

    Public Sub ProcessRequest(ByVal context As System.Web.HttpContext) Implements System.Web.IHttpHandler.ProcessRequest
        Dim Data As Byte()

        With context.Response
           .ContentEncoding = Encoding.UTF8
           .ContentType = "text/plain"
           .Write("data:image/png;base64,")

           Try
               Using Client As New WebClient()
                   Data = Client.DownloadData(URL)
               End Using
           Catch ex As WebException
               Data = File.ReadAllBytes(FAIL)
           End Try

           .Write(Convert.ToBase64String(Data))
        End With
    End Sub
End Class

然后我只是放了一点非 IE 检测（使用经典的 document.all 检查）以便调用正确的 URL/设置正确的 SRC：

function updateCam() {
  var url = (document.all) ? "../snapshot.cgi?t=" : "../cam.axd?t=";

  url += new Date().getTime();

  $.ajax({
    type: "GET",
    url: url,
    timeout: 2000,
    complete: function(xhr) {
      try {
        var src;

        if(document.all)
          src = (xhr.status == 200) ? url : '../i/cam-oos.jpg';
        else
          src = xhr.responseText;

        $("#livePhoto").attr("src", src);            
      }
      catch(e) {
        JoshError.log(e);
      }

      camTimer = setTimeout(updateCam, 500);
    }
  });
}

很遗憾，我不得不求助于这种解决方法。我讨厌浏览器检测代码，我讨厌我的服务器上的额外负载。代理不仅会迫使我浪费更多的带宽，而且由于代理固有的缺点以及对图像进行 base-64 编码所需的时间，它不会有效地运行。此外，它不会像 IE 一样优雅地降级 as。虽然我可以重新编写代理以使用 HttpWebRequest 并返回正确的状态码等。我只是想要尽可能简单的方法，因为我厌倦了处理这个！

谢谢大家！

Answer 4

我相信 jquery 会尝试解释来自服务器的响应。我相信一些浏览器对响应解释更宽容，所以限制性更强的浏览器会失败，因为图像不能被视为 HTML！

解决方案是使用 HEAD 请求类型而不是 GET（类型：“HEAD”）。这样，您仍将获得状态响应，而无需获取图像本身。因此响应将是空的（不应该把你搞砸）。此外，响应速度应该更快。