index.html

<!doctype html>
<html lang = "en">
  <head>
    <title>Audio Chat VR</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <style>
      body{
        width:100%;
        height:100%;
        background-color: #000;
        color: #fff;
        margin:0px;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
  <audio></audio>

    
<script>


/*
 * Debug parameters.
 */
WebVRConfig = {
  /**
   * webvr-polyfill configuration
   */
  // Forces availability of VR mode.
  //FORCE_ENABLE_VR: true, // Default: false.
  // Complementary filter coefficient. 0 for accelerometer, 1 for gyro.
  //K_FILTER: 0.98, // Default: 0.98.
  // How far into the future to predict during fast motion.
  //PREDICTION_TIME_S: 0.040, // Default: 0.040 (in seconds).
  // Flag to disable touch panner. In case you have your own touch controls
  //TOUCH_PANNER_DISABLED: true, // Default: false.
  // Enable yaw panning only, disabling roll and pitch. This can be useful for
  // panoramas with nothing interesting above or below.
  //YAW_ONLY: true, // Default: false.
  // Enable the deprecated version of the API (navigator.getVRDevices).
  //ENABLE_DEPRECATED_API: true, // Default: false.
  // Scales the recommended buffer size reported by WebVR, which can improve
  // performance. Making this very small can lower the effective resolution of
  // your scene.
  BUFFER_SCALE: 0.5, // default: 1.0
  // Allow VRDisplay.submitFrame to change gl bindings, which is more
  // efficient if the application code will re-bind it's resources on the
  // next frame anyway.
  // Dirty bindings include: gl.FRAMEBUFFER_BINDING, gl.CURRENT_PROGRAM,
  // gl.ARRAY_BUFFER_BINDING, gl.ELEMENT_ARRAY_BUFFER_BINDING,
  // and gl.TEXTURE_BINDING_2D for texture unit 0
  // Warning: enabling this might lead to rendering issues.
  //DIRTY_SUBMIT_FRAME_BINDINGS: true // default: false
};
</script>

<!--
  A polyfill for Promises. Needed for IE and Edge.
  -->
<script src="es6-promise/dist/es6-promise.js"></script>

<!--
  three.js 3d library
  -->
<script src="three/build/three.js"></script>

<!--
  VRControls.js acquires positional information from connected VR devices and applies the transformations to a three.js camera object.
   -->
<script src="three/examples/js/controls/VRControls.js"></script>

<!--
  VREffect.js handles stereo camera setup and rendering.
  -->
<script src="three/examples/js/effects/VREffect.js"></script>

<!--
  A polyfill for WebVR using the Device{Motion,Orientation}Event API.
  -->
<script src="webvr-boilerplate/node_modules/webvr-polyfill/build/webvr-polyfill.js"></script>

<!--
  Helps enter and exit VR mode, provides best practices while in VR.
  -->
<script src="webvr-boilerplate/build/webvr-manager.js"></script>


<script src="/socket.io/socket.io.js"></script>
<script src="socket.io-stream.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="recorder.min.js"></script>
<script src="encoderWorker.min.js"></script>
<script src="recorder.js"></script>


<script>


//import { getAudioContext } from '../audio/AudioContext';
//NEW PLAN
//create a "scene manager"
//called when 'setupstage' is called
//hm i don't think this is how websockets should be used
//i guess it should only check the database ONE time, when it loads. 
//thenceforth, it should add to the database (for new clients connecting), and perhaps an occasinal check to make sure no weirdness happened
//client to client transmissions should happen instantly via emit and on
//need 2 check socket stuff again...

//var audioCount

function sceneManager(){
  //checks to see if the length of the array in the database is greater than the length of the objects in the scene
  //if yes, then 
  audioObjectReceiver();
}


  //var audioLoader = new THREE.AudioLoader();


  var socket = io();
  //var recorder
  var isRecording = false;
  var isInitialized = false;
  var preloadedSpheres = [];
  var liveSpheres = [];
  var audio_context;
  var recorder;
  var recordingImage;
  var isVisualizing = false;
  var firstTime = true;  

  var renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setPixelRatio(window.devicePixelRatio);
  // Append the canvas element created by the renderer to document body element.
  document.body.appendChild(renderer.domElement);
  // Create a three.js scene.
  var scene = new THREE.Scene();
  // Create a three.js camera.
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
  var listener = new THREE.AudioListener();
  camera.add(listener);
  // Apply VR headset positional data to camera.
  //var audioLoader = new THREE.AudioLoader();

  var cubes = [];
  var clock;

  var gamepadL, gamepadR;
  //var gamepadO;
  var standingMatrix = new THREE.Matrix4();


  //figure out how to alter this for the vive through a check at the top?
  var controls = new THREE.VRControls(camera);
  controls.standing = true;
  // Apply VR stereo rendering to renderer.
  var effect = new THREE.VREffect(renderer);
  effect.setSize(window.innerWidth, window.innerHeight);
  var button0Lpressed = false;
  var button1Lpressed = false;
  var button2Lpressed = false;
  var button3Lpressed = false;
  var button0Rpressed = false;
  var button1Rpressed = false;
  var button2Rpressed = false;
  var button3Rpressed = false;


  window.addEventListener("keydown", handleInit, false);
  //window.addEventListener("keydown", handleStart, false);
  window.addEventListener("keydown", handleStop, false);
  //window.addEventListener("keydown", handleInit, false);

//
function handleInit(e){
  if (e.keyCode=="75"){
    start();
    isInitialized = true;
    visualizeRecording();
    //initialize also triggeres getusermedai...
    console.log("k initializes the program");
  }
}


function handleStop(e){
  if (e.keyCode=="76"){
    isRecording = false;
    recorder && recorder.stop();
    console.log("L stops the program");
    removeVisualization();
    createDownloadLink();
    recorder.clear();
  }
}


function startUserMedia(stream) {
    console.log("USER MEDIA STREAM STARTING!")
    var input = audio_context.createMediaStreamSource(stream);


    // Uncomment if you want the audio to feedback directly
    //input.connect(audio_context.destination);
    //__log('Input connected to audio context destination.');
    recorder = new Recorder(input);  
    recorder.record();
    //recorder.start();
    isRecording = true;
    firstTime = false;
    console.log("recording started")
  }


  function createDownloadLink() {
    //console.log("Trying to create download linnk");
    recorder && recorder.exportWAV(function(blob) {
      //console.log(blob);
      var url = URL.createObjectURL(blob);
      //console.log(url);
      console.log("CREATE DOWNLOAD LINK IS CALLING MAKENEWSPHERE")
      makeNewSphere(blob);
    });
  }

function start() {
    console.log("we got to start");
    navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
    });
};


