Rendering einer Kette von Bildern, wie ein video in javascript

Ich versuche zu synthetisieren, ein video über einen stream die Bilder in JavaScript.
Das problem ist das "video" ist entweder jerky, die wurde gelöst, indem Sie einen Puffer von Arten. Aber jetzt das problem ist, dass die Bilder tatsächlich heruntergeladen, weit schneller, als Sie dargestellt werden.

Wenn Sie eine Quelle von Bildern, die änderungen, wie eine IP-Kamera können Sie versuchen, das Beispiel unten. Was ich bemerkt habe, ist, dass das "video" noch updates Recht langsam, jedoch, während Sie ein Paket-sniffer, ich kann sehen, dass das Bild tatsächlich in vollem Umfang abgerufen werden weit schneller, als es gerendert wird.

Hier ist das Beispiel:

<HTML>
  <HEAD>
    <SCRIPT SRC="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
    </SCRIPT>
    <SCRIPT>
      function startVideo()
      {
        //when the buffer image is loaded, put it in the display
        $('#image-buffer').load(function()
        {
          var loadedImage = $(this).attr('src');

          $('#image-displayed').attr('src', loadedImage);

          $(this).attr('src',
            'http://path.to/image.jpg?nocache=' + Math.random());
        });

        $('#image-buffer').attr('src',
          'http://path.to/image.jpg?nocache=' + Math.random());
      }

      function stopVideo()
      {
        $('#image-buffer').unbind('load');
        $('#image-buffer').attr('src', '');
        $('#image-displayed').attr('src', '');
      }
    </SCRIPT>
  </HEAD>
  <BODY>
    <BUTTON ONCLICK="startVideo();">Start Video</BUTTON><BR/>
    <BUTTON ONCLICK="stopVideo();">Stop Video</BUTTON><BR/>
    <IMG ID="image-displayed"/>
    <IMG ID="image-buffer" STYLE="visibility: hidden;"/>
  </BODY>
</HTML>
  • +1 interessante Frage
InformationsquelleAutor ArturPhilibin | 2010-12-15
  1. 3

    Suche eine Lösung für mich. Hier ist ein netter kleiner Artikel über das tun etwas erstaunlich bequem für die IP-Kamera Fall.

    http://techslides.com/convert-images-to-video-with-javascript

    Auch versuchen, laden alle Bilder in einem Bildstreifen (CSS stuf) (vorausgesetzt, es wäre nicht eine große Menge von Bildern) und " alle ausblenden aber erstmal mit overflow: hidden. Dann Bild ändern position des Bandes für die Breite des Bildes mit setInterval (im Grunde eine sehr schnelle regler ohne übergang Animationen). In diesem Fall sind alle Bilder schon geladen UND gerendert, und Sie können Steuern, timing zwischen jedem "Bild".

    InformationsquelleAutor Gawran
  2. 4

    Das video wird fast sicher sein, jerky, es sei denn, die Größe der Bilder wird garantiert, konsequent zu sein in irgendeiner Weise. Und selbst dann, ist das laden der Bilder abhängig von der Netzwerk-Bedingungen. Zu Ihrem problem des Skripts, Bilder laden schneller, als Sie angezeigt werden, es gibt keinen Weg, um zu bestimmen, die Quelle der, dass, es sei denn, wir bekommen einen aktuellen Zugriff auf Ihre Quelle.

    Den code umschreiben, durch die Stack-Exchange-API als Quelle für Bild-und monitoring-Aktivitäten mit Hilfe von Firebug können wir sehen, dass die Netzwerk-Aktivität etwa mit dem übereinstimmen, was wir auf dem Bildschirm sehen.

    Rendering einer Kette von Bildern, wie ein video in javascript

    Der verwendete code ist: 

    $('#buffer').load(function(){
    $('#video').attr('src', this.src);
    this.src = sites[Math.floor(Math.random() * sites.length)].logo_url + '?cache=' + new Date().getTime();
}).trigger('load');

    Sehen, dieser code funktioniert hier Leben: http://www.jsfiddle.net/yijiang/r957s/

    • Der source-code habe ich in der Frage das problem verursacht, die Bilder werden schneller abgerufen, als gerendert wird. Dein code auch, wenn ich es mit meiner Kamera. Alle Bilder sind immer rund 60kB und es ist auf einer LAN, so dass ich denke, es kann nur sein, dass der browser nicht dargestellt werden können die Bilder so schnell, wie er Sie herunterladen kann.
    • In diesem Fall sind Sie wahrscheinlich nicht mit den richtigen tools für die problem - Sie werden wahrscheinlich wollen, sich zu bewegen auf, mit etwas, das mehr ist spezialisiert im Umgang mit diesem
    InformationsquelleAutor Yi Jiang
  3. 3

    Ich hatte ein ähnliches problem (in firefox-kein Problem in anderen Browsern.) Am Ende habe ich buchstäblich heruntergeladen, mein Film als Filmstreifen, legen es in einen overflow hidden div und offset das Bild durch die Höhe des Rahmens. Spart ein paar k auf die Dateigröße zu Booten! Ich habe meine Filmstreifen mit gdlib

    InformationsquelleAutor Trass Vasston
  4. 1

    Statt Bilder laden, so oft wie möglich, können Sie die window.setInterval Methode, um eine Funktion auszuführen in einem festgelegten Intervall, beispielsweise zehn mal pro Sekunde.

    Können Sie beginnen, laden Sie das nächste Bild, sobald Sie angezeigt haben ein Bild, aber anstatt das load-Ereignis es zu zeigen, lassen Sie die Funktion, die ausgeführt wird, in einem Intervall tun.

    • können Sie erläutern / code schreiben bitte?
    InformationsquelleAutor Guffa
Schreibe einen Kommentar