rpasta42/gyrocam.html

## gyrocam.html
<!DOCTYPE html>
<html>
   <head>
      <title>Pokemon clone</title>
      <style>
         body { margin: 0; }
         canvas { width: 100%; height: 100% }
      </style>
   </head>
   <body>
      <script src="three.js"></script>
      <script src="gyro.min.js"></script>
      <script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>

      <video id='video' style='opacity:0.6;width:100%;height:100%;position:fixed;z-index:1' autoplay></video>
      <canvas style='opacity:0.3;position:fixed;width:100%;height:100%;z-index:1;' id='canvas11' ></canvas>

      <div style='color:white;position:fixed' id='yo'>This is a HTML Canvas Camera + Gyro + 3js test</div>

      <script>
         gyro.frequency = 300;


         var scene = new THREE.Scene();
         var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

         var renderer = new THREE.WebGLRenderer();
         renderer.setSize(window.innerWidth, window.innerHeight);
         document.body.appendChild(renderer.domElement);

         var geometry = new THREE.BoxGeometry(1, 1, 1);
         var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
         var cube = new THREE.Mesh( geometry, material );
         scene.add(cube);

         camera.position.z = 5;

         gyro.frequency = 1000;
         var render = function () {
            requestAnimationFrame( render );
            var o = gyro.getOrientation();
            camera.rotation.x = -o.beta / 100 - 50;
            camera.rotation.y = o.gamma / 100;

            renderer.render(scene, camera);
         };

         render();

      </script>

   <script>
      // Put event listeners into place
      window.addEventListener("DOMContentLoaded", function() {
         // Grab elements, create settings, etc.
         var canvas = document.getElementById("canvas11"),
            context = canvas.getContext("2d"),
            video = document.getElementById("video"),
            videoObj = { video: true }

         function errBack(error) {
            alert('cannot capture video: ' + error.code);
            console.log("Video capture error: ", error.code);
         };

         // Put video listeners into place
         if(navigator.getUserMedia) { // Standard
            navigator.getUserMedia(videoObj, function(stream) {
               video.src = stream;
               video.play();
            }, errBack);

         } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
            navigator.webkitGetUserMedia(videoObj, function(stream){
               //alert(stream);
               video.src = window.URL.createObjectURL(stream); //window.webkitURL.createObjectURL(stream);
               video.play();
            }, errBack);

         }
         else if(navigator.mozGetUserMedia) { // Firefox-prefixed
            navigator.mozGetUserMedia(videoObj, function(stream){
               video.src = window.URL.createObjectURL(stream);
               video.play();
            }, errBack);
         }
      }, false);
   </script>
   </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Pokemon clone</title>
	<style>
	body { margin: 0; }
	canvas { width: 100%; height: 100% }
	</style>
	</head>
	<body>
	<script src="three.js"></script>
	<script src="gyro.min.js"></script>
	<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>

	<video id='video' style='opacity:0.6;width:100%;height:100%;position:fixed;z-index:1' autoplay></video>
	<canvas style='opacity:0.3;position:fixed;width:100%;height:100%;z-index:1;' id='canvas11' ></canvas>

	<div style='color:white;position:fixed' id='yo'>This is a HTML Canvas Camera + Gyro + 3js test</div>

	<script>
	gyro.frequency = 300;


	var scene = new THREE.Scene();
	var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

	var renderer = new THREE.WebGLRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);

	var geometry = new THREE.BoxGeometry(1, 1, 1);
	var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
	var cube = new THREE.Mesh( geometry, material );
	scene.add(cube);

	camera.position.z = 5;

	gyro.frequency = 1000;
	var render = function () {
	requestAnimationFrame( render );
	var o = gyro.getOrientation();
	camera.rotation.x = -o.beta / 100 - 50;
	camera.rotation.y = o.gamma / 100;

	renderer.render(scene, camera);
	};

	render();

	</script>

	<script>
	// Put event listeners into place
	window.addEventListener("DOMContentLoaded", function() {
	// Grab elements, create settings, etc.
	var canvas = document.getElementById("canvas11"),
	context = canvas.getContext("2d"),
	video = document.getElementById("video"),
	videoObj = { video: true }

	function errBack(error) {
	alert('cannot capture video: ' + error.code);
	console.log("Video capture error: ", error.code);
	};

	// Put video listeners into place
	if(navigator.getUserMedia) { // Standard
	navigator.getUserMedia(videoObj, function(stream) {
	video.src = stream;
	video.play();
	}, errBack);

	} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
	navigator.webkitGetUserMedia(videoObj, function(stream){
	//alert(stream);
	video.src = window.URL.createObjectURL(stream); //window.webkitURL.createObjectURL(stream);
	video.play();
	}, errBack);

	}
	else if(navigator.mozGetUserMedia) { // Firefox-prefixed
	navigator.mozGetUserMedia(videoObj, function(stream){
	video.src = window.URL.createObjectURL(stream);
	video.play();
	}, errBack);
	}
	}, false);
	</script>
	</body>
	</html>