// Add a repeating grid as a skybox.
clock = new THREE.Clock();
var boxSize = 5;
var loader = new THREE.TextureLoader();
loader.load('webvr-boilerplate/img/box.png', onTextureLoaded);
function onTextureLoaded(texture) {
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
  texture.repeat.set(boxSize, boxSize);

  var geometry = new THREE.BoxGeometry(boxSize, boxSize, boxSize);
  var material = new THREE.MeshBasicMaterial({
    map: texture,
    color: 0x01BE00,
    side: THREE.BackSide
  });
  // Align the skybox to the floor (which is at y=0).
  skybox = new THREE.Mesh(geometry, material);
  skybox.position.y = boxSize/2;
  scene.add(skybox);
  // For high end VR devices like Vive and Oculus, take into account the stage
  // parameters provided.
  setupStage();
}
// Create a VR manager helper to enter and exit VR mode.
var params = {
  hideButton: false, // Default: false.
  isUndistorted: false // Default: false.
};
var manager = new WebVRManager(renderer, effect, params);


// Create 3D objects.
var geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
var material = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh(geometry, material);
var soundLoaderList = [];

//removed htcvive gamepads, added oculus gamepads
var gamepadL = new THREE.Mesh(new THREE.BoxGeometry(0.1,0.1,0.1), material);
var gamepadR = new THREE.Mesh(new THREE.BoxGeometry(0.1,0.1,0.1), material);
//var gamepadO = new THREE.Mesh(new THREE.BoxGeometry(0.1,0.1,0.1), material);

console.log("3d objects are created");

// Position cube mesh to be right in front of you.
cube.position.set(0, controls.userHeight, -1);
gamepadL.position.set(-0.5, controls.userHeight, -1);
gamepadR.position.set(.5, controls.userHeight, -1);
//gamepadO.position.set(.5, controls.userHeight, -1);
// Add cube mesh to your three.js scene
scene.add(cube);
//gamepadL
scene.add(gamepadL);
//gamepadR
scene.add(gamepadR);
//scene.add(preSphere);
//scene.add(gamepadO);


