stream-api/frontend/script.js

(() => {
    const setRemotePlayer = () => {
        class NewRemotePlayer extends cast.framework.RemotePlayer {
            constructor() {
                super();
                this.canControlVolume = false;
            }
        }
        cast.framework.RemotePlayer = NewRemotePlayer;
    }

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

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

    const handleLoaded = () => {
        setRemotePlayer();
        handleCount();
    }

    const handle = () => {
        const [body] = document.getElementsByTagName("body");
        const video = document.createElement("video");
        video.className = "video-js vjs-big-play-centered";
        body.appendChild(video);
        const ctype = xhr.getResponseHeader("Content-Type");
        console.log(ctype);
        const 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 %}";
        }

        const player = videojs(video, options);
        const source = {};
        source.type = ctype;
        source.src = upstream;
        player.src(source);
        const Button = videojs.getComponent("Button");
        const cbutton = {};
        cbutton.clickHandler = (ev) => {
            player.trigger("chromecastRequested");
        }
        const 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", () => {
            player.removeChild(button);
        });
    }
    document.addEventListener("DOMContentLoaded", handleLoaded);
    xhr.addEventListener("load", handleCount);
})();