h264 MSE Android Sanity

by dustinkerstein

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<progress id="progress" value="0"></progress>
<video id="video" autoplay muted width="300"></video>

JavaScript

const video = document.getElementById("video");
const progressBar = document.getElementById("progress");

var sourceBuffer, frameRate, videoBits, arrayOfBytes, chunk, file, index = 0, videoInitialized = false,videoSeeked = false, isUserInteracting = false, segments = [], ms = new MediaSource();


video.src = window.URL.createObjectURL(ms);
ms.addEventListener('sourceopen', onMediaSourceOpen);
getData('hd_dash.mpd');

function render() {
	console.log("video.readyState: " + video.readyState);
  if (video.readyState > 1) {
    index = (index + 1) % segments.length;
    nextSegment(index);
  }
  window.requestAnimationFrame(render);
}

function videoInit(initBytes) {
  videoBits = initBytes;
  chunk = initBytes.slice(0, parseInt(segments[0].getAttribute("mediaRange").toString().split('-')[1]) + 1);
  appendToBuffer(chunk);
  window.requestAnimationFrame(render);
}

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

function nextSegment(index) {
  if (index < segments.length) {
    arrayOfBytes = segments[index].getAttribute("mediaRange").toString().split('-');
    chunk = videoBits.slice(arrayOfBytes[0], parseInt(arrayOfBytes[1]) + 1);
    appendToBuffer(chunk);
  }
}

function appendToBuffer(videoChunk) {
  if (sourceBuffer && sourceBuffer.updating) {
    console.log("Buffer not ready");
  }
  if (videoChunk && sourceBuffer && !sourceBuffer.updating) {
    var bufferedIndices = [];
    if (sourceBuffer.buffered.length > 0) {
      for (var i = 0; i < sourceBuffer.buffered.length; i++) { 
      	 for (var j = sourceBuffer.buffered.start(i); j < sourceBuffer.buffered.end(i); j++) { 
         		bufferedIndices[j] = true;
         }
      }
    }
    if (!bufferedIndices[index]) {
			sourceBuffer.appendBuffer(videoChunk)
    }
    video.currentTime = index;
  }
}

function getData(url) {
  if (url !== "") {
    url =...