nfortv/static/main.js

// Copyright 2023 Simon Boyé


const STAT_URL = "http://109.18.229.148:8080/stat"
const RTMP_URL = "rtmp://109.18.229.148"
const APP_NAME = "nfortv"

const KNOWN_STREAMS = [
    "alia",
    "draklaw",
    "draklia",
    "drfred",
]


const mount_point = document.getElementById("stat")
render_stat(mount_point)


async function render_stat(mount_point) {
    const g = create_element

    const stat = parse_stat(await fetch_stat())
    console.log(stat)

    const streams = stat.applications[APP_NAME].streams
    console.log(streams)

    for (let stream_name of KNOWN_STREAMS) {
        if (streams[stream_name] === undefined) {
            streams[stream_name] = {
                name: stream_name,
                time: 0,
                bw_in: 0,
                bytes_in: 0,
                bw_out: 0,
                bytes_out: 0,
                bw_audio: 0,
                bw_video: 0,
                audio: null,
                video: null,
                publisher: false,
                viewers: [],
            }
        }
    }

    const elem = Object.keys(streams).length?
        g("ul", {"class": "streams"},
            ...Object.entries(stat.applications[APP_NAME].streams).sort().map(([name, app]) =>
                g("li", {},
                    g("div",
                        {
                            "class": app.publisher? "stream_status online": "stream_status offline",
                            title: app.publisher? "Online": "Offline",
                        },
                    ),
                    g("span", {},
                        g("span", {"class": "stream_name"},
                            g("a", {href: `${RTMP_URL}/${APP_NAME}/${name}`}, name),
                        ),
                        " ",
                        g("span", {"class": "stream_info"},
                            `[${app.viewers.length} viewers]`,
                        ),
                    ),
                    // g("video", {
                    //     src: `${RTMP_URL}/${APP_NAME}/${name}`,
                    //     controls: true,
                    // })
                ),
            ),
        ):
        g("p", {"class": "placeholder"}, "No streams are playing currently.")

    if (mount_point.childNodes.length == 0) {
        mount_point.appendChild(elem)
    }
    else {
        mount_point.replaceChild(elem, mount_point.lastChild)
    }
}


function parse_stat(xml) {
    return {
        nginx_version: xml.querySelector("rtmp>nginx_version").firstChild.data,
        nginx_rtmp_version: xml.querySelector("rtmp>nginx_rtmp_version").firstChild.data,
        built: xml.querySelector("rtmp>built").firstChild.data,
        pid: +xml.querySelector("rtmp>pid").firstChild.data,
        uptime: +xml.querySelector("rtmp>uptime").firstChild.data,
        naccepted: +xml.querySelector("rtmp>naccepted").firstChild.data,
        bw_in: +xml.querySelector("rtmp>bw_in").firstChild.data,
        bytes_in: +xml.querySelector("rtmp>bytes_in").firstChild.data,
        bw_out: +xml.querySelector("rtmp>bw_out").firstChild.data,
        bytes_out: +xml.querySelector("rtmp>bytes_out").firstChild.data,
        applications: Object.fromEntries(Array.prototype.map.call(xml.querySelectorAll("rtmp>server>application") || [], parse_stat_application)),
    }
}

function parse_stat_application(xml) {
    return [
        xml.querySelector("application>name").firstChild.data,
        {
            // nclients: +xml.querySelector("application>live>nclients").firstChild.data,
            streams: Object.fromEntries(Array.prototype.map.call(xml.querySelectorAll("application>live>stream") || [], parse_stat_stream))
        }
    ]
}

function parse_stat_stream(xml) {
    const name = xml.querySelector("stream>name").firstChild.data
    const clients = Array.prototype.map.call(xml.querySelectorAll("stream>client") || [], parse_stat_client)
    const publishers = clients.filter(client => client.is_publishing)
    const audio = xml.querySelector("stream>meta>audio")?
        {
            codec: xml.querySelector("stream>meta>audio>codec").firstChild.data,
            profile: xml.querySelector("stream>meta>audio>profile").firstChild.data,
            channels: +xml.querySelector("stream>meta>audio>channels").firstChild.data,
            sample_rate: +xml.querySelector("stream>meta>audio>sample_rate").firstChild.data,
        }:
        null
    const video = xml.querySelector("stream>meta>video")?
        {
            width: +xml.querySelector("stream>meta>video>width").firstChild.data,
            height: +xml.querySelector("stream>meta>video>height").firstChild.data,
            frame_rate: +xml.querySelector("stream>meta>video>frame_rate").firstChild.data,
            codec: xml.querySelector("stream>meta>video>codec").firstChild.data,
            profile: xml.querySelector("stream>meta>video>profile").firstChild.data,
            compat: xml.querySelector("stream>meta>video>compat").firstChild.data,
            level: xml.querySelector("stream>meta>video>level").firstChild.data,
        }:
        null
    return [
        name,
        {
            name: name,
            time: +xml.querySelector("stream>time").firstChild.data,
            bw_in: +xml.querySelector("stream>bw_in").firstChild.data,
            bytes_in: +xml.querySelector("stream>bytes_in").firstChild.data,
            bw_out: +xml.querySelector("stream>bw_out").firstChild.data,
            bytes_out: +xml.querySelector("stream>bytes_out").firstChild.data,
            bw_audio: +xml.querySelector("stream>bw_audio").firstChild.data,
            bw_video: +xml.querySelector("stream>bw_video").firstChild.data,
            audio: audio,
            video: video,
            publisher: publishers.length? publishers[0]: null,
            viewers: clients.filter(client => !client.is_publishing),
        }
    ]
}

function parse_stat_client(xml) {
    return {
        name: xml.querySelector("client>id").firstChild.data,
        address: xml.querySelector("client>address").firstChild.data,
        time: xml.querySelector("client>time").firstChild.data,
        flashver: xml.querySelector("client>flashver").firstChild.data,
        // swfurl: xml.querySelector("client>swfurl").firstChild.data,
        dropped: xml.querySelector("client>dropped").firstChild.data,
        avsync: xml.querySelector("client>avsync").firstChild.data,
        timestamp: xml.querySelector("client>timestamp").firstChild.data,
        is_publishing: !!xml.querySelector("client>publishing"),
    }
}


async function fetch_stat() {
    const response = await fetch(STAT_URL)
    if (!response.ok) {
        throw new Error(`Failed to fetch ${response.url}: ${response.status} ${response.statusText}`)
    }
    const xml = await response.text()
    return new DOMParser().parseFromString(xml, "text/xml")
}


function create_element(tag, attrs={}, ...children) {
    const elem = document.createElement(tag)

    for (let [key, value] of Object.entries(attrs)) {
        elem.setAttribute(key, value)
    }

    for (let child of children) {
        if (is_string(child)) {
            child = document.createTextNode(child)
        }

        elem.appendChild(child)
    }

    return elem
}


function is_string(obj) {
    return typeof obj == "string" || obj instanceof String
}