createCanvas(500, 500);  // Make the canvas

​

  // Load the video (replace with your actual video file)

  video = createVideo('finalvideo.mp4');

  video.hide();  // Hide the default video player

​

  // Check to see if WebSerial is available

  if (!navigator.serial) {

    alert("WebSerial is not supported in this browser. Try Chrome or MS Edge.");

  }

​

  // Initialize WebSerial

  serial = new p5.WebSerial();

​

  // Add listeners for connecting/disconnecting:

  navigator.serial.addEventListener("connect", portConnect);

  navigator.serial.addEventListener("disconnect", portDisconnect);

​

  // Check for available ports and set up handlers

  serial.getPorts();

  serial.on("noport", makePortButton);

  serial.on("portavailable", openPort);

  serial.on("requesterror", portError);

  serial.on("data", serialEvent);

  serial.on("close", makePortButton);

  console.log("hello");

}

​

function draw() {

  background(0);

  // Display the video on the canvas if it's playing

  if (video) {

    image(video, 0, 0, width, height);

  }

}

​

// Create a button to select the serial port

function makePortButton() {

  portButton = createButton("Choose Serial Port");

  portButton.position(10, 10);

  portButton.mousePressed(() => {

    serial.requestPort();

  });

}

​

// Open the serial port when available

function openPort() {

  serial.open();

  if (portButton) portButton.hide();

}

​

// Handle serial port connection

function portConnect() {

  console.log("Port connected.");

}

​

// Handle serial port disconnection

function portDisconnect() {

  console.log("Port disconnected.");

  makePortButton();  // Show the button to reconnect

}

​

// Handle serial errors

function portError(err) {

  console.error("Serial port error: " + err);

}

​

// Handle incoming serial data

function serialEvent() {

  let data = serial.readLine();  // Read incoming data as a string

  console.log("in serialevent");

  if (data) {

    inData = data.trim();        // Remove any whitespace from the data

    console.log("Received:", inData);

    // Check if the message is 'PLAY_VIDEO'

    if (inData === "PLAY_VIDEO") {

      video.play();              // Play the video

    }

  }

}

​