chrislatorres/camera_ml.html

## camera_ml.html
<html>
  <head>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
  <script src="three.js"></script>
  <script>
    let container, scene, camera, renderer, display;

    function init() {
      container = document.createElement('div');
      document.body.appendChild(container);
      scene = new THREE.Scene();
      scene.matrixAutoUpdate = false;
      // scene.background = new THREE.Color(0x3B3961);
      camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
      // camera.position.set(0, 1, 0);
      // camera.lookAt(new THREE.Vector3());
      scene.add(camera);
      // const ambientLight = new THREE.AmbientLight(0x333333);
      renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true,
      });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      // window.browser.magicleap.RequestDepthPopulation(true);
      // renderer.autoClearDepth = false;
      container.appendChild(renderer.domElement);
      renderer.setAnimationLoop(animate);
    }
    function animate(time, frame) {
     renderer.render(scene, renderer.vr.enabled ? renderer.vr.getCamera(camera) : camera);
    }
    init();
    (async () => {
      console.log('request device');
      display = await navigator.xr.requestDevice();
      console.log('request session');
      const session = await display.requestSession({
        exclusive: true,
      });
      display.session = session;
     session.requestAnimationFrame((timestamp, frame) => {
        renderer.vr.setSession(session, {
          frameOfReferenceType: 'stage',
        });
        const viewport = session.baseLayer.getViewport(frame.views[0]);
        const width = viewport.width;
        const height = viewport.height;
        renderer.setSize(width * 2, height);
        renderer.setAnimationLoop(null);
        renderer.vr.enabled = true;
        renderer.vr.setDevice(display);
        renderer.vr.setAnimationLoop(animate);
        console.log('running!');
      });
    })();


    (() => {
      let cameraTracker = null;
      const server = window.browser.http.createServer((req, res) => {
        console.log('got request', req.url);
        let match;
        if (req.url === '/') {
          res.statusCode = 302;
          res.setHeader('Location', '/examples/camera_client.html');
          res.end();
        } else if (match = req.url.match(/\.(html|js)$/)) {
          fetch('file:///package' + req.url)
            .then(proxyRes => {
              if (proxyRes.ok) {
                return proxyRes.arrayBuffer()
                  .then(arrayBuffer => {
                    const type = (() => {
                      switch (match[1]) {
                        case 'html': return 'text/html';
                        case 'js': return 'application/javascript';
                        default: return 'text/plain';
                      }
                    })();
                    res.setHeader('Content-Type', type);
                    const buffer = Buffer.from(arrayBuffer);
                    res.end(buffer);
                  });
              } else {
                res.statusCode = proxyRes.status;
                res.end();
                return null;
              }
            })
            .catch(err => {
              console.warn(err.stack);
              res.statusCode = 500;
              res.end();
            });
        /* } else if (req.url === '/frame') {
          if (frameData) {
            console.log('send frame data', typeof frameData, frameData.constructor && frameData.constructor.name, frameData && frameData.length);
            res.setHeader('Content-Type', 'application/octet-stream');
            res.end(frameData);
          } else {
            res.statusCode = 404;
            res.end();
          } */
        } else {
          res.statusCode = 404;
          res.end();
        }
      });
      const wss = new window.browser.ws.Server({
        server,
      });
      wss.on('connection', (c, request) => {
        console.log('open connection');
        if (!cameraTracker) {
          const _onCameraFrame = e => {
            // console.log('camera frame', a.length, c.readyState === window.browser.ws.OPEN);
            const frameData = Buffer.from(e.data);
            for (let i = 0; i < cameraTracker.callbacks.length; i++) {
              cameraTracker.callbacks[i](frameData);
            }
          };
          window.browser.magicleap.RequestCamera(_onCameraFrame);
          cameraTracker = {
            callbacks: [],
          };
        }

        const _cameraTrackerCallback = frameData => {
          if (c.readyState === window.browser.ws.OPEN) {
            c.send(frameData);
          }
        };
        cameraTracker.callbacks.push(_cameraTrackerCallback);
        c.on('close', () => {
          console.log('close connection 1');
          cameraTracker.callbacks.splice(cameraTracker.callbacks.indexOf(_cameraTrackerCallback), 1);
          console.log('close connection 2');
          // window.browser.magicleap.CancelCamera(_onCameraFrame);
          console.log('close connection 3');
        });
      });
      server.listen(7999, '0.0.0.0', () => {
        console.log('listening');
      });
      server.on('error', err => {
        console.warn('server error', err.stack);
      });
    })();
  </script>
  </body>
