Rendu d'une chaîne d'images comme une vidéo en javascript

J'essaie de synthétiser une vidéo en utilisant un flux d'images en JavaScript. Le problème est que la "vidéo" est soit saccadée, ce qui a été résolu en utilisant un tampon de toutes sortes. Cependant maintenant le problème est que les images sont réellement téléchargées beaucoup plus rapidement qu'elles sont rendues.Rendu d'une chaîne d'images comme une vidéo en javascript

Si vous avez une source d'images qui change, comme une caméra IP, vous pouvez essayer l'exemple ci-dessous. Ce que j'ai remarqué, c'est que la "vidéo" se met à jour assez lentement, mais en regardant un renifleur de paquets, je peux voir que l'image est réellement récupérée plus rapidement qu'elle ne l'est.

Voici l'exemple:

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

Source

2010-12-15 ArturPhilibin

+ 1 question intéressante –

Je cherche moi-même une solution. Voici un joli petit article sur la façon de faire quelque chose d'incroyablement pratique pour un boîtier de caméra IP.

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

Essayez aussi charger toutes les images dans une bande d'image (CSS Stuf) (en supposant qu'il n'y aurait pas une grande quantité d'images) et cacher tous mais d'abord avec trop-plein: caché. Ensuite, changez la position de la bande d'image pour la largeur de l'image avec setInterval (fondamentalement un curseur très rapide sans animations de transition). Dans ce cas, toutes les images seront déjà chargées et rendues et vous pouvez contrôler le timing entre chaque "frame".

Source

2014-11-23 23:06:26 Gawran

au lieu de chargement des images aussi souvent que possible, vous pouvez utiliser la méthode window.setInterval pour faire une course de fonction à un intervalle de jeu, par exemple dix fois par seconde.

Vous pouvez commencer à charger l'image suivante dès que vous avez affiché une image, mais au lieu d'avoir l'événement de chargement montrant, vous pouvez laisser la fonction qui est en cours d'exécution à un intervalle faire.

Source

2010-12-15 10:04:05 Guffa

Votre vidéo sera presque certainement saccadée, à moins que la taille des images ne soit garantie d'une manière ou d'une autre. Et même alors, le chargement des images dépendra des conditions du réseau. À propos de votre problème de chargement des images plus vite qu'elles ne sont affichées, il n'y a aucun moyen d'en déterminer la source, sauf si nous obtenons un accès réel à votre source.

Réécrire le code en utilisant l'API Stack Exchange comme source d'image et surveillance de l'activité en utilisant Firebug, nous pouvons voir que l'activité de réseau correspond à peu près ce que nous voyons à l'écran.

alt text

Le code utilisé est:

$('#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');

Voir ce code de travail en direct ici: (. Dans firefox-pas un problème dans d'autres navigateurs) http://www.jsfiddle.net/yijiang/r957s/

Source

2010-12-15 10:15:57

Le code source que j'ai dans la question provoque le problème des images récupérées plus rapidement que d'être rendu. Votre code aussi quand je l'utilise avec mon appareil photo. Toutes les images sont toujours autour de 60ko et c'est sur un réseau local donc je pense qu'il se peut que le navigateur ne puisse pas rendre les images aussi vite qu'il peut les télécharger. – ArturPhilibin

@DaSilva_Ireland Dans ce cas, vous n'utilisez probablement pas les bons outils pour le problème - vous voudrez probablement passer à l'utilisation de quelque chose de plus spécialisé dans la gestion de ce problème. –

J'ai eu un problème similaire À la fin, j'ai littéralement téléchargé mon film comme une bande de film, le mettre dans un div caché à débordement et de décaler l'image par la hauteur d'un cadre. Enregistre quelques k sur la taille totale du fichier pour démarrer! J'ai fait ma pellicule avec gdlib

Source

2012-03-31 01:04:33

Rendu d'une chaîne d'images comme une vidéo en javascript

Répondre

Questions connexes