hls.js 记录文件

Question

您好，感谢您的阅读，

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

但是，如果我下载这些片段以加入它们，它们只是白色像素。 VLC 和 FFmpeg 无法处理它们。 VLC 显示一个白色像素 10 秒，FFmpeg 说文件中没有 stream。

所以现在我想知道这个 hls.js 正在做什么来让它运行。 对我一个非 js 开发人员来说，这一切看起来有点混乱。 我能够理解加载新段时调用 function 之类的东西。 不幸的是，我无法理解有关数据的内容。 一个字符变量让我感到困惑。

目前，我捕获了视频元素的 stream 并稍后下载，但我根本不喜欢这个解决方案。

如何帮助我

如果有人能告诉我如何挂钩脚本并告诉它直接下载到磁盘上，那就太好了，这样我就不会受到帧率下降的影响。

如果有人能告诉脚本如何能够转换数据以便元素可以使用它，我将能够使用 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()
    }

}