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

}