Dynamisch Vorladen/Anzeigen von Webcam-Schnappschüssen auf einer Webseite mit AJAX

Question

Ich habe eine IP-Kamera, die Live-Video auf eine meiner Websites streamen. Problem ist, dass es von einem ActiveX-Steuerelement angetrieben wird. Schlimmer noch, dieses Steuerelement ist nicht signiert. Um eine sicherere Alternative zu den Leuten zu bieten, die andere Browser als IE benutzen oder (rechtmäßig) ihre Sicherheitseinstellungen nicht ändern wollen, klicke ich auf die Kameras, die im Snap-Shot-Skript erstellt wurden und 640x480 JPEG Live-Bilder liefern. Der Plan war, das Bild alle ~ 500ms live auf dem Bildschirm mit Javascript zu aktualisieren, ohne die gesamte Seite neu laden zu müssen.

Ich versuchte, das Bild() Objekt mit dem Bild vorab laden und das SRC-Attribut des Bildelementes zu aktualisieren, wenn sie abgefeuert onload:

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; 
} 

Diese anständig gearbeitet, aber es war schwierig, wenn die bestimmen Die Kamera war deaktiviert worden, was ich tun musste, um mich elegant zu verschlechtern. Das interne Snapshot-Skript wurde so eingerichtet, dass es unter diesen Umständen einen HTTP-Statuscode von 204 (Kein Inhalt) zurückgibt, und natürlich kann ich das Image-Objekt nicht erkennen. Darüber hinaus war das Onload-Ereignis nicht 100% zuverlässig.

Daher verwende ich die jQuery (Version 1.2.6) ajax Funktion eine GET-Anforderung auf der URL zu tun, und auf dem complete Rückruf ich den Statuscode auswerten und die URL entsprechend eingestellt:

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); 
    } 
    }); 
} 

Und das funktioniert wunderbar. Aber nur in IE! Das ist die Frage, die ich gerne beantwortet hätte: Warum funktioniert das nicht in Firefox oder Chrome? Das Ereignis complete wird nicht einmal in Firefox ausgelöst. Es wird in Chrome ausgelöst, aber nur sehr selten lädt das SRC das angeforderte Bild (normalerweise zeigt es nichts an).

Answer 1

Nun, beendete ich die data URI scheme (Hut Spitze zu Eric Pascarello) mit bis zu Nicht-IE-Browsern. Ich schrieb einen HTTP-Handler (in VB.NET) die IP-Kamera und Base-64 kodieren das Bild proxy:

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 

Dann habe ich nur ein wenig Nicht-IE Erkennung setzen (das klassische Dokument verwenden.alle Prüfung), um die korrekte URL/stellen Sie die richtige SRC zu nennen:

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); 
    } 
    }); 
} 

Es ist sehr bedauerlich, die ich für diese Problemumgehung zurückgreifen musste. Ich hasse Browser-Erkennungscode, und ich hasse die zusätzliche Last, die auf meinen Server gelegt wird. Der Proxy wird mich nicht nur zwingen, mehr Bandbreite zu verschwenden, aber er wird wegen der inhärenten Proxy-Nachteile und aufgrund der Zeit, die erforderlich ist, um das Bild zu kodieren, nicht so effizient arbeiten. Darüber hinaus ist es nicht eingerichtet, als würdevoll als IE zu degradieren. Obwohl ich den Proxy neu schreiben könnte, um HttpWebRequest zu verwenden und die richtigen Statuscodes zurückzugeben, etc. Ich wollte nur den einfachsten Weg wie möglich, weil ich es satt habe, damit umzugehen!

Danke an alle!

Answer 2

Ich glaube, die Jquery wird versuchen, die Antwort vom Server zu interpretieren. Ich glaube, einige Browser sind toleranter gegenüber der Interpretation der Antwort, so dass restriktivere Browser scheitern werden, weil ein Bild nicht als HTML angesehen werden kann!

Die Lösung hierfür wäre die Verwendung eines HEAD-Anforderungstyps anstelle von GET (Typ: "HEAD"). Auf diese Weise erhalten Sie immer noch Statusantworten zurück, ohne das Bild selbst zu erfassen. Daher ist die Antwort leer (und sollte Sie nicht vermasseln). Außerdem sollte die Antwort viel schneller sein.

Answer 3

Eine zweite Antwort schreiben, weil die erste wirklich falsch war. Ich kann diese Lösung nicht testen (weil ich keinen Zugriff auf Ihr Webcam-Skript habe), aber ich würde vorschlagen, die Antwort von der Kamera zu bereinigen - da Sie offensichtlich mit den Rohbilddaten nicht umgehen können, versuchen Sie den dataFilter hinzuzufügen Einstellung wie folgt:

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); 
    } 
    }); 
} 

wie ich schon sagte, ich habe dies nicht in der Lage gewesen zu testen - aber es könnte jquery ermöglicht die Statuscodes zu verwenden, ohne wie verrückt zu brechen.

Answer 4

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