MSE Three.js Seek

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, sourceBuffer, mesh, geometry, video, camera, scene, renderer, texture;
var video = document.createElement('video');
var url = "https://files.panomoments.com/sd_dashinit.mp4";
var ms = new MediaSource();
var index = 0;
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);
video.crossOrigin = "anonymous";
video.preload = 'none';
video.autoplay = false;
video.loop = true;
video.muted = true;
video.src = window.URL.createObjectURL(ms);
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);
ms.addEventListener('sourceopen', onMediaSourceOpen);

fetch(url).then(function(response) {
  response.arrayBuffer().then(function(myArrayBuffer) {
    sourceBuffer.appendBuffer(myArrayBuffer);
    animate();
  });
});

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

function render() {
  renderer.render(scene, camera);
}


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

document.addEventListener('keypress', onKey, false);

function onKey (e) {
  var key = e.key;
  switch (key) {
    case "[":
      index = (index - 1) % 243;
      if (index < 0) index = 242;
      video.fastSeek(index);
      break;
    case "]":
      index = (index + 1) % 243;
      video.fastSeek(index);
      break;
  }
}