</html>
	<html>
	<head>
	<style>
	body {
	margin: 0;
	}
	</style>
	</head>
	<body>
	<script src="three.js"></script>
	<script>
	let container, scene, camera, renderer, display;

	function init() {
	container = document.createElement('div');
	document.body.appendChild(container);
	scene = new THREE.Scene();
	scene.matrixAutoUpdate = false;
	// scene.background = new THREE.Color(0x3B3961);
	camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
	// camera.position.set(0, 1, 0);
	// camera.lookAt(new THREE.Vector3());
	scene.add(camera);
	// const ambientLight = new THREE.AmbientLight(0x333333);
	renderer = new THREE.WebGLRenderer({
	antialias: true,
	alpha: true,
	});
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	// window.browser.magicleap.RequestDepthPopulation(true);
	// renderer.autoClearDepth = false;
	container.appendChild(renderer.domElement);
	renderer.setAnimationLoop(animate);
	}
	function animate(time, frame) {
	renderer.render(scene, renderer.vr.enabled ? renderer.vr.getCamera(camera) : camera);
	}
	init();
	(async () => {
	console.log('request device');
	display = await navigator.xr.requestDevice();
	console.log('request session');
	const session = await display.requestSession({
	exclusive: true,
	});
	display.session = session;
	session.requestAnimationFrame((timestamp, frame) => {
	renderer.vr.setSession(session, {
	frameOfReferenceType: 'stage',
	});
	const viewport = session.baseLayer.getViewport(frame.views[0]);
	const width = viewport.width;
	const height = viewport.height;
	renderer.setSize(width * 2, height);
	renderer.setAnimationLoop(null);
	renderer.vr.enabled = true;
	renderer.vr.setDevice(display);
	renderer.vr.setAnimationLoop(animate);
	console.log('running!');
	});
	})();


	(() => {
	let cameraTracker = null;
	const server = window.browser.http.createServer((req, res) => {
	console.log('got request', req.url);
	let match;
	if (req.url === '/') {
	res.statusCode = 302;
	res.setHeader('Location', '/examples/camera_client.html');
	res.end();
	} else if (match = req.url.match(/\.(html\|js)$/)) {
	fetch('file:///package' + req.url)
	.then(proxyRes => {
	if (proxyRes.ok) {
	return proxyRes.arrayBuffer()
	.then(arrayBuffer => {
	const type = (() => {
	switch (match[1]) {
	case 'html': return 'text/html';
	case 'js': return 'application/javascript';
	default: return 'text/plain';
	}
	})();
	res.setHeader('Content-Type', type);
	const buffer = Buffer.from(arrayBuffer);
	res.end(buffer);
	});
	} else {
	res.statusCode = proxyRes.status;
	res.end();
	return null;
	}
	})
	.catch(err => {
	console.warn(err.stack);
	res.statusCode = 500;
	res.end();
	});
	/* } else if (req.url === '/frame') {
	if (frameData) {
	console.log('send frame data', typeof frameData, frameData.constructor && frameData.constructor.name, frameData && frameData.length);
	res.setHeader('Content-Type', 'application/octet-stream');
	res.end(frameData);
	} else {
	res.statusCode = 404;
	res.end();
	} */
	} else {
	res.statusCode = 404;
	res.end();
	}
	});
	const wss = new window.browser.ws.Server({
	server,
	});
	wss.on('connection', (c, request) => {
	console.log('open connection');
	if (!cameraTracker) {
	const _onCameraFrame = e => {
	// console.log('camera frame', a.length, c.readyState === window.browser.ws.OPEN);
	const frameData = Buffer.from(e.data);
	for (let i = 0; i < cameraTracker.callbacks.length; i++) {
	cameraTracker.callbacks[i](frameData);
	}
	};
	window.browser.magicleap.RequestCamera(_onCameraFrame);
	cameraTracker = {
	callbacks: [],
	};
	}

	const _cameraTrackerCallback = frameData => {
	if (c.readyState === window.browser.ws.OPEN) {
	c.send(frameData);
	}
	};
	cameraTracker.callbacks.push(_cameraTrackerCallback);
	c.on('close', () => {
	console.log('close connection 1');
	cameraTracker.callbacks.splice(cameraTracker.callbacks.indexOf(_cameraTrackerCallback), 1);
	console.log('close connection 2');
	// window.browser.magicleap.CancelCamera(_onCameraFrame);
	console.log('close connection 3');
	});
	});
	server.listen(7999, '0.0.0.0', () => {
	console.log('listening');
	});
	server.on('error', err => {
	console.warn('server error', err.stack);
	});
	})();
	</script>
	</body>
	</html>