Saltearse al contenido
Sistemas Físicos Interactivos 2

Unidad 4

Introducción

En esta unidad vas a incrementar las herramientas de tu caja de herramientas para abordar el proyecto de curso. En la unidad anterior aprendiste a conectar aplicaciones mediante el uso de un servidor y websockets (socket.io). Ahora, llevarás esto a un siguiente nivel mediante un nuevo protocolo: webRTC. Este protocolo te permitirá conectar dos o más clientes directamente y compartir en tiempo real audio, video, datos e incluso el canvas.

¿Qué aprenderás en esta unidad?

En esta unidad vas a explorar el protocolo de comunicación webRTC. Este protocolo te permitirá construir experiencias interactivas con el potencial de compartir audio, video, datos y el canvas de varios clientes o aplicaciones distribuidas y en tiempo real. Recuerda que es posible que el diseño de tu experiencia para el evento en vivo requiera esta característica.

Actividad 01

Live coding

Enunciado: te voy a presentar a la artista Colombiana Alexandra Cárdenas, quien es una programadora y compositora de música electrónica. Alexandra está especializada en la programación de música electrónica en directo. En particular, ella ofrece conciertos conocidos como live coding. En estos conciertos, Alexandra programa música en tiempo real.

Observa estos referentes:

En el concierto anterior, Alexandra utiliza la plataforma Hydra, creada por Olivia Jack. Hydra es una herramienta de live coding para la creación de visuales en tiempo real. Te preguntarás qué tiene que ver esto con el protocolo webRTC. Bueno, la respuesta es que Hydra usa webRTC para compartir las visuales en tiempo real.

Entrega: ¿Qué piensas de la idea de programar música en tiempo real? ¿Que oportunidades crees que puede ofrecer esta práctica en el contexto de Medellín?

Solo para los más curiosos: te presento otros referentes que puedes explorar para que amplíes las posibilidades que ofrece el mundo de la programación creativa en relación al live coding. Algunos de estos referentes siguen en desarrollo activo, otros no tanto. La idea es que explores y te inspires. Si encuentras algo interesante ¿Lo puedes compartir en tu bitácora?

🚀 Tu solución:

Actividad 1

¿Qué piensas de la idea de programar música en tiempo real?

Me parece algo muy interesante, me hace falta ver mas referencias de conciertos en vivo para saber que tal suena, sin embargo a mi me parece mas interesante esta idea de programacion en vivo para los visuales, puede ser una mejor experiencia que el publico con cambiar un numero pueda cambiar algo en lo visuales, como por ejemplo en la herramienta de hydra que esto es posible

¿Que oportunidades crees que puede ofrecer esta práctica en el contexto de Medellín?

Pienso que ahora con el incremento de festivales o conciertos de musica electronica o techno, esta practica puede ofrecer varias oportunidades para innovar en este sector musical, pero como dije en la pregunta anterior se puede utilizar este live coding no solo para la musica si no visuales y luces y demas

Investigación

Vas a experimentar con la biblioteca p5LiveMedia y explorar sus posibilidades.

Actividad 02

Caso de estudio: la biblioteca p5LiveMedia

Enunciado: en esta actividad vas a explorar la biblioteca p5LiveMedia y sus posibilidades.

P5LiveMedia

Entrega:

  • ¿Qué es p5LiveMedia?
  • ¿Qué posibilidades ofrece p5LiveMedia?
  • Replica varios ejemplos de p5LiveMedia que permitan entender sus posibilidades. Trata de seleccionar ejemplos para entender cómo se comparte audio, video, datos y el canvas.
  • Documenta en la bitácora tus hallazgos y las consideraciones que debes tener en cuenta para implementar p5LiveMedia en tu aplicación.

🚀 Tu solución:

Actividad 2

Qué es p5LiveMedia?

Una libreria que utiliza sockets para conectar a dos personas en tiempo real y de forma directa sin pasar la informacion primero a un servidor si no que lo hace directo a cada cliente

¿Qué posibilidades ofrece p5LiveMedia?

Para el proyecto del curso ofrece muchas posibilidades para hacer pruebas con audio y video en tiempo real, como al momento de querer hacer algun diseño generativo usando la voz de algun cliente o puntos de reconocimientos faciales en un buen tiempo de fluides

