internal/core/webrtc_publish_index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
}
body {
    display: flex;
    flex-direction: column;
}
#video {
	height: 100%;
	background: black;
    flex-grow: 1;
    min-height: 0;
}
#controls {
    height: 200px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#device {
    flex-direction: column;
}
#device > div {
    margin: 10px 0;
    display: flex;
    gap: 20px;
    justify-content: center;
}
select {
    width: 200px;
}
</style>
</head>
<body>

<video id="video" muted controls autoplay playsinline></video>
<div id="controls">
    <div id="initializing" style="display: block;">
        initializing
    </div>
    <div id="device" style="display: none;">
        <div id="device_line">
            video device:
            <select id="video_device">
                <option value="none">none</option>
            </select>

            audio device:
            <select id="audio_device">
                <option value="none">none</option>
            </select>
        </div>
        <div id="codec_line">
            video codec:
            <select id="video_codec">
            </select>

            audio codec:
            <select id="audio_codec">
            </select>
        </div>
        <div id="bitrate_line">
            video bitrate (kbps):
            <input id="video_bitrate" type="text" value="10000" />
        </div>
        <div id="submit_line">
            <button id="publish_confirm">publish</button>
        </div>
    </div>
    <div id="transmitting" style="display: none;">
        publishing
    </div>
</div>

<script>

const INITIALIZING = 0;
const DEVICE = 1;
const TRANSMITTING = 2;

let state = INITIALIZING;

const setState = (newState) => {
    state = newState;

    switch (state) {
    case DEVICE:
        document.getElementById("initializing").style.display = 'none';
        document.getElementById("device").style.display = 'flex';
        document.getElementById("transmitting").style.display = 'none';
        break;

    case TRANSMITTING:
        document.getElementById("initializing").style.display = 'none';
        document.getElementById("device").style.display = 'none';
        document.getElementById("transmitting").style.display = 'flex';
        break;
    }
};

const restartPause = 2000;

const linkToIceServers = (links) => (
    (links !== null) ? links.split(', ').map((link) => {
        const m = link.match(/^<(.+?)>; rel="ice-server"(; username="(.*?)"; credential="(.*?)"; credential-type="password")?/i);
        const ret = {
            urls: [m[1]],
        };

        if (m[3] !== undefined) {
            ret.username = m[3];
            ret.credential = m[4];
            ret.credentialType = "password";
        }

        return ret;
    }) : []
);

const parseOffer = (offer) => {
    const ret = {
        iceUfrag: '',
        icePwd: '',
        medias: [],
    };

    for (const line of offer.split('\r\n')) {
        if (line.startsWith('m=')) {
            ret.medias.push(line.slice('m='.length));
        } else if (ret.iceUfrag === '' && line.startsWith('a=ice-ufrag:')) {
            ret.iceUfrag = line.slice('a=ice-ufrag:'.length);
        } else if (ret.icePwd === '' && line.startsWith('a=ice-pwd:')) {
            ret.icePwd = line.slice('a=ice-pwd:'.length);
        }
    }

    return ret;
};

const generateSdpFragment = (offerData, candidates) => {
    const candidatesByMedia = {};
    for (const candidate of candidates) {
        const mid = candidate.sdpMLineIndex;
        if (candidatesByMedia[mid] === undefined) {
            candidatesByMedia[mid] = [];
        }
        candidatesByMedia[mid].push(candidate);
    }

    let frag = 'a=ice-ufrag:' + offerData.iceUfrag + '\r\n'
        + 'a=ice-pwd:' + offerData.icePwd + '\r\n';

    let mid = 0;

    for (const media of offerData.medias) {
        if (candidatesByMedia[mid] !== undefined) {
            frag += 'm=' + media + '\r\n'
                + 'a=mid:' + mid + '\r\n';

            for (const candidate of candidatesByMedia[mid]) {
                frag += 'a=' + candidate.candidate + '\r\n';
            }
        }
        mid++;
    }

    return frag;
}

class Transmitter {
    constructor(stream) {
        this.stream = stream;
		this.pc = null;
		this.restartTimeout = null;
        this.eTag = '';
        this.queuedCandidates = [];
		this.start();
    }

    start() {
        console.log("requesting ICE servers");

        fetch('whip', {
            method: 'OPTIONS',
        })
            .then((res) => this.onIceServers(res))
            .catch((err) => {
                console.log('error: ' + err);
                this.scheduleRestart();
            });
    }

