let mediaRecorder;

let chunks = [];

let recording = false;

​

function setup() {

  createCanvas(1400, 800);

  video = createCapture(VIDEO);

  video.size(320, 240);

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

​

  // Make sure the video element has loaded before accessing its srcObject

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

    let stream = video.elt.srcObject;

    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

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

      downloadLink.attribute('download', 'recorded-video.mp4');

      downloadLink.position(10, height + 10);

    };

  });

}

​

function draw() {

 background(255, 0, 0);

​

  // Draw the video feed as a layer on top of the canvas

  push(); 

  translate(width / 2 - video.width / 2, height / 2 - video.height / 2);

  image(video, 0, 0);

  pop();

}

​

function keyPressed() {

  if (key===" "){

    setUpSerial();

  }

  // else if (key === 'k') {

  //   startRecording();

  // } else if (key === 's' || key === 'S') {

  //   stopRecording();

  // }

}

​

function startRecording() {

  print("Recording started");

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

    mediaRecorder.start();

    recording = true;

  }

}

​

function stopRecording() {

  print("Recording ended");

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

    mediaRecorder.stop();

    recording = false;

  }

}

function readSerial(data){

  if(data!=null){

    if (data=="START"){

      startRecording(); 

    }

    else if(data=="STOP"){

      stopRecording(); 

    }

  }

}

​