Replica varios ejemplos de p5LiveMedia que permitan entender sus posibilidades. Trata de seleccionar ejemplos para entender cómo se comparte audio, video, datos y el canvas.

// Ejemplo 1: Compartir video y audio
let myVideo, otherVideo, p5l;


function setup() {
  createCanvas(400, 400);
  let constraints = { audio: true, video: true };
  myVideo = createCapture(constraints, function (stream) {
    p5l = new p5LiveMedia(this, "CAPTURE", stream, "VideoRoom");
    p5l.on("stream", gotStream);
  });
  myVideo.elt.muted = true;
  myVideo.hide();
}


function draw() {
  background(220);
  image(myVideo, 0, 0, width / 2, height);
  if (otherVideo) {
    image(otherVideo, width / 2, 0, width / 2, height);
  }
}


function gotStream(stream, id) {
  otherVideo = createVideo(stream);
  otherVideo.hide();
}


// Ejemplo 2: Compartir datos (mouseX, mouseY)
let sharedData;


function setup() {
  createCanvas(400, 400);
  p5l = new p5LiveMedia(this, "DATA", null, "DataRoom");
  p5l.on("data", gotData);
}


function draw() {
  background(220);
  fill(0);
  ellipse(mouseX, mouseY, 20, 20);
  p5l.send({ x: mouseX, y: mouseY });
  if (sharedData) {
    fill(255, 0, 0);
    ellipse(sharedData.x, sharedData.y, 20, 20);
  }
}


function gotData(data, id) {
  sharedData = data;
}


// Ejemplo 3: Compartir el canvas
let sharedCanvas;


function setup() {
  createCanvas(400, 400);
  background(255);
  p5l = new p5LiveMedia(this, "CANVAS", null, "CanvasRoom");
  p5l.on("data", gotCanvasData);
}


function draw() {
  if (mouseIsPressed) {
    stroke(0);
    line(mouseX, mouseY, pmouseX, pmouseY);
    p5l.send({ x: mouseX, y: mouseY, px: pmouseX, py: pmouseY });
  }
}


function gotCanvasData(data, id) {
  stroke(255, 0, 0);
  line(data.x, data.y, data.px, data.py);
}

Documenta en la bitácora tus hallazgos y las consideraciones que debes tener en cuenta para implementar p5LiveMedia en tu aplicación.

La primera consideracion y mas importante es tener la libreria para poder importarla al proyecto, luego el manejo de las conexiones y tener claro cual es el id, tambien es importante el manejo de datos lo que se quiera enviar ya sea video audio o texto, estos son como los aspectos que considero mas importante al implementar p5livemedia.

Aplicación

En esta fase, vas a transferir lo aprendido en la exploración de la biblioteca p5LiveMedia diseñando e implementando una aplicación que haga uso de la misma.

Actividad 03

Tu propuesta con la biblioteca p5LiveMedia

Enunciado: en esta actividad vas a proponer una aplicación que haga uso de la biblioteca p5LiveMedia. Deja volar tu imaginación y piensa en una aplicación que pueda ser útil para el proyecto de curso.

Entrega:

  • Describe la aplicación que propones.
  • Describe cómo la aplicación propuesta hace uso de la biblioteca p5LiveMedia.
  • Describe cómo la aplicación propuesta se relaciona con el proyecto de curso.
  • Escribe un tutorial que permita replicar la aplicación propuesta.
  • Adiciona el código y enlaces necesarios para replicar la aplicación propuesta.

🚀 Tu solución:

Actividad 3

Describe la aplicación que propones.

Observando y analizando los ejemplos de la activdad pasada me llamo la atencion uno llamado multiple user with data porque me inspiro para una aplicacion que funcione como el juego de adivina quien soy, teniendo la posibilidad de compartir datos y video en tiempo real, se puede hacer un juego donde un usuario recree algo por la camara y el otro mediante texto vaya escribiendo lo que piensa que esta recreando

Describe cómo la aplicación propuesta hace uso de la biblioteca p5LiveMedia.

Inicialmente haria uso de ella con la conexion entre usuarios para trasmitir video y datos en tiempo real, tambien se podria utilizar para el manejo de conexiones, verificar si un usuario se conecto o se desconecto

