// Open this sketch up 9 times to send video back and forth

​

​

let allConnections = [];

let vidWidth = 160;

let vidHeight = 120;

let p5live;

let nameField;

​

​

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

}

​

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

  }

}

​

// We got a new stream!

function gotOtherStream(stream, id) {

  // This is just like a video/stream from createCapture(VIDEO)

  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() {

  //change locally

  allConnections['Me'].x = mouseX;

  allConnections['Me'].y = mouseY;

  //send to others

  let dataToSend = {

    dataType: 'location',

    x: mouseX,

    y: mouseY

  };

  // Send it

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

}

​

function enteredName() {

  //change locally

  allConnections['Me'].name = nameField.value();

  //

  let dataToSend = {

    dataType: 'name',

    name: nameField.value()

  };

  print(dataToSend);

  // Send it

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

}

​

function gotData(data, id) {

  // If it is JSON, parse it

​

  let d = JSON.parse(data);

​

  print(d.dataType);

  if (d.dataType == 'name') {

    allConnections[id].name = d.name;

  } else if (d.dataType == 'location') {

    allConnections[id].x = d.x;

    allConnections[id].y = d.y;

  }

}