How to composite ts files encrypted with AES-256bit with a custom loader and pass them to hls.js.

[ryusei-48]

What do you want to do with Hls.js?

I am new to hls.js. I currently have a list of m3u8 files and ts files encrypted with AES-256bit. i would like to implement logic to composite the arrayBuffer of the acquired ts files using hls.js custom loader, but in which part should i incorporate that process I don't know where to put it.

What have you tried so far?

Below is the code we are currently testing, using TypeScript and React, built with Vite.

import { useEffect, useRef } from 'react'
import HLS, { type HlsConfig, type LoaderConfiguration, type LoaderContext, type LoaderCallbacks } from 'hls.js';
import './App.css'

const config: Partial<HlsConfig> = {
  loader: class CustomLoader extends HLS.DefaultConfig.loader {
    load(context: LoaderContext, config: LoaderConfiguration, callbacks: LoaderCallbacks<LoaderContext>) {
      const { url } = context;

      fetch( url ).then( async (response) => {
        if ( response.ok ) {
          const decrypted = await decryptAESData( await response.arrayBuffer() );

          // Continue Processing... I want to pass composite data to hls.js.
        }else {
          // error handling continuity....
        }
      })

      //super.load(context, config, callbacks);
    }
  }
}

async function decryptAESData( data: ArrayBuffer ): Promise<ArrayBuffer> {
  // decrypt process .....
} 

function App() {
  
  const video = useRef<HTMLVideoElement | null>(null);
  const hls = useRef<HLS>( new HLS(config) );

  useEffect(() => {
    if ( video.current ) {
      console.log("loaded.", HLS.isSupported());
      hls.current.loadSource("media/test.m3u8");
      hls.current.attachMedia( video.current );
    }
    return () => {
      hls.current.removeAllListeners();
      hls.current.stopLoad();
      //hls.destroy();
    }
  }, []);

  return (
    <div style={{ width: "100%" }}>
      <video ref={ video } controls style={{ width: "100%" }} />
    </div>
  )
}

export default App

Thanks.