MSE Three.js Safari

by dustinkerstein

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<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;

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

    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() {
      // console.log("video.readyState: " + video.readyState)
      if (video.readyState === video.HAVE_ENOUGH_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);
     ...