    onIceServers(res) {
        this.pc = new RTCPeerConnection({
            iceServers: linkToIceServers(res.headers.get('Link')),
        });

        this.pc.onicecandidate = (evt) => this.onLocalCandidate(evt);
        this.pc.oniceconnectionstatechange = () => this.onConnectionState();

        this.stream.getTracks().forEach((track) => {
            this.pc.addTrack(track, this.stream);
        });

        this.pc.createOffer()
            .then((desc) => {
                this.offerData = parseOffer(desc.sdp);
                this.pc.setLocalDescription(desc);

                console.log("sending offer");

                const videoCodec = document.getElementById('video_codec').value;
                const audioCodec = document.getElementById('audio_codec').value;
                const videoBitrate = document.getElementById('video_bitrate').value;

                let params = '?video_codec=' + videoCodec +
                    '&audio_codec=' + audioCodec +
                    '&video_bitrate=' + videoBitrate;

                fetch('whip' + params, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/sdp',
                    },
                    body: desc.sdp,
                })
                    .then((res) => {
                        if (res.status !== 201) {
                            throw new Error('bad status code');
                        }
                        this.eTag = res.headers.get('E-Tag');
                        return res.text();
                    })
                    .then((sdp) => this.onRemoteDescription(new RTCSessionDescription({
                        type: 'answer',
                        sdp,
                    })))
                    .catch((err) => {
                        console.log('error: ' + err);
                        this.scheduleRestart();
                    });
            });
    }

    onConnectionState() {
        if (this.restartTimeout !== null) {
            return;
        }

        console.log("peer connection state:", this.pc.iceConnectionState);

        switch (this.pc.iceConnectionState) {
        case "disconnected":
            this.scheduleRestart();
        }
    }

    onRemoteDescription(answer) {
		if (this.restartTimeout !== null) {
			return;
		}

        this.pc.setRemoteDescription(new RTCSessionDescription(answer));

        if (this.queuedCandidates.length !== 0) {
            this.sendLocalCandidates(this.queuedCandidates);
            this.queuedCandidates = [];
        }
	}

    onLocalCandidate(evt) {
        if (this.restartTimeout !== null) {
            return;
        }

        if (evt.candidate !== null) {
            if (this.eTag === '') {
                this.queuedCandidates.push(evt.candidate);
            } else {
                this.sendLocalCandidates([evt.candidate])
            }
        }
    }

    sendLocalCandidates(candidates) {
        fetch('whip', {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/trickle-ice-sdpfrag',
                'If-Match': this.eTag,
            },
            body: generateSdpFragment(this.offerData, candidates),
        })
            .then((res) => {
                if (res.status !== 204) {
                    throw new Error('bad status code');
                }
            })
            .catch((err) => {
                console.log('error: ' + err);
                this.scheduleRestart();
            });
    }

    scheduleRestart() {
        if (this.restartTimeout !== null) {
            return;
        }

        if (this.pc !== null) {
            this.pc.close();
            this.pc = null;
        }

        this.restartTimeout = window.setTimeout(() => {
            this.restartTimeout = null;
            this.start();
        }, restartPause);

        this.eTag = '';
        this.queuedCandidates = [];
    }
}

const onTransmit = (stream) => {
    setState(TRANSMITTING);
    document.getElementById('video').srcObject = stream;
    new Transmitter(stream);
};

const onPublish = () => {
    const videoId = document.getElementById('video_device').value;
    const audioId = document.getElementById('audio_device').value;

    if (videoId !== 'screen') {
        let video = false;
        if (videoId !== 'none') {
            video = {
                deviceId: videoId,
            };
        }

        let audio = false;

        if (audioId !== 'none') {
            audio = {
                deviceId: audioId,
            };
        }

        navigator.mediaDevices.getUserMedia({ video, audio })
            .then(onTransmit);
    } else {
        navigator.mediaDevices.getDisplayMedia({
            video: {
                width: { ideal: 1920 },
                height: { ideal: 1080 },
                frameRate: { ideal: 30 },
                cursor: "always",
            },
            audio: false,
        })
            .then(onTransmit);
    }
};

const populateDevices = () => {
    return navigator.mediaDevices.enumerateDevices()
        .then((devices) => {
            for (const device of devices) {
                switch (device.kind) {
                case 'videoinput':
                    {
                        const opt = document.createElement('option');
                        opt.value = device.deviceId;
                        opt.text = device.label;
                        document.getElementById('video_device').appendChild(opt);
                    }
                    break;

                case 'audioinput':
                    {
                        const opt = document.createElement('option');
                        opt.value = device.deviceId;
                        opt.text = device.label;
                        document.getElementById('audio_device').appendChild(opt);
                    }
                    break;
                }
            }

            // add screen
            const opt = document.createElement('option');
            opt.value = "screen";
            opt.text = "screen";
            document.getElementById('video_device').appendChild(opt);

            // set default
            document.getElementById('video_device').value = document.getElementById('video_device').children[1].value;
            if (document.getElementById('audio_device').children.length > 1) {
                document.getElementById('audio_device').value = document.getElementById('audio_device').children[1].value;
            }
        });
};

const populateCodecs = () => {
    const pc = new RTCPeerConnection({});
    pc.addTransceiver("video", { direction: 'sendonly' });
    pc.addTransceiver("audio", { direction: 'sendonly' });

    return pc.createOffer()
        .then((desc) => {
            const sdp = desc.sdp.toLowerCase();

            for (const codec of ['av1/90000', 'vp9/90000', 'vp8/90000', 'h264/90000']) {
                if (sdp.includes(codec)) {
                    const opt = document.createElement('option');
                    opt.value = codec.split('/')[0];
                    opt.text = codec.split('/')[0].toUpperCase();
                    document.getElementById('video_codec').appendChild(opt);
                }
            }

            for (const codec of ['opus/48000', 'g722/8000', 'pcmu/8000', 'pcma/8000']) {
                if (sdp.includes(codec)) {
                    const opt = document.createElement('option');
                    opt.value = codec.split('/')[0];
                    opt.text = codec.split('/')[0].toUpperCase();
                    document.getElementById('audio_codec').appendChild(opt);
                }
            }

            pc.close();
        });
};

const initialize = () => {
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        .then(() => Promise.all([
            populateDevices(),
            populateCodecs(),
        ]))
        .then(() => {
            setState(DEVICE);
        });
};

document.getElementById("publish_confirm").addEventListener('click', onPublish);

initialize();

</script>

</body>
</html>