//gamepad shit from arturitu

function updateGamepads() {
  //console.log(update Gamepads was called);

  if ( ! display ) { //changed to display from vrD
    console.log("Seems like there's no vr display detected");

    return;

  }
  var delta = clock.getDelta();

  var gamepads = navigator.getGamepads();

  var test1 = gamepads.length;
  //console.log("There are "+ test1 + "Gamepads");
  //console.log(gamepads.id);


  for ( var i = 0; i < gamepads.length; ++ i ) {


    var gamepad = gamepads[i];
    if ( gamepad && gamepad.pose ) {

      var hand;
      if ( i === 0 ) {

        hand = gamepadR;
        //hand = gamepadR;

      }else {

        hand = gamepadL;

      }
 
      updateGamepadPose(hand, gamepad.pose);


      for ( var j = 0; j < gamepad.buttons.length; ++ j ) {

        if ( gamepad.buttons[ j ].pressed ) {

          //console.log("i detect button is pressed");

          manageButtons( i, j, gamepad.buttons[ j ].value, gamepad.buttons[ j ].pressed );

        }else {

          //console.log("i detect button is maybe not pressed?");
          manageButtons( i, j, gamepad.buttons[ j ].value, gamepad.buttons[ j ].pressed );

        }

      }

    }

  }

}


function manageButtons( handId, buttonId, intensity, pressed ) {
  //console.log("manage buttons function was called");

  if ( buttonId !== 0 && buttonId !==1 && buttonId !== 2 && buttonId !== 3 ) {
    //console.log("nothing was pressed");
    return;

  }


  //this was complately wrong
  // 0 = trackpads
  // 1 = trigger
  // 2 = grip

  // animations for each buttonId
  // close - trigger
  // rock - grip
  // thumb - trackpad
  var button0pressed;
  var button2pressed;
  var button3pressed;
  var button1pressed;
  
  //let's get rid of chirality for now?

 if ( handId === 0 ) { //RIGHT

    button0pressed = button0Rpressed;
    button1pressed = button1Rpressed;
    button2pressed = button2Rpressed;
    button3pressed = button3Rpressed;

  }else { //if the handID is 1, basically (LEFT)

    button0pressed = button0Lpressed;
    button1pressed = button1Lpressed;
    button2pressed = button2Lpressed;
    button3pressed = button3Lpressed;

  }

 switch ( buttonId ) {
    case 0: 
      if ( button0pressed === pressed ) {

        return;

      }
      if ( handId === 0 ) { //RIGHT
        //actually i removed handedness
        console.log("right trackpad")
        button0Rpressed = pressed;
        console.log("button 0r has been set to pressed");
      }else {
        console.log("left trackpad")
        button0Lpressed = pressed;
      }
     
      break;
    case 1:
      if ( button1pressed === pressed ) {

        return;

      }
      if ( handId === 0 ) { //RIGHT

        button1Rpressed = pressed;
        console.log("right trigger..");

      }else {
        //again removed handedness
        button1Lpressed = pressed;
        //recorder.stop();

      }
      console.log("left trigger...");
      //animation = 'thumb';
      break;
    case 2: //this is the trigger
      if ( button2pressed === pressed ) {

        return;

      }
      if ( handId === 0 ) { //RIGHT
        console.log("right palm button");
        button2Rpressed = pressed;

      }else { //LEFT
        console.log("left palm button");
        button2Lpressed = pressed;
        //one again removed handedness

      }

      break;
    case 3:
      if ( button3pressed === pressed ) {

        return;

      }
      if ( handId === 0 ) {

        //WRONG console.log("right grip");
        button3Rpressed = pressed;

      }else {
        //WRONG console.log("left grip");
        button3Lpressed = pressed;

      }

      break;

  }

}

function updateGamepadPose ( pad, pose ) {
  //console.log("we got to update gamepad pose");

  pad.quaternion.fromArray( pose.orientation );
  pad.position.fromArray( pose.position );

  if ( display.stageParameters ) { //changed display

    pad.updateMatrix();

    standingMatrix.fromArray( display.stageParameters.sittingToStandingTransform );//changed display
    pad.applyMatrix( standingMatrix );
    // pad.geometry.computeFaceNormals();
    pad.geometry.computeVertexNormals();

  }

}


