MSE Three.js Video Play

by dustinkerstein

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<span>MAKE SURE TO CLICK INTO THE RESULT IFRAME OR ELSE SAFARI WILL ONLY RENDER RAF / SETINTERVAL AT MAX 30FPS DUE TO POWER SAVING CODE</span>
<br>
<span id="playbackRateText"></span>
<video controls id="video"></video>
<div id="container"></div>

CSS

body {
  margin: 0;
  padding: 0;
  background-color: #000000; 
}
      
video {
  width: 100vw;
  height: 50vh;
}

canvas {
  width: 100vw;
  height: 50vh !important;
}

span {
  position: absolute;
  color: white;
}

JavaScript

var sourceBuffer, container, mesh, geometry, material, video, camera, scene, renderer, texture;
var video = document.getElementById('video');
var text = document.getElementById('playbackRateText');
var url = "https://files.panomoments.com/longGOP60fps_dashinit.mp4"; // 3840x2160 DAR 16:9 Long GOP created with ffmpeg -y -i 60fps.mp4 -c:v libx264 -g 1000 -keyint_min 1000 -bf 0 -profile:v high -level 4.1 -vf "scale=3840:2160" -crf 15 -pix_fmt yuv420p -to 6 -an longGOP60fps.mp4

var ms = new MediaSource();
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();
video.src = window.URL.createObjectURL(ms);
video.crossOrigin = "anonymous";
video.autoplay = true;
video.preload = 'auto';
video.loop = true;
video.muted = true;
texture = new THREE.Texture(video);
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
scene.add(camera);
geometry = new THREE.PlaneGeometry(1, 1);
material = new THREE.MeshBasicMaterial({map: texture});
mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, -10);
scene.add(mesh);
camera.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

video.addEventListener( "loadedmetadata", function (e) {
 	var windowAspectRatio = window.innerWidth / window.innerHeight;
  var videoAspectRatio = this.videoWidth / this.videoHeight;
  var distanceToPlane = Math.abs(mesh.position.z);
  var limit;
  if (videoAspectRatio < windowAspectRatio) {
    limit = (Math.tan (THREE.Math.degToRad(camera.fov * 0.5)) * distanceToPlane * 2.0) * videoAspectRatio; 
  } else {
    limit = (Math.tan (THREE.Math.degToRad(camera.fov * 0.5)) * distanceToPlane *...