Renderizar una cadena de imágenes como un video en javascript

Estoy intentando sintetizar un video usando una secuencia de imágenes en JavaScript. El problema es que el "video" es espasmódico, lo cual se solucionó usando una especie de búfer. Sin embargo, ahora el problema es que las imágenes se descargan mucho más rápido de lo que se generan.Renderizar una cadena de imágenes como un video en javascript

Si tiene una fuente de imágenes que cambia, como una cámara IP, puede intentar el siguiente ejemplo. Lo que he notado es que, el "video" aún se actualiza bastante despacio, sin embargo, mientras miro un detector de paquetes, puedo ver que la imagen en realidad se está recuperando completamente mucho más rápido de lo que se está procesando.

Aquí está el ejemplo:

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

Fuente

2010-12-15 ArturPhilibin

+1 pregunta interesante –

Buscando una solución yo mismo. Aquí hay un pequeño y agradable artículo sobre cómo hacer algo increíblemente conveniente para la carcasa de la cámara IP.

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

También intente cargar todas las imágenes en una tira de imágenes (stuf CSS) (suponiendo que no habría una gran cantidad de imágenes) y ocultar todos, pero en primer lugar con overflow: hidden. A continuación, cambie la posición de la tira de imagen por el ancho de la imagen con setInterval (básicamente un control deslizante muy rápido sin animaciones de transición). En ese caso, todas las imágenes ya estarían cargadas Y renderizadas, y usted puede controlar el tiempo entre cada "cuadro".

Fuente

2014-11-23 23:06:26 Gawran

En lugar de cargar imágenes tan a menudo como sea posible, puede utilizar el método window.setInterval para hacer una carrera función en un intervalo establecido, por ejemplo, diez veces por segundo.

Puede comenzar a cargar la siguiente imagen tan pronto como haya mostrado una imagen, pero en lugar de mostrar el evento de carga, puede dejar que la función que se está ejecutando en un intervalo lo haga.

Fuente

2010-12-15 10:04:05 Guffa

Su video casi seguramente será desigual, a menos que se garantice que el tamaño de las imágenes sea uniforme de alguna manera. E incluso entonces, la carga de las imágenes dependerá de las condiciones de la red. Sobre su problema de que el script cargue imágenes más rápido de lo que se muestran, no hay forma de determinar el origen de eso, a menos que tengamos acceso real a su fuente.

Reescribiendo el código utilizando Stack Exchange API como fuente de la imagen y monitoreando la actividad con Firebug, podemos ver que la actividad de la red coincide aproximadamente con lo que vemos en la pantalla.

alt text

El código utilizado es:

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

Ver el código de trabajo en vivo aquí: (. En firefox-no es un problema en otros navegadores) http://www.jsfiddle.net/yijiang/r957s/

Fuente

2010-12-15 10:15:57

El código fuente que tengo en la pregunta hace que el problema de las imágenes se recupere más rápido que el renderizado. Tu código también cuando lo uso con mi cámara. Todas las imágenes están siempre alrededor de 60kB y está en una LAN, así que creo que puede ser que el navegador no pueda procesar las imágenes tan rápido como pueda descargarlas. – ArturPhilibin

@DaSilva_Ireland En ese caso, probablemente no esté utilizando las herramientas adecuadas para el problema; probablemente querrá pasar a usar algo más especializado en el manejo de este –

tuve un problema similar Al final descargué literalmente mi película como una tira de película, la puse en un div oculto de desbordamiento y compensé la imagen por la altura de un marco. ¡Guarda algunas k en el tamaño total del archivo para arrancar! Hice mi tira de película con gdlib

Fuente

2012-03-31 01:04:33

Renderizar una cadena de imágenes como un video en javascript

Respuesta

Cuestiones relacionadas