stream-api/frontend/script.js

(() => {
    let upstream = "{{ stream }}";
    let xhr = new XMLHttpRequest();
    xhr.open("HEAD", upstream, true);
    xhr.send();

    let count = 2;
    let handleCount = () => {
        if(--count === 0) {
            handle();
        }
    }

    let handle = () => {
        let bodies = document.getElementsByTagName("body");
        if(bodies.length === 1) {
            let body = bodies[0];
            let video = document.createElement("video");
            video.className = "video-js vjs-big-play-centered";
            body.appendChild(video);
            let ctype = xhr.getResponseHeader("Content-Type");
            console.log(ctype);
            let options = {};
            options.controls = true;
            options.liveui = true;
            options.responsive = true;
            options.fill = true;
            options.techOrder = ["chromecast", "html5"];
            options.plugins = {};
            options.plugins.chromecast = {};
            options.plugins.chromecast.requestTitleFn = (src) => {
                return "{% raw title %}";
            }

            let player = videojs(video, options);
            let source = {};
            source.type = ctype;
            source.src = upstream;
            player.src(source);
            let Button = videojs.getComponent("Button");
            let cbutton = {};
            cbutton.clickHandler = (ev) => {
                videojs.log("clicked");
            }
            let button = new Button(player, cbutton);        
            button.addClass("fab");
            button.addClass("fa-chromecast");
            button.addClass("vjs-control");
            button.addClass("vjs-button");
            button.addClass("vjs-big-chromecast");
            player.addChild(button);
            player.one("play", (ev) => {
                player.removeChild(button);
            });
        }
    }
    document.addEventListener("DOMContentLoaded", handleCount);
    xhr.addEventListener("load", handleCount);
})();