Hls.js记录文件

Question

你好，谢谢你的阅读，

我有一个带有m3u8播放列表的Hls流。视频在带有视频元素和https://github.com/video-dev/hls.js的Html页面上播放得很好

但如果我下载片段加入他们，他们只是白色像素。VLC和FFmpeg不能处理它们。VLC显示一个白色像素10秒，FFmpeg表示文件中没有流。

所以现在我想知道这个hls.js正在做什么来使它运行。对于我这个非js开发人员来说，这一切看起来都有点混乱。当加载一个新段时，我能够理解哪些函数被调用。不幸的是，我无法理解有关数据的东西。有一个角色变量让我很困惑。

现在，我捕获视频元素的流，然后下载它，但是我一点也不喜欢这个解决方案。

如何帮助我

，如果有人能告诉我如何连接到脚本并告诉它直接下载到磁盘上，那就太好了，这样我就可以不受框架滴的影响了。

如果有人能够知道脚本如何能够转换数据，以便元素能够使用它，我将能够用FFmpeg实现或执行它，这将是非常有帮助的。

我还认为，当blob更改以存储其内容时，可能会有一个侦听器。

谢谢大家的帮助。我已经找了很多小时的解决办法了。

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()
    }

}