Estoy tratando de hacer una aplicación web con youtube iframe api , usando socket.io . El objetivo de la aplicación es ver y controlar videos de YouTube sincronizados, pude lograr esto con controles personalizados con las funciones del reproductor.
Pero quiero que esto suceda con los controles nativos de YouTube, así que descubrí que se puede hacer escuchando los eventos usando la función onPlayerStateChange(),

Cliente:

 const onPlayerStateChange = event => { console.log(event.data); switch (event.data) { case 1: playVid(); break; case 2: pauseVid(); break; }; const playVid = () => { console.log("play"); socket.emit( "send-data", { state: "play", time: player.getCurrentTime(), }, room ); }; const pauseVid = () => { console.log("pause"); socket.emit( "send-data", { state: "pause", time: player.getCurrentTime(), }, room ); }; socket.on("recv-data", data => { if (data.state == "play") { if (Math.abs(data.time - player.getCurrentTime()) > 1) player.seekTo(data.time); player.playVideo(); } else if (data.state == "pause") { player.pauseVideo(); } });

Servidor:

 io.on("connection", socket => { socket.on("send-data", (data, room) => { io.to(room).emit("recv-data", data); }); socket.on("join-room", room => { socket.join(room); }); });

Cuando más de un reproductor se conecta en una habitación reproduciendo el video, en algún momento, el estado del reproductor se desordena con una serie de reproducciones y pausas, tanto que la pantalla se congela.

 index.js:107 play index.js:90 2 index.js:119 pause index.js:90 1 index.js:107 play index.js:90 2 index.js:119 pause index.js:90 1 index.js:107 play index.js:90 2 index.js:119 pause index.js:90 1 index.js:107 play index.js:90 2 index.js:119 pause index.js:90 1 and goes on...

¿Qué estoy haciendo mal? y como corregir esto?