tchakabam · August 16, 2018 16:23
diff --git a/buffer-switch-streams.html b/buffer-switch-streams.html

 <!--
 *
 * Example / Benchmark for switching MSE SourceBuffers content while playing
 *
 * Logs time needed for operations to browser console
 *
 * Replace the MEDIA_LIST array with resources present in your environment (fragmented mp4s with video expected)
 *
 *
 -->

 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8" />
    <title>Buffer switch between two streams</title>
  </head>
  <body>

  	<video height=720></video>

  	<center><button onclick="switchStream()" id="switch">Switch!</button></center>

  	<script type="text/javascript">

 	  	var MEDIA_LIST = [
 	  				'/media/car-20120827-85.mp4',
 	  				'/media/motion-20120802-85.mp4'
 	  			];

 	  	var state = null;
 	  	var now = Date.now();
 	  	var sourceBuffer = null;

 		function switchStream() {
 			console.log('stream switch requested after ' + nowDiffTime() + ' ms');

 			state = 'REMOVING';
 			sourceBuffer.remove(0, Infinity);
 		}

 		function nowDiffTime() {
 			var diff = Date.now() - now;
 			now = Date.now();
 			return diff;
 		}

 		var dataList_ = null;
 		var video = null;
 		var mediaSource = null;
 		var currentTrack = 0;

 		(function() {

 			loadAllMedia(onMediaLoaded);

 		})();

 		function nextTrackIndex() {
 			return currentTrack++ % dataList_.length;
 		}

 		function onMediaLoaded(dataList) {

 			mediaSource = new MediaSource();
 			window.player = video = document.querySelector('video');

 			video.src = URL.createObjectURL(mediaSource);

 			video.addEventListener('playing', onPlaying, false);

 			dataList_ = dataList;

 			console.log('loading data took: ' + nowDiffTime() + ' ms');

 			mediaSource.addEventListener('sourceopen', onSourceOpen, false);
 		}

 		function onSourceOpen() {

 			sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');
 			sourceBuffer.addEventListener('updateend', onSourceBufferUpdateEnd);

 			console.log('creating mediasource took: ' + nowDiffTime() + ' ms');

 			appendData(nextTrackIndex());
 		}

 		function onPlaying() {
 			switch(state) {
 			case 'APPENDED':
 				state = 'PLAYING';
 				console.log('seeking/playing took: ' + nowDiffTime() + ' ms');
 				break;
 			}
 		}

 		function onSourceBufferUpdateEnd() {
 			console.log('SourceBuffer update ended');

 			switch(state) {
 			case 'APPENDING':
 				state = 'APPENDED';
 				console.log('segment data appended, playing out');
 				console.log('appending to buffer took ' + nowDiffTime() + ' ms');
 				video.currentTime = 30;
 				video.play();
 				break;
 			case 'REMOVING':
 				console.log('flushing buffer took ' + nowDiffTime() + ' ms');
 				state = 'REMOVED';
 				appendData(nextTrackIndex());
 				break;
 			}
 		}

 		function appendData(index) {
 			state = 'APPENDING';
 			sourceBuffer.timestampOffset = 0;
 			console.log('appending ' + dataList_[index].length + ' bytes');
 			sourceBuffer.appendBuffer(dataList_[index]);
 		}

 		function loadAllMedia(done) {
 			var mediaList = MEDIA_LIST;
 			var dataList = [];
 			var mediaIndex = 0;

 			console.log('loading all media');

 			var continueLoading = function() {
 				loadBinary(mediaList[mediaIndex], function(data) {
 					dataList.push(data);
 					mediaIndex++;
 					if (mediaIndex >= mediaList.length) {
 						done(dataList);
 						return;
 					}
 					continueLoading();
 				});
 			}
 			continueLoading();
 		}

 		function loadBinary(url, done) {

 			var oReq = new XMLHttpRequest();
 			oReq.open("GET", url, true);
 			oReq.responseType = "arraybuffer";

 			oReq.onload = function (oEvent) {
 			  var arrayBuffer = oReq.response; // Note: not oReq.responseText
 			  if (arrayBuffer) {
 			    var byteArray = new Uint8Array(arrayBuffer);
 			    /*
 			    for (var i = 0; i < byteArray.byteLength; i++) {
 			      // do something with each byte in the array
 			    }
 			    */
 			    done(byteArray);
 			  }
 			};
 			oReq.send(null);
 		}

  	</script>

  </body>


 </html>

	<!--
	*
	* Example / Benchmark for switching MSE SourceBuffers content while playing
	*
	* Logs time needed for operations to browser console
	*
	* Replace the MEDIA_LIST array with resources present in your environment (fragmented mp4s with video expected)
	*
	*
	-->

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Buffer switch between two streams</title>
	</head>
	<body>

	<video height=720></video>

	<center><button onclick="switchStream()" id="switch">Switch!</button></center>

	<script type="text/javascript">

	var MEDIA_LIST = [
	'/media/car-20120827-85.mp4',
	'/media/motion-20120802-85.mp4'
	];

	var state = null;
	var now = Date.now();
	var sourceBuffer = null;

	function switchStream() {
	console.log('stream switch requested after ' + nowDiffTime() + ' ms');

	state = 'REMOVING';
	sourceBuffer.remove(0, Infinity);
	}

	function nowDiffTime() {
	var diff = Date.now() - now;
	now = Date.now();
	return diff;
	}

	var dataList_ = null;
	var video = null;
	var mediaSource = null;
	var currentTrack = 0;

	(function() {

	loadAllMedia(onMediaLoaded);

	})();

	function nextTrackIndex() {
	return currentTrack++ % dataList_.length;
	}

	function onMediaLoaded(dataList) {

	mediaSource = new MediaSource();
	window.player = video = document.querySelector('video');

	video.src = URL.createObjectURL(mediaSource);

	video.addEventListener('playing', onPlaying, false);

	dataList_ = dataList;

	console.log('loading data took: ' + nowDiffTime() + ' ms');

	mediaSource.addEventListener('sourceopen', onSourceOpen, false);
	}

	function onSourceOpen() {

	sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');
	sourceBuffer.addEventListener('updateend', onSourceBufferUpdateEnd);

	console.log('creating mediasource took: ' + nowDiffTime() + ' ms');

	appendData(nextTrackIndex());
	}

	function onPlaying() {
	switch(state) {
	case 'APPENDED':
	state = 'PLAYING';
	console.log('seeking/playing took: ' + nowDiffTime() + ' ms');
	break;
	}
	}

	function onSourceBufferUpdateEnd() {
	console.log('SourceBuffer update ended');

	switch(state) {
	case 'APPENDING':
	state = 'APPENDED';
	console.log('segment data appended, playing out');
	console.log('appending to buffer took ' + nowDiffTime() + ' ms');
	video.currentTime = 30;
	video.play();
	break;
	case 'REMOVING':
	console.log('flushing buffer took ' + nowDiffTime() + ' ms');
	state = 'REMOVED';
	appendData(nextTrackIndex());
	break;
	}
	}

	function appendData(index) {
	state = 'APPENDING';
	sourceBuffer.timestampOffset = 0;
	console.log('appending ' + dataList_[index].length + ' bytes');
	sourceBuffer.appendBuffer(dataList_[index]);
	}

	function loadAllMedia(done) {
	var mediaList = MEDIA_LIST;
	var dataList = [];
	var mediaIndex = 0;

	console.log('loading all media');

	var continueLoading = function() {
	loadBinary(mediaList[mediaIndex], function(data) {
	dataList.push(data);
	mediaIndex++;
	if (mediaIndex >= mediaList.length) {
	done(dataList);
	return;
	}
	continueLoading();
	});
	}
	continueLoading();
	}

	function loadBinary(url, done) {

	var oReq = new XMLHttpRequest();
	oReq.open("GET", url, true);
	oReq.responseType = "arraybuffer";

	oReq.onload = function (oEvent) {
	var arrayBuffer = oReq.response; // Note: not oReq.responseText
	if (arrayBuffer) {
	var byteArray = new Uint8Array(arrayBuffer);
	/*
	for (var i = 0; i < byteArray.byteLength; i++) {
	// do something with each byte in the array
	}
	*/
	done(byteArray);
	}
	};
	oReq.send(null);
	}

	</script>

	</body>


	</html>