JSFiddle - React, Tailwind, and code Playground

by dustinkerstein

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<pre id="readyState"></pre>
<div id="container"></div>

JavaScript

var container, mesh, geometry, video, camera, scene, renderer, texture, material, videoInitialized = false,
  videoSeeked = false,
  isUserInteracting = false;

var sourceBuffer;
var frameRate;
var index = 0;
var segments = [];
var ms = new MediaSource();
var videoBits, arrayOfBytes, chunk, file;
var text = document.getElementById('readyState');
container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
camera.target = new THREE.Vector3(0, 0, 0);
scene = new THREE.Scene();
geometry = new THREE.SphereBufferGeometry(500, 60, 40);
geometry.scale(-1, 1, 1);

var video = document.createElement('video');
video.src = window.URL.createObjectURL(ms);
ms.addEventListener('sourceopen', onMediaSourceOpen);
video.preload = "auto";
texture = new THREE.Texture(video);
texture.minFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
scene.add(camera);
mesh = new THREE.Mesh(
  new THREE.PlaneGeometry(1920, 1080),
  new THREE.MeshBasicMaterial({
    map: texture
  }));
mesh.position.set(0, 0, -1000);
scene.add(mesh);
camera.add(mesh);

renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

getData('sd_dash.mpd');

function animate() {
  renderer.animate(render);
}

function render() {
	text.innerHTML = video.readyState;
  if (video.readyState === video.HAVE_FUTURE_DATA) {
    index = (index + 1) % segments.length;
    nextSegment(index);
    texture.needsUpdate = true;
  }

  renderer.render(scene, camera);
}

function videoInit(initBytes) {
  videoBits = initBytes;
  chunk = initBytes.slice(0, parseInt(segments[0].getAttribute("mediaRange").toString().split('-')[1]) + 1);
  appendToBuffer(chunk);
  animate();
}

function onMediaSourceOpen() {
  sourceBuffer = ms.addSourceBuffer('video/mp4; codecs="avc1.640033"');
  sourceBuffer.mode = 'sequence';
}

function...