Describe cómo la aplicación propuesta se relaciona con el proyecto de curso.

No tiene una relacion directa con el tema del diseño generativo pero si se relaciona con la interaccion entre usuarios siendo en tiempo real

Escribe un tutorial que permita replicar la aplicación propuesta.

creando un nuevo proyecto en p5.js y incliyendo los archivos p5LiveMedia en el HTML. Luego, en el archivo sketch.js, definí las variables necesarias para gestionar las conexiones, los videos, el chat y los nombres de los usuarios. En la función setup(), capturé el video de mi cámara y lo configuré para que se ocultara, mientras creaba los campos de entrada para el nombre y los mensajes. Después, establecí la conexión con otros usuarios usando p5LiveMedia, manejando eventos para recibir nuevos streams, desconexiones y mensajes entrantes. En la función draw(), mostré los videos de todos los participantes con sus nombres y agregué una sección para mostrar el chat en la parte inferior. También creé funciones que permitieran enviar mi nombre y mis mensajes a los demás participantes, y manejé la recepción de esos datos para actualizar el chat y mostrar los nombres correctamente. Finalmente, abrí varias pestañas con la aplicación para comprobar que todo funcionara bien

Adiciona el código y enlaces necesarios para replicar la aplicación propuesta.

enlace de la aplicacion para replicar:

https://editor.p5js.org/dano/sketches/HRvsj7kDk

Codigo de la aplicacion nueva que permite encviar mensajes de texto:

let allConnections = [];
let vidWidth = 160;
let vidHeight = 120;
let p5live;
let nameField, messageField;
let chatBox = "";


function setup() {
  createCanvas(480, 360);


  myVideo = createCapture(VIDEO, gotMineConnectOthers);
  myVideo.size(vidWidth, vidHeight);
  myVideo.hide();
  allConnections['Me'] = {
    'video': myVideo,
    'name': "Me",
    'x': random(width),
    'y': random(height)
  }


  nameField = createInput("No Name");
  nameField.changed(enteredName);


  messageField = createInput("");
  messageField.position(nameField.x, nameField.y + 30);
  messageField.changed(sendMessage);
}


function gotMineConnectOthers(myStream) {
  p5live = new p5LiveMedia(this, "CAPTURE", myStream, "arbitraryDataRoomName");
  p5live.on('stream', gotOtherStream);
  p5live.on('disconnect', lostOtherStream);
  p5live.on('data', gotData);
}


function draw() {
  background(220);
  stroke(255);
  for (var id in allConnections) {
    let thisConnectJSON = allConnections[id];
    let x = thisConnectJSON.x;
    let y = thisConnectJSON.y;
    image(thisConnectJSON.video, x, y, vidWidth, vidHeight);
    stroke(0);
    text(thisConnectJSON.name, x, y + 20);
  }


  // Draw chat box
  fill(0);
  text(chatBox, 10, height - 40);
}


// We got a new stream!
function gotOtherStream(stream, id) {
  otherVideo = stream;
  otherVideo.size(vidWidth, vidHeight);
  allConnections[id] = {
    'video': otherVideo,
    'name': id,
    'x': 0,
    'y': 0
  }
  otherVideo.hide();
  mouseDragged() //send them your location
  enteredName() //send them your name
}


function lostOtherStream(id) {
  print("lost connection " + id)
  delete allConnections[id];
}


function mouseDragged() {
  allConnections['Me'].x = mouseX;
  allConnections['Me'].y = mouseY;
  let dataToSend = {
    dataType: 'location',
    x: mouseX,
    y: mouseY
  };
  p5live.send(JSON.stringify(dataToSend));
}


function enteredName() {
  allConnections['Me'].name = nameField.value();
  let dataToSend = {
    dataType: 'name',
    name: nameField.value()
  };
  p5live.send(JSON.stringify(dataToSend));
}


function sendMessage() {
  let message = messageField.value();
  let dataToSend = {
    dataType: 'message',
    name: nameField.value(),
    message: message
  };
  p5live.send(JSON.stringify(dataToSend));
  chatBox += "Me: " + message + "\n";
  messageField.value("");
}


