public/vr.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>CharlieBot - WebCam VR Viewer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
      body {
        margin: 0px;
        overflow: hidden;
      }
      #webglviewer {
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 100;
      }
    </style>
  </head>
  <body>
    <div id="webglviewer"></div>
    <canvas id="tempCanvas"></canvas>
    <!--<script type="text/javascript" src="/webiopi.js"></script>-->
    <script src="js/three.min.js"></script>
    <script src="js/StereoEffect.js"></script>

    <script>
      var scene,
          camera,
          renderer,
          element,
          container,
          effect,
          canvas,
          context;

      init();

      function init() {
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.001, 700);
        camera.position.set(0, 15, 0);
        scene.add(camera);

        renderer = new THREE.WebGLRenderer();
        element = renderer.domElement;
        container = document.getElementById('webglviewer');
        container.appendChild(element);

        effect = new THREE.StereoEffect(renderer);

        element.addEventListener('click', fullscreen, false);

        canvas = document.getElementById('tempCanvas');
        canvas.width = 512;
        canvas.height = 288;
        canvas.width = nextPowerOf2(canvas.width);
        canvas.height = nextPowerOf2(canvas.height);

        function nextPowerOf2(x) {
            return Math.pow(2, Math.ceil(Math.log(x) / Math.log(2)));
        }
        if (window.DeviceOrientationEvent) {
          window.addEventListener('deviceorientation', function(evt) {
            //TODO: Add functions for Servo Control through GPIO
              console.log('Roll : %f',evt.alpha)
              console.log('Yaw : %f',evt.beta)
              console.log('Pitch : %f',evt.gamma)

              // webiopi().ready(function(){
              //webiopi().callMacro("pan_tilt_script.py",[evt.alpha,evt.beta]);
              //webiopi.refreshGPIO(true);
              //})


          }.bind(this));
        }
        context = canvas.getContext('2d');
        texture = new THREE.Texture(canvas);
        texture.context = context;

        var cameraPlane = new THREE.PlaneGeometry(512, 512);

        cameraMesh = new THREE.Mesh(cameraPlane, new THREE.MeshBasicMaterial({
          color: 0xffffff, opacity: 1, map: texture
        }));
        cameraMesh.position.z = -200;

        scene.add(cameraMesh);

        animate();
      }

      function animate() {
        if (context) {
          var piImage = new Image();
          //piImage.crossOrigin = "anonymous";

          piImage.onload = function() {
            console.log('Drawing image');
            context.drawImage(piImage, 0, 0, canvas.width, canvas.height);

            texture.needsUpdate = true;
          }

          piImage.src = "stream?time="+new Date().getTime();


        }

        requestAnimationFrame(animate);

        update();
        render();
      }

      function resize() {
        var width = container.offsetWidth;
        var height = container.offsetHeight;

        camera.aspect = width / height;
        camera.updateProjectionMatrix();

        renderer.setSize(width, height);
        effect.setSize(width, height);
      }

      function update(dt) {
        resize();

        camera.updateProjectionMatrix();
      }

      function render(dt) {
        effect.render(scene, camera);
      }

      function fullscreen() {
        if (container.requestFullscreen) {
          container.requestFullscreen();
        } else if (container.msRequestFullscreen) {
          container.msRequestFullscreen();
        } else if (container.mozRequestFullScreen) {
          container.mozRequestFullScreen();
        } else if (container.webkitRequestFullscreen) {
          container.webkitRequestFullscreen();
        }
      }
    </script>
  </body>
</html>