Add streaming (HLS, RMTP)/encrypted stream support

[terrill]

Add streaming (HLS, RMTP)/encrypted stream support

[phamh-si]

Has there been any progress on supporting steaming?

[DevHack]

@terrill
Any updates made in this front?

[derekjackson-das]

+1 for adding HLS format, please.

[limefrogyank]

It's a bit hacky, but I was able to make it work using hls.js.

When you determine the source url for your stream, you have to enable Hls only after AblePlayer has finished loading. I have to use the data-able-player tag due to forces outside of my control. I couldn't find an event I could use to trigger the time to setup Hls, so I ended up just waiting 1 second at a time. (Yes, very hacky) But this will load the hls javascript without it already being in the html document, too.

const myVideo = {video element};
const streamSrc = "https://something.com/path/to/a.m3u8";

async function waitForAblePlayerLoad() {
  let count = 0;
  const waitFor = delay => new Promise(resolve => setTimeout(resolve, delay));
  const frameDelay = () => new Promise(resolve => requestAnimationFrame(resolve));
  
  let foundPlayer = null;
  do {
	  await waitFor(1000);
	  //await frameDelay();
	  AblePlayerInstances.forEach(player => {
		  if (player.media == myVideo) {
			  foundPlayer = player;
		  }
	  });
	  count++;
	  //console.log(count);
	  if (count > 20) {
		  // just in case we don't want to wait forever
		  throw new Error("Timeout: AblePlayer not created after 20 seconds... should not happen");
		  break;
	  }
  } while (foundPlayer == null || !foundPlayer.playerCreated);
  
  if (hlsScriptTagPromise == null) {
	  hlsScriptTagPromise = new Promise((resolve) => {
		  var hlsScriptTag = document.createElement('script');
		  hlsScriptTag.onload = () => {
			  resolve();
		  };
		  hlsScriptTag.src = "https://cdn.jsdelivr.net/npm/hls.js@latest";
		  const firstScriptTag = document.getElementsByTagName('script')[0];
		  firstScriptTag.parentNode?.insertBefore(hlsScriptTag, firstScriptTag);
	  });
  }
  await hlsScriptTagPromise;
  if (Hls.isSupported()) {
	  var hls = new Hls();
	  //console.log(hls);
	  hls.loadSource(streamSrc);
	  hls.attachMedia(myVideo);
  }
}
waitForAblePlayerLoad();