let mediaRecorders = [];

let chunks = [];

let recording = false;

​

function setup() {

  createCanvas(1200, 800);

​

  // Create four video feeds

  for (let i = 0; i < 4; i++) {

    let video = createCapture(VIDEO);

    video.size(width / 3, height / 3); // Set size for each video feed

    video.hide(); // Hide the video feed if necessary

    videos.push(video);

  }

​

  // Initialize media recorders for each video feed

  videos.forEach((video, index) => {

    video.elt.addEventListener('loadedmetadata', () => {

      let stream = video.elt.srcObject;

      let mediaRecorder = new MediaRecorder(stream);

​

      mediaRecorder.ondataavailable = function (e) {

        chunks.push(e.data);

      };

​

      mediaRecorder.onstop = function () {

        let blob = new Blob(chunks, { 'type': 'video/mp4' });

        chunks = [];

        let videoURL = URL.createObjectURL(blob);

​

        // Create a download link for the recorded video

        if (index >= 2) { // Only create download link for videos in the lower row

          let downloadLink = createA(videoURL, 'Download Video');

          downloadLink.attribute('download', `recorded-video-${index}.mp4`);

          downloadLink.position(10, height + 10);

        }

      };

​

      mediaRecorders.push(mediaRecorder);

    });

  });

}

​

function draw() {

  // Pink to orange gradient background

  let pink = color(255, 192, 203); // Pink color

  let orange = color(255, 165, 0); // Orange color

  setGradient(0, 0, width, height, pink, orange, "Y");

​

  // Calculate the position of the top-left corner of the grid

  let gridX = width / 2 - (width / 3);

  let gridY = height / 2 - (height / 3) + 40; // Adjusted to lower the grid slightly

​

  // Display the video feeds in a grid layout

  for (let i = 0; i < 4; i++) {

    let offsetX = (i % 2) * (width / 3);

    let offsetY = Math.floor(i / 2) * (height / 3);

    image(videos[i], gridX + offsetX, gridY + offsetY);

  }

  // Draw a red ellipse at the top-left corner when recording

  if (recording) {

    fill(255, 0, 0); // Red color

    ellipse(20, 20, 10, 10); // Top-left corner

  }

}

​

function setGradient(x, y, w, h, c1, c2, axis) {

  noFill();

  if (axis == "Y") { // Top to bottom gradient

    for (let i = y; i <= y + h; i++) {

      let inter = map(i, y, y + h, 0, 1);

      let c = lerpColor(c1, c2, inter);

      stroke(c);

      line(x, i, x + w, i);

    }

  } else if (axis == "X") { // Left to right gradient

    for (let i = x; i <= x + w; i++) {

      let inter = map(i, x, x + w, 0, 1);

      let c = lerpColor(c1, c2, inter);

      stroke(c);

      line(i, y, i, y + h);

    }

  }

}

​

function keyPressed() {

  if (key === ' ') {

    setUpSerial();

  }

}

​

function startRecording() {

  print("Recording started");

  if (!recording) {

    // Remove existing download links

    let downloadLinks = selectAll('a');

    downloadLinks.forEach(link => link.remove());

​

    mediaRecorders.forEach(mediaRecorder => {

      if (mediaRecorder.state === 'inactive') {

        mediaRecorder.start();

      }

    });

    recording = true;

  }

}

​

function stopRecording() {

  print("Recording ended");

  if (recording) {

    mediaRecorders.forEach(mediaRecorder => {

      if (mediaRecorder.state === 'recording') {

        mediaRecorder.stop();

      }

    });

    recording = false;

  }

}

​

function readSerial(data) {

  if (data != null) {

    if (data == "START") {

      startRecording();

    } else if (data == "STOP") {

      stopRecording();

    }

  }

}

​

​

​