MSE Play Debug Threejs

by dustinkerstein

HTML

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

JavaScript

var index = 1;
var frameLag = 0;
var segments = [];
var ms = new MediaSource();
var sourceBuffer, videoBits, arrayOfBytes, chunk, file, initialization, ini, frameRate;
var container, mesh, camera, scene, renderer, texture;
var video = document.createElement('video');

video.src = window.URL.createObjectURL(ms);
video.muted = true;
ms.addEventListener('sourceopen', onMediaSourceOpen);

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();
texture = new THREE.VideoTexture(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);

// Safari behavior is different depending on the framerate used. Seems to indicate the issue has something to due with its buffering / stall / gap handling.
//getData('uhd_dash.mpd'); // Baseline 1fps.
//getData('uhd30fps_dash.mpd'); // On Chrome, playback choppier than 1fps. Possibly due to rounding issues with timestamps.
getData('uhd60fps_dash.mpd'); // On Chrome, playback choppier than 1fps. Possibly due to rounding issues with timestamps.
//getData('uhd1000fps_dash.mpd'); // On Chrome, playback appears same as 1fps

function animate() {
  // playbackRate is for testing lag / sensitivity. 
  // For production this should be = 1 and the appended buffer's framerate / timing should be at 60fps.
  video.playbackRate = 1; 
  renderer.animate(render);
}

function render() {
  renderer.render(scene, camera);
  if (index < segments.length) {
    if (sourceBuffer.buffered.length >...