Friday, 2 April 2021

How to convert m3u8 URL to mp4 downloadable file in browser?

I am writing an extension to download videos from a website. That web site has mp4 files and m3u8 files. I have already implemented the part to download direct mp4 files. I stuck at converting the m3u8 file to mp4. I tried lot of js packages but there are a lot of dependencies and failed even after using browserfy.

Current popup.js file

unction loadvideoList(callback){
    chrome.storage.sync.get(['courseID'], function(result) {
        if(result.courseID != 'undefined'){
            $.ajax({
                type: 'GET',
                url: "http://localhost:80/get_videos_list/"+result.courseID,
                crossDomain: true,
                success: function(response) {
                    document.getElementById("loading_icon").style.display='none';
                    document.getElementById("videos_list").style.display='block';
                    document.getElementById("videos_list").style.padding='10px';
                    for(var i = 0; i < response.video_list.length; i++){
                        if(response.video_list[i].type == 'mp4'){
                            handleDownloadButton(response.video_list[i]);
                        }else{
                            // ************ HERE ***************
                            handleDownloadButton-m3u8Tomp4(response.video_list[i].video_url)
                        }
                    }
                },
                error: function (err) {
                    alert("unexpected error occured: "+err.code);
                    console.log(err);
                }
             });
        }else{
            document.getElementById("videos_list").style.display='none';
            document.getElementById("videos_list").style.padding='0';
        }
    });
}

function handleDownloadButton(json_vid){
    var node = document.createElement("DIV"); 
    // node.style.marginBottom = "5px"
    var t = document.createElement('p');
    t.textContent = json_vid.file_name;
    t.style.width ="240px";
    node.appendChild(t);
    node.style.padding = "5px";
    var downloadBtn = document.createElement("BUTTON");
    downloadBtn.style.cssFloat = "right";
    downloadBtn.className = "btn btn-primary btn-sm download_btn";
    downloadBtn.innerHTML = "Download"; 
    // downloadBtn.value = json_vid.video_url;
    node.appendChild(downloadBtn);
    downloadBtn.id = json_vid.video_id;
    document.getElementById("videos_list").appendChild(node);

    var progress_bar = document.createElement("DIV");
    progress_bar.className = "progress_container";
    node.appendChild(progress_bar);
    var moving_bar = document.createElement("DIV");
    moving_bar.className = "progress_bar";
    progress_bar.appendChild(moving_bar);
    moving_bar.id = json_vid.video_id+"bar";

    $(function(){
        $(`#${json_vid.video_id}`).click(function(){
            $(`#${json_vid.video_id}`).attr("disabled", true);
            // alert(json_vid.video_url);
            var that = this;
            var page_url = json_vid.video_url;
        
            var req = new XMLHttpRequest();
            req.open("GET", page_url, true);
            // req.withCredentials = true;
            req.addEventListener("progress", function (evt) {
                if(evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total;
                    // document.getElementById("download_stat").innerHTML = percentComplete;
                    // console.log(percentComplete);
                    document.getElementById(json_vid.video_id+"bar").style.width = `${percentComplete*100}%`;
                    document.getElementById(json_vid.video_id).textContent = `${(percentComplete*100).toFixed(2)}%`;
                }
            }, false);
            
            req.responseType = "blob";
            req.onreadystatechange = function () {
                if (req.readyState === 4 && req.status === 200) {
                    var filename = $(that).data('filename');
                    if (typeof window.chrome !== 'undefined') {
                        // Chrome version
                        $(`#${json_vid.video_id}`).attr("disabled", false);
                        $(`#${json_vid.video_id}`).attr("onclick", "").unbind("click");
                        document.getElementById(json_vid.video_id).textContent = 'Save';
                        $(function(){
                            $(`#${json_vid.video_id}`).click(function(){
                                // alert("download is ready");
                                var link = document.createElement('a');
                                // link.text = "download is ready";
                                // document.getElementById("videos_list").appendChild(link);
                                link.href = window.URL.createObjectURL(req.response);
                                link.download = json_vid.file_name;
                                link.click();
                            });
                        });
                        
                    } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
                        // IE version
                        var blob = new Blob([req.response], { type: 'application/force-download' });
                        window.navigator.msSaveBlob(blob, filename);
                    } else {
                        // Firefox version
                        var file = new File([req.response], filename, { type: 'application/force-download' });
                        window.open(URL.createObjectURL(file));
                    }
                }
            };
            req.send();
        });

    });
}

handleDownloadButton function create the button to download the direct mp4 files. I need to implement a similar function called handleDownloadButton-m3u8Tomp4(see the code sample) that should first convert the http://...file.m3u8 to a mp4 and make it also downloadable. I seek for a script in similar repos like https://github.com/puemos/hls-downloader-chrome-extension, but I was unable to do so. It would be great, If anyone could help me, Thanks in advance!



from How to convert m3u8 URL to mp4 downloadable file in browser?

No comments:

Post a Comment