Processing sketch/ web page integration

keciblake

I am creating a sketch that basically plays a video back that a viewer watches and assigns a "grade" of how they are feeling about what they are watching, the sketch records the grades they assign and prints them to a txt document every frame, I want to put this sketch in an html document so that it can be accessed in a browser and not require each user to have processing installed on their machine. I've followed tutorials and created an html page with the processing.js script called and a sketch attached in an html5 canvas object and it works fine some sketches but with this one it won't. Here is my sketch, which works fine when run through processing, but not when called in html using the processing.js script. What am I missing?

import processing.video.*;
Movie myMovie;
int grade = 530;
int gradeDisplay = 50;
int time = 0;
int plus = 5;
int minus = 5;
int h = hour();
int m = minute();
int s = second();
String gradeSTR = Integer.toString(gradeDisplay);
String timeSTR = Integer.toString(time);
PrintWriter gradeOutput;
void setup(){
  size(1500,1500);
  frameRate(24);
  background(0,0,0);
  strokeWeight(4);
  textSize(50);
  myMovie = new Movie(this, "MT 2DAY JANUARY 2014 IMAGE ANALYTICS PASS.mp4");
  myMovie.play();
  gradeOutput = createWriter("grades" + hour() + minute() + second() + ".txt");
}


void draw(){
  image(myMovie,1000,30);
 fill(255,255,255);
 text(grade, 50, 400);
 rect(time+30,grade,5,5);
 stroke(255);
 line(30,30,30,1030);
 noStroke();
 fill(0,0,0);
 rect(50,350,100,100);
  fill(255,255,255);
 text(gradeDisplay, 50, 400);
//print(time);
 time++;
 if (keyPressed) {
   if (key == '1') {
       grade = 930;
       gradeDisplay = 10;
     } else if (key == '2'){
        grade = 830;
        gradeDisplay = 20;
      } else if (key == '3'){
        grade = 730;
       gradeDisplay = 30; 
      } else if (key == '4'){
        grade = 630;
        gradeDisplay = 40;
      } else if (key == '5'){
        grade = 530;
        gradeDisplay = 50;
      } else if (key == '6'){
        grade = 430;
        gradeDisplay = 60;
      } else if (key == '7'){
        grade = 330;
        gradeDisplay = 70;
      } else if (key == '8'){
        grade = 230;
        gradeDisplay = 80;
      } else if (key == '9'){
        grade = 130;
        gradeDisplay = 90;
      } 
 }
 String timeSTR = Integer.toString(time);
 String gradeSTR = Integer.toString(gradeDisplay);
 String data = (timeSTR + "." + gradeSTR );
gradeOutput.println(data);
}
void keyPressed(){
  if (key == ENTER){
  gradeOutput.flush();
  gradeOutput.close();
  exit();
  }
}
void movieEvent(Movie m){
  m.read();
}

PhiLho

I don't think Processing.js supports video out of the box. Perhaps there are workarounds using HTML5's video playing.