function init(){

//removed audio context stuff from here
      try {
      // webkit shim
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
      window.URL = window.URL || window.webkitURL;
      console.log("tried to create a new audio context");
      
      audio_context = new AudioContext;
    } catch (e) {
      console.log(e);
      alert('No web audio support in this browser! THIS IS MY OWN ERROR MESSAGE');
    }


}


// Kick off animation loop
init();
sceneManager();
//populateAudio();
requestAnimationFrame(animate);
window.addEventListener('resize', onResize, true);
window.addEventListener('vrdisplaypresentchange', onResize, true);


//function audioObjectReceiver(audioObject){


//this visualizes the position the recording will be left in.
//it needs to be updated in the animate function. Look at the rotating cube for clues?
function visualizeRecording(){
  //console.log("visualizeRecording was called")
  var geometry = new THREE.SphereGeometry(0.08, 0.08, 0.08);
  var material = new THREE.MeshBasicMaterial( {color: 0x7CFC00});
  recordingImage = new THREE.Mesh(geometry, material);
  pos_x = gamepadR.position.x;
  pos_y = gamepadR.position.y;
  //console.log(pos_y);
  pos_z = gamepadR.position.z;
  scene.add(recordingImage);
  isVisualizing = true;
}

function removeVisualization(){
  scene.remove(recordingImage);
  isVisualizing = false;
}

function recordingImageUpdate(){
  console.log("is isVisualizing true?" + isVisualizing);
  if (isVisualizing == true) {
    pos_x = gamepadR.position.x;
    pos_y = gamepadR.position.y;
    pos_z = gamepadR.position.z;
    recordingImage.position.set(pos_x, pos_y, pos_z);
  } else {
    return;
  }
}


function annotationMaker(){

  //this just puts preloaded Spheres into the scene

}

function sphereMaker(audioObject){


}


function makeNewSphere(audioObject){
  //wondering if I need this?
  console.log("making a new sphere! adding to positiontest socket emission...")
  //var geometry = new THREE.SphereGeometry(0.1, 0.1, 0.1);
  //var material = new THREE.MeshBasicMaterial( {color: 0xFF0033});
  //var soundSphere = new THREE.Mesh( geometry, material);
  pos_x = camera.position.x -0.3;
  pos_y = camera.position.y;
  pos_z = (camera.position.z - 0.3);
  

  //soundSphere.position.set(pos_x, pos_y, pos_z);
  var id = ('_' + Math.random().toString(36).substr(2, 9));
  socket.emit('positionTest', {id: id, position_x: pos_x, position_y: pos_y, position_z: pos_z, audioObject: audioObject });
  //this is just the visuals. We should properly emit it for now.
  //scene.add(soundSphere);

  socket.on('positionTest', function(audioObject){
      console.log("SOCKET POSITION TEST IS FIRING");
      //sphereMaker(audioObject);
      sphereMakerLive(audioObject);

/*          var pos_x = audioObject['position_x'];
          var pos_y = audioObject['position_y'];
          var pos_z = audioObject['position_z'];
          
          var sgeometry = new THREE.SphereGeometry(0.1, 0.1, 0.1);
          var smaterial = new THREE.MeshBasicMaterial( {color: 0xFF0033});
          var preSphere = new THREE.Mesh(sgeometry, smaterial);

          //console.log("The audio object is " + audioObject[i]['audioObject']);

          var soundFile = audioObject['audioObject'];

          var audioObjectId = audioObject['id'];
          console.log("the id of the object when we receive it from the server is "+ audioObjectId);

          var b64Data = soundFile;
          var blob = b64toBlob(b64Data, 'audio/wav');
          var url = URL.createObjectURL(blob);
          console.log("the url outside of audio loader is" + url)

          preSphere.position.set(pos_x, pos_y, pos_z);
          preloadedSpheres.push({'id': audioObjectId, 'url': url, 'sphere': preSphere})
          console.log("the id of the most recent sphere is "+ audioObjectId);
          //var i = preloadedSpheres.length - 1;
      

            //when i was trying to break this out...
          var audioLoader = new THREE.AudioLoader();

          scene.add(preSphere);

          var sound2 = new THREE.PositionalAudio( listener );

          //FUNCTIONAL BUT LAGS AND CALLS 3X
          audioLoader.load( url, function( buffer ) {
            console.log("AUDIOLOADER INSIDE SOCKET POSITION TEST IS FIRING")
            //console.log("inside of the audioLoader, the i amounts to: "+ i);
            console.log("the url inside of audioloader is " + url);
            //wow this is running the # of times new objects r created, i guess that is.. how a loader works?
            //read about audioloader jf c :|
            //console.log("and the id remains " + preloadedSpheres[i]['id']);
            sound2.setBuffer( buffer );
            sound2.setRefDistance( .005 );
            sound2.setVolume(2);
            sound2.setLoop(true);
            sound2.play();
          });


          preSphere.add(sound2);*/
        });
}

