​

Brett Peterson

​

Adapted from calebfoss videorecorder webcam example

p5.video recorder

https://github.com/calebfoss/p5.videorecorder

​

*/

​

//  Declare variable to store VideoRecorder object

let videoRecorder;

let capture;

let recordButton, playButton, stopButton;

let videoPlayback;

let recordingState = false;

let recordingStartMillis;

let durationMillis = 5000;

let yPos;

let increment = 20;

let limit = 100;

let appState = 0;

let slomoSpeed = 0.5;

let mySound;

let lowThresh = 1500;

let highThresh = 4100;

let recordingCountdownStart;

let recordingCountdownDuration = 5000;

​

function setup() {

  createCanvas(640, 480);

  fill(0);

  rect(0,0,width, height);

  yPos = height/2-(320/2);

  //  Create a webcam capture with video and audio

  //  When the stream is ready, setup the buttons

  capture = createCapture({ video: true, audio: true }, setupButtons);

  //  Mute webcam audio to prevent feedback

  capture.volume(0);

  //  Hide capture element (because it will be displayed on canvas instead)

  capture.hide();

  //  Create a new VideoRecorder instance

  //    with webcam capture as input

  videoRecorder = new p5.VideoRecorder(capture);

  //  Set callback for when recording is completed

  //    and video file has been created

  videoRecorder.onFileReady = showPlayback;

  mySound = loadSound('boo.mp3');

}

​

function draw() {

  //  If playing back the recording

  if (videoPlayback && videoPlayback.time() > 0 && videoPlayback.time() < 4.9) {

    //  Display video playback

    videoPlayback.speed(slomoSpeed);

    image(videoPlayback, 0, yPos, 640, 480);

    print(videoPlayback.time());

  } else {

    //  Otherwise display webcam

    image(capture, 0, yPos, 640, 480);

    //  If recording

    if (videoRecorder.recording) {

      //  Display a red circle indicator

      noStroke();

      fill(200, 40, 20);

      circle(width - 50, 50, 50);

    }

  }

  if (recordingState){

    if (millis() >= recordingStartMillis + durationMillis){

      videoRecorder.stop();

      recordingState = false;

      appState = 3;

      setTimeout(restartLoop, 5000/slomoSpeed);

    }  

  }

  // Setup masks

  noStroke();

  fill(0);

  rect(0,0,width, 100);

  rect(0,height-100,width, 100);

  rect(0, 0, 160, height);

  rect(480, 0, 160, height);

  // On-screen Instructions

  textAlign(CENTER);

  textSize(20);

  fill(38, 143, 209);

  if (appState == 0){

    text("Press START to Begin", width/2, 50);

  } else if (appState == 1){

    text("Center your face in the box below using the up and down buttons", width/2, 50);

    let roundedSeconds = round((recordingCountdownDuration - (millis() - recordingCountdownStart))/1000);

    text("Recording will start in " + roundedSeconds, width/2, height - 50);

  } else if (appState == 2){

    text("Camera is recording", width/2, 50);

  } else if (appState == 3){

    text("Watch your startle response!", width/2, 50);

  }

}

​

//  Create buttons and hide all except record

function setupButtons() {

  // playButton = createButton("Play");

  // playButton.hide();

  // recordButton = createButton("Record");

  // recordButton.mousePressed(startRecording);

  // stopButton = createButton("Stop");

  // stopButton.hide();

}

​

​

function startRecording() {

  //  Set buttons to manage recording

  //    and show hidden buttons

  // stopButton.mousePressed(() => videoRecorder.stop());

  // stopButton.show();

  appState = 2;

  //  Start recording

  videoRecorder.start();

  recordingState = true;

  recordingStartMillis = millis();

  let timeTillPlay = random(lowThresh, highThresh);

  setTimeout(playSound, timeTillPlay);

}

​

function showPlayback() {

  //  Create video element to display recording

  videoPlayback = createVideo(videoRecorder.url);

  //  Hide video element (because it will be displayed on canvas instead)

  videoPlayback.hide();

//   //  Set buttons to manage playback

//   playButton.mousePressed(() => videoPlayback.play());

//   playButton.show();

//   stopButton.mousePressed(() => videoPlayback.stop());

  videoPlayback.play();

}

​

function playSound(){

  mySound.play();

}

​

function restartLoop() {

  appState = 0;

}

​

function keyPressed() {

  if (key === "s"){

    appState = 1;

    setTimeout(startRecording, 5000);

    recordingCountdownStart = millis();

  } else if (keyCode === UP_ARROW){

    yPos -= increment;

    if (abs(yPos) >= limit){

      yPos = -limit;

    }

    print(yPos);

  } else if (keyCode === DOWN_ARROW){

    yPos += increment;

    if (abs(yPos) >= limit){

      yPos = limit;

    }

    print(yPos);

  }

}

​

// function mousePressed() {

//   if (mouseX > 0 && mouseX < windowWidth && mouseY > 0 && mouseY < windowHeight) {

//     let fs = fullscreen();

//     fullscreen(!fs);

//   }

// }

​