response.data is already detached when hook the fLoader

[snowinszu]

What version of Hls.js are you using?

latest

What browser (including version) are you using?

chrome

What OS (including version) are you using?

macOS

Test stream

https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8

Configuration

class fLoader extends Hls.DefaultConfig.loader {
        constructor(config) {
            super(config);
            var load = this.load.bind(this);
            this.load = function (context, config, callbacks) {
                var onSuccess = callbacks.onSuccess;
                callbacks.onSuccess = function (response, stats, context) {
                    console.warn(`byteLength ${response.data.byteLength}`)
                    onSuccess(response, stats, context);
                };
                load(context, config, callbacks);
            };
        }
    }
var hls = new Hls({
            fLoader,
        });

Additional player setup steps

No response

Checklist

• The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
• The issue occurs in the stable client (latest release) on https://hls-js.netlify.com/demo and not just on my page
• The issue occurs in the latest client (main branch) on https://hls-js-dev.netlify.com/demo and not just on my page
• The stream has correct Access-Control-Allow-Origin headers (CORS)
• There are no network errors such as 404s in the browser console when trying to play the stream

Steps to reproduce

1. set floader
2. play the stream

Expected behaviour

response.data.byteLength is > 0

What actually happened?

response.data.byteLength == 0

Console output

byteLength 0

Chrome media internals output

No response

[hzm18]

is this reason? https://developer.mozilla.org/en-US/docs/Glossary/Transferable_objects

[jungdaniel]

I think @hzm18, you are right. The ArrayBuffer detaches when the data is passed to the worker.
https://github.com/video-dev/hls.js/blob/master/src/demux/transmuxer-interface.ts#L210

if (worker) {
  // post fragment payload as transferable objects for ArrayBuffer (no copy)
  worker.postMessage(
    {
      cmd: 'demux',
      data,
      decryptdata,
      chunkMeta,
      state,
    },
    data instanceof ArrayBuffer ? [data] : []
  );
}

Setting the enableWorker option to false makes response.data available in the onSuccess callback.
Also making a copy of the data in the onProgress callback works around the issue.

[snowinszu]

@jungdaniel Could you

I think @hzm18, you are right. The ArrayBuffer detaches when the data is passed to the worker. https://github.com/video-dev/hls.js/blob/master/src/demux/transmuxer-interface.ts#L210

if (worker) {
  // post fragment payload as transferable objects for ArrayBuffer (no copy)
  worker.postMessage(
    {
      cmd: 'demux',
      data,
      decryptdata,
      chunkMeta,
      state,
    },
    data instanceof ArrayBuffer ? [data] : []
  );
}

Setting the enableWorker option to false makes response.data available in the onSuccess callback. Also making a copy of the data in the onProgress callback works around the issue.

Could you show me how to "making a copy of the data in the onProgress callback"?

[jungdaniel]

I haven't tried this, and probably you would need to tweak it to make this work. The idea was to make a copy with data.slice(0) and that new ArrayBuffer would be passed to the worker, also that one would be detached and in other callbacks such as the onSuccess you whould still see the original buffer.

class fLoader extends Hls.DefaultConfig.loader {
  constructor(config) {
    super(config);
    
    const load = this.load.bind(this);
    
    this.load = function (context, config, callbacks) {
      const { onProgress, onSuccess } = callbacks;
        
      callbacks.onProgress = function(stats, context, data, networkDetails) {
        // By copying I ment something like this:
        const modifiedData = data instanceof ArrayBuffer ? data.slice(0) : data;
        // Not sure if return is necessary
        return onProgress(stats, context, modifiedData, networkDetails);
      },
        
      callbacks.onSuccess = function (response, stats, context) {
        // do something with response.data
        onSuccess(response, stats, context);
      };
     
      load(context, config, callbacks);
  }
}

const hls = new Hls({ fLoader });

BTW I think this is hacky and performance-wise not a good solution. For my use-case I could use an event for accessing data I wanted to use. It was eitherHls.Events.BUFFER_APPENDING or Hls.Events.BUFFER_APPENDED I can't recall.

[snowinszu]

ok, thank you very much.