hls.js记录文件

Question

您好，感谢您的阅读，

我有一个带有 m3u8 播放列表的 Hls 流。视频在带有 Video 元素和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/问题/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()
    }

}