function sphereMakerLive(audioObject){
          console.log("sphereMakerLive was called this many times!")

          var pos_x = audioObject['position_x'];
          var pos_y = audioObject['position_y'];
          var pos_z = audioObject['position_z'];
          
          var sgeometry = new THREE.SphereGeometry(0.1, 0.1, 0.1);
          var smaterial = new THREE.MeshBasicMaterial( {color: 0xFF0033});
          var preSphere = new THREE.Mesh(sgeometry, smaterial);

          //console.log("The audio object is " + audioObject[i]['audioObject']);

          var soundFile = audioObject['audioObject'];

          var audioObjectId = audioObject['id'];

          var b64Data = soundFile;

          var blob = b64toBlob(b64Data, 'audio/wav');
          var url = URL.createObjectURL(blob);

          preSphere.position.set(pos_x, pos_y, pos_z);
          preloadedSpheres.push({'id': audioObjectId, 'url': url, 'sphere': preSphere})
          console.log("the length of preloaded Spheres is" + preloadedSpheres.length);
          var newSphere = preloadedSpheres[preloadedSpheres.length -1];

          audioLo2(newSphere);


}

function audioLo2(newSphere){
 console.log("AUDIOLO 222222 inside OF SOCKET POSITION TEST IS FIRING");
              //console.log("HOW COME WE NEVER GOT TO AUDIO LOADER? WHAT did i ever do to you");
              
              //try makng this audioLoader global..
              var audioLoader = new THREE.AudioLoader();
              

              //preloadedSpheres is a global variable

              var liveSphere = newSphere['sphere']
              //console.log("the i for audioLo is "+ i);
              //console.log("THe i in preloaded spheres is " + i);
              scene.add(liveSphere);
              var sound1 = new THREE.PositionalAudio( listener );
              //console.log("I , AUDIOLO, am running...");
              audioLoader.load( newSphere['url'], function( buffer ) {
                //console.log("The current url is" + preloadedSpheres[i]['url'])
                sound1.setBuffer( buffer );
                sound1.setRefDistance( .005 );
                sound1.setVolume(2);
                sound1.setLoop(true);
                sound1.play();
              });
          
            liveSphere.add( sound1 );

}


function audioObjectReceiver(){
  console.log("I got called by the setupstage function audoObjRec")

  //var audioLoader = new THREE.AudioLoader();
  
  socket.emit('audioObjectReceiver', { });
  socket.on('audioObjectReceiver', function(audioObject){
  console.log('at the very beginning, the lenghth of audio object is ' + audioObject.length);


      console.log("audio object length is " + audioObject.length);

      for (i = 0; i < audioObject.length; i++){
          console.log("calling spheremaker to populate initial scene ")
          sphereMakerWithSound(audioObject, i);
          
      //scene.add(preSphere);
    }

  });
  }

function sphereMakerWithSound(audioObject, i){

          var pos_x = audioObject[i]['position_x'];
          var pos_y = audioObject[i]['position_y'];
          var pos_z = audioObject[i]['position_z'];
          
          var sgeometry = new THREE.SphereGeometry(0.1, 0.1, 0.1);
          var smaterial = new THREE.MeshBasicMaterial( {color: 0xFF0033});
          var preSphere = new THREE.Mesh(sgeometry, smaterial);

          //console.log("The audio object is " + audioObject[i]['audioObject']);

          var soundFile = audioObject[i]['audioObject'];

          var audioObjectId = audioObject[i]['id'];

          var b64Data = soundFile;

          var blob = b64toBlob(b64Data, 'audio/wav');
          var url = URL.createObjectURL(blob);

          preSphere.position.set(pos_x, pos_y, pos_z);
          preloadedSpheres.push({'id': audioObjectId, 'url': url, 'sphere': preSphere})
          console.log("the length of preloaded Spheres is" + preloadedSpheres.length);

          audioLo();
}