function gotData(data, id) {
  let d = JSON.parse(data);
  if (d.dataType == 'name') {
    allConnections[id].name = d.name;
  } else if (d.dataType == 'location') {
    allConnections[id].x = d.x;
    allConnections[id].y = d.y;
  } else if (d.dataType == 'message') {
    chatBox += d.name + ": " + d.message + "\n";
  }
}

Captura de pantalla 2025-03-16 200600

Consolidación y metacognición

Finalmente, vas a indagar un poco más acerca del protocolo webRTC y reflexionar sobre lo aprendido en esta unidad.

Actividad 04

¿Cómo funciona webRTC?

Enunciado: en esta actividad vas a explorar cómo funciona webRTC. La idea de esta actividad es que profundices en los conceptos que subyacen a la comunicación en tiempo real y cómo webRTC los implementa.

Entrega: vas a documentar en la bitácora tus hallazgos acerca de cómo funciona webRTC. Analiza esta preguntas e indica en cada caso cómo están implementados o aplicados estos conceptos en la aplicación que propusiste en la actividad anterior.

  • ¿Qué es webRTC?
  • ¿Cómo funciona webRTC?
  • ¿Qué es un peer connection?
  • ¿Qué es un data channel?
  • ¿Qué es un media stream?
  • ¿Qué es un ICE server?
  • ¿Qué es un STUN server?
  • ¿Qué es un TURN server?
  • ¿Qué es un signaling server?

🚀 Tu solución:

Actividad 4

¿Qué es WebRTC? WebRTC (Web Real-Time Communication) es una tecnología que permite la comunicación en tiempo real directamente entre navegadores o aplicaciones sin necesidad de servidores intermediarios, facilitando videollamadas, chats de voz, transferencia de archivos y más.

¿Cómo funciona WebRTC? WebRTC conecta dos dispositivos directamente (peer-to-peer) usando varios componentes que se encargan de la comunicación, como la conexión entre pares (peer connection), canales de datos (data channels) y flujos de medios (media streams). Para iniciar la conexión, se necesita un servidor de señalización que ayuda a los dispositivos a encontrarse e intercambiar la información necesaria para establecer el canal directo.

¿Qué es un Peer Connection? Es el canal que conecta directamente dos dispositivos, permitiendo enviar y recibir audio, video y datos. Se encarga de gestionar la conexión, manejar la calidad de la transmisión y reconectarse si es necesario.

¿Qué es un Data Channel? Es un canal dentro de la Peer Connection que permite enviar datos arbitrarios entre los dispositivos, como mensajes de texto, archivos o información de control, con baja latencia y de manera segura.

¿Qué es un Media Stream? Es el flujo de audio y/o video que se captura desde el micrófono o la cámara y se envía a través de la Peer Connection. También puede recibir el flujo del otro dispositivo para mostrarlo localmente.

¿Qué es un ICE Server? ICE (Interactive Connectivity Establishment) es el protocolo que WebRTC usa para encontrar la mejor ruta para conectar dos dispositivos, incluso si están detrás de firewalls o routers. Para esto, se apoya en servidores STUN y TURN.

¿Qué es un STUN Server? Un servidor STUN (Session Traversal Utilities for NAT) ayuda a un dispositivo a descubrir su dirección IP pública y el puerto asignado por el router, permitiendo establecer una conexión directa cuando es posible.

¿Qué es un TURN Server? Un servidor TURN (Traversal Using Relays around NAT) actúa como intermediario cuando no se puede establecer una conexión directa entre dispositivos, retransmitiendo el tráfico de audio, video o datos.

¿Qué es un Signaling Server? Es el servidor que facilita el intercambio inicial de información entre los dispositivos para que puedan encontrarse y establecer la conexión directa. Maneja mensajes como la oferta, la respuesta y los candidatos ICE.

Casos que estan implementados:

WebRTC: La aplicación utiliza p5LiveMedia, una librería que simplifica el uso de WebRTC en p5.js. WebRTC es la tecnología detrás de la conexión entre los participantes, permitiendo la transmisión de video y datos en tiempo real.

Peer Connection: Se crea una conexión entre pares con esta línea:

p5live = new p5LiveMedia(this, “CAPTURE”, myStream, “arbitraryDataRoomName”);

