Hi all, firstly, apologies if this is in the wrong section.

Anyway, I have made a webcam ap that uses OpenGL and runs fine in processing (PC and Macs).  The trouble is, it is not working when I export it and run the index.html file.  It just is a white screen where the processing file should be.  I have successfully exported things before, however never using a webcam or OpenGL.  I think that it's the webcam that is the problem though, as looking around it seems that browsers do not automatically trust to run without a digital certificate?  I could be way off, but that's what I got from this page...

(Not aloud to post links to webpages with under 5 posts...but it's
on this processing.org then /hacks/hacks:signapplet

I didn't understand the instructions though besides 1 and 2.

Here is the code below to show that it works...if anyone could help me figure out what goes wrong in exporting it would be much appreciated
Code:

//current controls
//mouse drag to move around pic
//left click - moure contrast
//right click - less contrast
//R = more red
//G = more green
//B = more blue
//O = reset colours
//UP Arrow = More lines - less space between each
//DOWN Arrow = Less lines - more space between each
//C = Capture a screenshot

import processing.opengl.*;
import processing.video.*;



boolean count = false;
Capture myCapture;
float zCount = 2;
float redPlus = 1;
float greenPlus = 1;
float bluePlus = 1;
int numLines = 7;

void setup() {
  //size(640, 480,OPENGL); //USE THIS ON PC (OR P3D)
  size(640, 480,P3D); //USE THIS ON MACS
  frameRate(30); //speeds up the loading
  background(0);
  myCapture = new Capture(this, width, height, 30);
}

void draw() {
  noFill();
  lights();
  strokeWeight(3);
  
  myCapture.read();
  myCapture.loadPixels();
  background(0);

  translate(width/2, height/2, 0);
  
  if (count == true) {
    rotateY(radians(mouseX-(width/2)));
    rotateX(radians(-(mouseY-(height/2))));
  }
  
  translate(-width/2, -height/2, 0);
  
    for (int i = 0; i < myCapture.height; i+=numLines) { //closer to 0, the more lines there are (y axis)
	beginShape();
	for (int j = 0; j < myCapture.width; j++) { // closer to 0, the more depth in each line.
	  int pixelValue = myCapture.pixels[j+i*width];
	  float bPixel = brightness(pixelValue);  //extracts this brighness colour from a pixel
	  float redPixel = red(pixelValue)*redPlus;
	  float greenPixel = green(pixelValue) *greenPlus;
	  float bluePixel = blue(pixelValue) *bluePlus;
	  stroke(redPixel,greenPixel,bluePixel);//RGBOpacity
	  vertex (j, i, (bPixel/zCount)); //closer to 0, the less depth in each line. x,y,z
	  //vertex (j, i, -100); //(x, y, border)  
	}
	endShape();
  }
}

void mouseDragged(){
  count = true;
}

void mouseReleased() {
  count = false;
}

void mousePressed(){
 if (mouseButton == RIGHT) {
  zCount-=0.1;
 } else if (mouseButton == LEFT) {
   zCount+=0.1;
 }
}

void keyPressed(){
 if (key == 'r' || key == 'R') {
   redPlus+=0.25;
 } else if(key == 'g' || key == 'G') {
   greenPlus+=0.25;
 } else if(key == 'b' || key == 'B') {
   bluePlus+=0.25;
 } else if(key == 'o' || key == 'O') { //Original
   redPlus=1;
   greenPlus=1;
   bluePlus=1;
 } else if(keyCode == UP){
   numLines++;
 } else if (keyCode == DOWN) {
   if (numLines > 3){ //Stops is getting into 1 negative and prevents slowdown and makes looks better
     numLines--;
   }   
 } else if (key == 'c' || key == 'C') {
   saveFrame("pic-####.jpg");
 }
}