MSE Three.js - Squashed Seek Workaround

Broken

by dustinkerstein

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<span id="text1"></span>
<br>
<span id="text2"></span>
<br>
<span id="text3"></span>
<div id="container"></div>

CSS

body {
  background-color: black;
}

span {
  position: absolute;
  color: white;
}

JavaScript

var container, mesh, video, camera, scene, renderer, texture;
var sourceBuffer;
var frameRate;
var index = 0;
var count = 0;
var segments = [];
var ms = new MediaSource();
var videoBits, arrayOfBytes, chunk, file;
var firstFrameTimerId;
var firstFrameDecodeTime;
var t0, t1;

var text1 = document.getElementById('text1');
var text2 = document.getElementById('text2');
var text3 = document.getElementById('text3');

var renderedCount = 0;
var skippedCount = 0;
var textureUploadTime = 5;

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();

var video = document.createElement('video');
video.src = window.URL.createObjectURL(ms);
ms.addEventListener('sourceopen', onMediaSourceOpen);

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);

function render() {

  if (video.readyState >=3) {
    index = (index + 1) % (segments.length-1);
    nextSegment(index);
    texture.needsUpdate = true;
  }
	t0 = performance.now();
  renderer.render(scene, camera);
  t1 = performance.now();
  var renderTime = (t1-t0).toFixed(3);
  //console.log("renderTime: " + renderTime)
  if (renderTime < textureUploadTime) {
  	skippedCount++;
    text2.innerHTML = "renderedCount: " +  renderedCount + " skippedCount: " + skippedCount;
   } else {
   	renderedCount++;
    text2.innerHTML = "renderedCount: " +  renderedCount + " skippedCount: " + skippedCount;
   }
   text3.innerHTML = "last render ms:...