javascript - img - getcontext canvas
Rendimiento de transmisión: Canvas vs<img>? (0)
Estoy desarrollando una aplicación que requiere la transmisión constante de imágenes a través de una conexión webSocket a un mínimo de 30 fotogramas por segundo.
Me encontré con un problema de rendimiento y estoy buscando optimizar lo mejor que pueda.
Me preguntaba cuáles serían las diferencias de rendimiento entre utilizar una imagen que se actualiza constantemente (como <img src="someDynamicallyUpdatingBase64Image" /> vs dibujar la imagen en un lienzo ( canvs.drawImage(someDynamicallyUpdatingImage, 0, 0, 640, 480) )
Para agregar algo de contexto, las imágenes que se envían al cliente están siendo tomadas por una cámara ubicada en el lado del servidor (piense en una configuración de cámara IP). Solo podemos sondear la cámara para obtener una imagen individual a la vez, pero este proceso puede realizarse muy rápidamente. El problema es que el cliente tiene que recibir un búfer de bytes, codificar los bytes en una cadena base64 (actualmente estamos usando el método <img src=xyz> ) y hacer que el dom redibuje la imagen. Este proceso es bastante largo y ha causado una gran cantidad de latencia.