h264 MSE Single Frame

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, 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('sd_dash.mpd');

function updatePromise() {
  return new Promise(function(resolve, reject) {
    sourceBuffer.addEventListener('updateend', function(e) {
    	console.log("updateend");
      resolve();
    }, true);
  });
}

async function videoInit(bytes) {
  chunk = bytes.slice(0, parseInt(segments[0].getAttribute("mediaRange").toString().split('-')[1]) + 1);
  console.log("pausing video and appending single frame to buffer");
	video.pause(); // same behavior if autoplay is disabled
  if (sourceBuffer && sourceBuffer.updating) {
    console.log("Buffer not ready");
  } else if (chunk && sourceBuffer && !sourceBuffer.updating) {
		let updateend = updatePromise();
		sourceBuffer.appendBuffer(chunk);
		await updateend;
    console.log("setting currentTime now");
    video.currentTime = index;
  } else {
  	console.log("Something went wrong");
  }
}

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

function getData(url) {
  if (url !== "") {
    url = "https://data.panomoments.com/processed/5849a51bc26d08000b62f9f8/5c95d9843c344e001f1588f6/" + 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 return
    xhr.onreadystatechange = function() {
     ...