MSE Safari Workaround

100% I-Frames

by dustinkerstein

HTML

<video id="PanoMoment"></video>

CSS

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

#PanoMoment {
  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;

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

function animate() {
  window.requestAnimationFrame(render);
}

function render() {
  window.requestAnimationFrame(render);
  if (video.readyState >= 3) {
    nextSegment(index);
  }
  index = (index + 1) % (segments.length-1);
}

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

function onMediaSourceOpen() {
  sourceBuffer = ms.addSourceBuffer('audio/mpeg'); // Workaround by tricking Safari into setting m_shouldGenerateTimestamps (https://github.com/WebKit/webkit/blob/29271ffbec500cd9c92050fcc0e613adffd0ce6a/Source/WebCore/Modules/mediasource/SourceBuffer.cpp)
  sourceBuffer.mode = 'sequence';
  getData('hd_dash.mpd'); // 100% I-Frames
}

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.updating) {
    console.log("Buffer not ready");
  }
  if (videoChunk && !sourceBuffer.updating) {
    video.currentTime = count;
    sourceBuffer.timestampOffset = count;
    sourceBuffer.appendBuffer(videoChunk);
    count++;
  }
}

function getData(url) {
  if (url !== "") {
    url = "https://files.panomoments.com/" + url;
    var xhr = new XMLHttpRequest(); // Set up xhr request
    xhr.open("GET", url, true); // Open the request
    xhr.responseType = "text"; // Set the type of response expected
    xhr.send();

    //  Asynchronously wait for the data to...