Esto crea una instancia de p5LiveMedia que gestiona la conexión entre los dispositivos, compartiendo el video y los datos.

Data Channel: El canal de datos está implementado mediante el envío y recepción de mensajes JSON. Por ejemplo, cuando se arrastra el mouse, se envía la ubicación del video:

p5live.send(JSON.stringify(dataToSend));

Además, se usa otro mensaje para enviar el nombre del participante:

let dataToSend = { dataType: ‘name’, name: nameField.value() }; p5live.send(JSON.stringify(dataToSend));

Media Stream:

El flujo de video del usuario se captura y se comparte con los demás usando esta línea:

myVideo = createCapture(VIDEO, gotMineConnectOthers); La función gotOtherStream() recibe los streams de los otros participantes y los almacena en el objeto allConnections para dibujarlos en la pantalla.

Signaling Server: El servidor de señalización también lo maneja p5LiveMedia. Se encarga de intercambiar la información inicial necesaria para que los dispositivos se encuentren y puedan establecer la conexión directa. La sala “arbitraryDataRoomName” actúa como un canal de señalización donde los dispositivos comparten información de conexión.

Actividad 05

Autoevaluación

Enunciado: en esta actividad vas a autoevaluar tu desempeño en la unidad. La idea de esta actividad es que reflexiones acerca de tu proceso de aprendizaje y cómo te sientes con los conceptos y habilidades adquiridas.

Entrega: vas a documentar en la bitácora tus respuestas a las siguientes preguntas:

  • ¿Qué conceptos nuevos aprendí en esta unidad?
  • ¿Qué conceptos de la unidad me resultaron más fáciles de entender?
  • ¿Qué conceptos de la unidad me resultaron más difíciles de entender?
  • ¿Qué habilidades nuevas adquirí en esta unidad?
  • ¿Cómo gestioné el tiempo para realizar las actividades de la unidad?
  • ¿Cuánto tiempo tardé en realizar las actividades de la unidad?
  • ¿Qué estrategias de aprendizaje utilicé para aprender los conceptos de la unidad?
  • Dediqué el tiempo suficiente para aprender los conceptos de la unidad o simplemente lo hice por cumplir?
  • ¿Qué tan comprometido estuve con mi aprendizaje en esta unidad?

🚀 Tu solución:

Actividad 5

¿Qué conceptos nuevos aprendí en esta unidad?

El mas importante de todos que es WebRTC y como la biblioteca de p5medialive simplifica todo

¿Qué conceptos de la unidad me resultaron más fáciles de entender?

siento que lo mas facil de entender fue p5medialive tambien porque fue a lo que mas tiempo dedique

¿Qué conceptos de la unidad me resultaron más difíciles de entender?

depronto entender en profundidad lo que hace ice, stunt y turn server ya que por lo que entendi todo eso se simplifica usando la biblioteca de p5medialive

¿Qué habilidades nuevas adquirí en esta unidad?

Poder comunicar dos dispositivos de forma directa

¿Cómo gestioné el tiempo para realizar las actividades de la unidad?

Pude gestionarlo de una mejor forma, sin embargo pude terminar las actividades en la semana correspondiente

¿Cuánto tiempo tardé en realizar las actividades de la unidad?

Las dos semanas establecidas para el desarrollo de la unidad

¿Qué estrategias de aprendizaje utilicé para aprender los conceptos de la unidad?

Poner en practica los conceptos de p5.js

Dediqué el tiempo suficiente para aprender los conceptos de la unidad o simplemente lo hice por cumplir?

En su mayoria de conceptos si tome el tiempo adecuado

¿Qué tan comprometido estuve con mi aprendizaje en esta unidad?

Fue un tema interesante el aprender sobre las comunicaciones en tiempo real por lo que si me comprometi

Actividad 06

Feedback

Enunciado: escribe libremente tus comentarios sobre esta unidad. Además, te pediré que al menos me ayudes con esta pregunta ¿Qué crees que se pueda mejorar en esta unidad para los próximos semestres? Todo lo que escribas será de gran ayuda para mejorar la unidad en el futuro.

Entrega: responde a las preguntas en tu bitácora y justifica tus respuestas con argumentos precisos.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío