hls.js 记录文件答案

【问题标题】：Hls.js record filehls.js 记录文件
【发布时间】：2021-05-17 21:32:42
【问题描述】：

您好，感谢您的阅读，

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

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

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

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

如何帮助我

如果有人能告诉我如何连接到脚本并告诉它直接下载到磁盘所以我是独立的帧率下降。

如果有人能说出脚本是如何转换数据的，那么该元素可以使用它，我将能够实现或做与 FFmpeg 一起使用会很有帮助。

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

感谢大家的帮助。我花了太多时间试图找到解决方案。

【问题讨论】：

标签： javascript ffmpeg video-streaming http-live-streaming hls.js

【解决方案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()
    }

}

【讨论】：