javascript - hls.js 记录文件

Question

您好，感谢您的阅读，
我有一个带有 m3u8 播放列表的 Hls 流。
视频在带有 Video 元素和 https://github.com/video-dev/hls.js 的 Html 页面上播放得很好
但是，如果我下载这些片段以加入它们，它们只是白色像素。 VLC 和 FFmpeg 无法处理它们。 VLC 显示一个白色像素 10 秒，FFmpeg 说文件中没有流。
所以现在我想知道这个 hls.js 正在做什么来让它运行。对我一个非 js 开发人员来说，这一切看起来有点困惑。我能够理解加载新段时调用哪个函数之类的东西。不幸的是，我无法理解有关数据的内容。一个字符变量让我感到困惑。
现在，我捕获视频元素的流并稍后下载，但我根本不喜欢这个解决方案。
如何帮助我

It would be very nice if anyone can tell me how to hook into thescript and tell it to download directly to the disk so I'm independentof framerate drops.

If anyone can tell how the script is able to convert the data so thatthe element can use it and I would be able to implement or doit with FFmpeg would be really helpful.

I also thought it might be possible to have a listener when the blobchanges to store its contents.

感谢大家的帮助。我现在试图找到一个解决方案太多小时了。

Answer 1

我找到了解决方案。在查看了他们出色的事件系统之后
https://github.com/video-dev/hls.js/
我也贡献了这个问题，而不仅仅是复制
https://github.com/video-dev/hls.js/issues/1322

var arrayRecord = [];

function download(data, filename) {
    console.log('downloading...');
    var blob = new Blob([arrayConcat(data)], {
        type: 'application/octet-stream'
    });
    saveAs(blob, filename);
}

function arrayConcat(inputArray) {
    var totalLength = inputArray.reduce(function (prev, cur) {
        return prev + cur.length
    }, 0);
    var result = new Uint8Array(totalLength);
    var offset = 0;
    inputArray.forEach(function (element) {
        result.set(element, offset);
        offset += element.length;
    });
    return result;
}

function saveAs(blob, filename) {
    var url = URL.createObjectURL(blob);
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    a.href = url;
    a.download = filename;
    a.click();
    window.URL.revokeObjectURL(url);
}

function stopRecord() {
    arrayRecord.forEach(function (item) {
        download(item.data['video'], "video.mp4");
        download(item.data['audio'], "audio.mp4");
        item.hls.destroy();
        return false;
    });
}

function startRecord() {
    var video = document.getElementById('video');
    var dataStream = {
        'video': [],
        'audio': []
    };
    var hls = new Hls();
    hls.loadSource("Your playlist");
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function () {
        video.play();
        hls.on(Hls.Events.BUFFER_APPENDING, function (event, data) {
            console.log("apending");
            dataStream[data.type].push(data.data);
        });
    });
    arrayRecord.push({
        hls: hls,
        data: dataStream
    });
    video.onended = function (e) {
        stopRecord()
    }

}