function audioLo(){
              console.log("AUDIOLO OUTSIDE OF SOCKET POSITION TEST IS FIRING");
              //console.log("HOW COME WE NEVER GOT TO AUDIO LOADER? WHAT did i ever do to you");
              
              //try makng this audioLoader global..
              var audioLoader = new THREE.AudioLoader();
              

              //preloadedSpheres is a global variable

              var newSphere = preloadedSpheres[i]['sphere'] 
              //console.log("the i for audioLo is "+ i);
              console.log("THe i in preloaded spheres is " + i);
              scene.add(newSphere);
              var sound1 = new THREE.PositionalAudio( listener );
              //console.log("I , AUDIOLO, am running...");
              audioLoader.load( preloadedSpheres[i]['url'], function( buffer ) {
                //console.log("The current url is" + preloadedSpheres[i]['url'])
                sound1.setBuffer( buffer );
                sound1.setRefDistance( .005 );
                sound1.setVolume(2);
                sound1.setLoop(true);
                sound1.play();
              });
          
            newSphere.add( sound1 );
          }


function b64toBlob(b64Data, contentType, sliceSize) {
  contentType = contentType || '';
  sliceSize = sliceSize || 512;

  var byteCharacters = atob(b64Data);
  var byteArrays = [];

  for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    var slice = byteCharacters.slice(offset, offset + sliceSize);

    var byteNumbers = new Array(slice.length);
    for (var i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    var byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
  }
    
  var blob = new Blob(byteArrays, {type: contentType});
  return blob;
}


//MANAGES AUDIO
function manageAudio(){
  //console.log("Inside manage audio");
//removed button1L ||
  if (isRecording == false && isInitialized == false && button1Rpressed == true){
    console.log("We're not recording, and you pressed a button this should initialize the process");

    isInitialized = true;
    isRecording = true;
    console.log("isInitialized is set to true");
    visualizeRecording();
    //we're calling init twice. Seems wrong no?
    //init();
//lets try commenting htis out

    console.log("not calling init from manageAudio anymore");
    //stop recording
  } //possibly do not need this section!
  //removed button1L ||
  //removed button1L ||
 else if (isRecording == true && isInitialized == true && button1Rpressed == true){
    console.log("We're recording, and you pressed right trigger");
    recorder.stop();
    console.log("G stops the program");
    removeVisualization();
    createDownloadLink();
    //try removing "recorder clear" eventually
    recorder.clear();
    isRecording = false;
    console.log("recording should be ended.")
  } else{
    return;
  }
}


// Request animation frame loop function
var lastRender = 0;
function animate(timestamp) {
  var delta = Math.min(timestamp - lastRender, 500);
  lastRender = timestamp;
  // Apply rotation to cube mesh
  cube.rotation.y += delta * 0.0006;
  recordingImageUpdate();
  // Update VR headset position and apply to camera.
  controls.update();
  updateGamepads();
  //should manage audio be called constantly? Not from keyboard testing maybe..
  manageAudio();


  //playSounds();
  

//perhaps this is where we should update the gamepad?

  // Render the scene through the manager.
  manager.render(scene, camera, timestamp);
  requestAnimationFrame(animate);
}


function onResize(e) {
  effect.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
}


var display;


// Get the HMD, and if we're dealing with something that specifies
// stageParameters, rearrange the scene.
function setupStage() {
  navigator.getVRDisplays().then(function(displays) {
    if (displays.length > 0) {
      display = displays[0];
      console.log(display);
      console.log("This is the setupstage function, preceeding text is display");
      if (display.stageParameters) {
        setStageDimensions(display.stageParameters);
        console.log("this is a room-scale device !")
        console.log(display.stageParameters);
        console.log(display.getPose+ "this is the pose");
      }
    }
  });
}
function setStageDimensions(stage) {
  // Make the skybox fit the stage.
  var material = skybox.material;
  scene.remove(skybox);


  // Size the skybox according to the size of the actual stage.
  var geometry = new THREE.BoxGeometry(stage.sizeX, boxSize, stage.sizeZ);
  skybox = new THREE.Mesh(geometry, material);


  // Place it on the floor.
  skybox.position.y = boxSize/2;
  scene.add(skybox);
  // Place the cube in the middle of the scene, at user height.
  cube.position.set(0, controls.userHeight, 0);


}


</script>
  </body>
</html>