MSE Sequence Debug

by dustinkerstein

HTML

<video></video>

CSS

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
}

video {
  margin: 0;
  width: 100%;
  height: 100%;
}

JavaScript

var sourceBuffer;
var frameRate;
var index = 0;
var count = 0;
var segments = [];
var ms = new MediaSource();
var videoBits, arrayOfBytes, chunk, file, initialization, ini;

var video = document.querySelector('video');
video.src = window.URL.createObjectURL(ms);
ms.addEventListener('sourceopen', onMediaSourceOpen);

// 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() {
  window.requestAnimationFrame(render);
}

function render() {
  window.requestAnimationFrame(render);
  if ((/Safari/i.test(navigator.userAgent.toLowerCase()) && !/Chrome/i.test(navigator.userAgent.toLowerCase()) && video.readyState >= 1) 
  || (/Firefox/i.test(navigator.userAgent.toLowerCase()) && video.readyState >= 3) 
  || video.readyState == 4) {
  	index = (index + 2) % segments.length; // Skip every other frame to replicate on-contiguous frame decoding. 
    // Chrome and Firefox have no issue with non-contiguous decoding, but Safari does. Safari requires addSourceBuffer('audio/mpeg') workaround below.
  	nextSegment(index);
  }
}

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

function onMediaSourceOpen() {
  sourceBuffer = ms.addSourceBuffer('video/mp4; codecs="avc1.640033"'); // This works on Chrome and Firefox but will break on Safari when decoding non-contiguous frames. See workaround below.
  //sourceBuffer = ms.addSourceBuffer('audio/mpeg');...