Hls.js: Support a method for downloading the remuxed audio and video MP4

[bikegriffith]

We've found this useful for troubleshooting problem streams. Would you find it useful as well?

Some hacked up code that has issues (i.e. requires you to type console.addSaveLinksToDOM) but in general has got us something is:

var savedData = { 'audio': new Uint8Array(), 'video': new Uint8Array() }

onBufferAppending(data) {
    savedData[data.type] = concatenate(savedData[data.type], data.data);

    console.addSaveLinksToDOM = function() {
        var blob;
        blob = new Blob([savedData.audio], {type: 'application/octet-stream'});
        $('body').append('<a download="generated-audio.mp4" href="' + window.URL.createObjectURL(blob) + '">Download mp4 audio track</a><br>');
        blob = new Blob([savedData.video], {type: 'application/octet-stream'});
        $('body').append('<a download="generated-video.mp4" href="' + window.URL.createObjectURL(blob) + '">Download mp4 video track</a><br>');
    };
}

function concatenate(...arrays) {
    let totalLength = 0;
    for (let arr of arrays) {
        totalLength += arr.length;
    }
    let result = new Uint8Array(totalLength);
    let offset = 0;
    for (let arr of arrays) {
        result.set(arr, offset);
        offset += arr.length;
    }
    return result;
}

[mangui]

that is great !
best would be to add this feature to the demo page (but only enable it through a click on a button as concatenating fragments would eat resources ...)

• download audio MP4
• download video MP4

what would be even better is to add two other buttons to analyze the generated MP4 using https://github.com/gpac/mp4box.js

• analyze audio MP4
• analyze video MP4

see http://download.tsi.telecom-paristech.fr/gpac/mp4box.js/filereader.html as an example

[nghia1986]

I tried with bikegriffith's comment.
After dumping mp4 files, the audio files can play but the voice is bad, the video files also can play but it's quite big and sometimes it's lagged.
And I don't know how to mixed audio and video at one. Do you have any suggestion ?

[mangui]

implemented

[thijstriemstra]

@mangui implemented how and where?

[mangui]

on the demo page
https://github.com/video-dev/hls.js/search?utf8=%E2%9C%93&q=dumpfMP4&type=