Estoy construyendo una aplicación que permite que múltiples dispositivos transmitan su cámara web, a través del navegador, a otro dispositivo. Cada dispositivo de transmisión toma una imagen DataURL de la cámara web y la envía a través de WebSocket a un servidor, que luego distribuirá la matriz de imágenes a los espectadores. El espectador analizará el mensaje y mostrará cada imagen en su propio <canvas> individual.

Funciona bien cuando un usuario está transmitiendo, pero cuando un segundo dispositivo comienza a transmitir, el primero se congela. Parece que la última imagen de la matriz es la única que realmente se representa.

He estado revisando este código durante varias horas y no puedo entender lo que me estoy perdiendo aquí.

 var socket = new WebSocket("wss://my_server:8443"); socket.onmessage = function(msg) { //parse the incoming message into a usable array msg = JSON.parse(msg.data); var div = document.getElementById("streams"); //for every incoming stream for (var i in msg) { //create a new Image, then render it onto a canvas element. var img = new Image(); img.onload = function() { //if there isn't a canvas element to render it onto already, create one (for when a stream is created) if (document.getElementById(i) == null) { var c = document.createElement("canvas"); c.width = img.width; c.height = img.height; c.setAttribute("id", i); div.appendChild(c); } //draw the image onto the canvas var canvas = document.getElementById(i); var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0); } //set the Data URL as the image's SRC img.src = msg[i]; } }

Originalmente solo agregué elementos <img> a <div> , pero terminó tardando demasiado en cargarse, creando breves destellos entre cada cuadro.

¿Qué pasa con mi código? Parece congelar todas las secuencias activas, excepto la que se inició más recientemente (la última de la matriz).