una/modules/boonex/stream/template/stream_broadcast_ome.html

<div class="bx-stream-broadcast-wrapper">
    <video muted class="bx-stream-broadcast-preview" id="bx-stream-preview-__suffix__"></video>
    <div class="bx-stream-broadcast-controls bx-def-margin-sec-top">
        <button disabled id="bx-stream-start-__suffix__" class="bx-btn bx-btn-primary bx-btn-disabled"><bx_text:_bx_stream_start_streaming /></button>
        <button disabled id="bx-stream-stop-__suffix__" class="bx-btn bx-btn-primary bx-btn-disabled bx-def-margin-sec-left"><bx_text:_bx_stream_stop_streaming /></button>
        <button id="bx-stream-settings-__suffix__" class="bx-btn bx-def-margin-sec-left"><i class="sys-icon cog"></i></button>
        <button id="bx-stream-share-__suffix__" class="bx-btn bx-def-margin-sec-left"><i class="sys-icon share"></i></button>
    </div>
</div>
__popup_share__
__popup_settings__
<script src="https://cdn.jsdelivr.net/npm/ovenlivekit@latest/dist/OvenLiveKit.min.js"></script>
<script>
    // setup share btn
    $('#bx-stream-share-__suffix__').click(function() {
        $('#bx-stream-popup-share').dolPopup();
    });

    // setup settings btn
    $('#bx-stream-settings-__suffix__').click(function() {
        $('#bx-stream-popup-settings').dolPopup();
    });

    // setup stop btn
    let fOnStreamingStop = function () {
        $('#bx-stream-preview-__suffix__').removeClass('bx-stream-broadcast-preview-live');
        $('#bx-stream-start-__suffix__').attr('disabled', false).removeClass('bx-btn-disabled');
        $('#bx-stream-stop-__suffix__').attr('disabled', true).addClass('bx-btn-disabled');
        $('#bx-stream-settings-__suffix__').attr('disabled', false).removeClass('bx-btn-disabled');
    };
    $('#bx-stream-stop-__suffix__').click(function() {
        if ('undefined' === typeof(oOvenLivekit__suffix__) || !oOvenLivekit__suffix__)
            return;
        fInit();
    });    

    // setup start btn
    let fOnStreamingStart = function () {
        $('#bx-stream-preview-__suffix__').addClass('bx-stream-broadcast-preview-live');
        $('#bx-stream-start-__suffix__').attr('disabled', true).addClass('bx-btn-disabled');
        $('#bx-stream-stop-__suffix__').attr('disabled', false).removeClass('bx-btn-disabled');
        $('#bx-stream-settings-__suffix__').attr('disabled', true).addClass('bx-btn-disabled');
    };
    $('#bx-stream-start-__suffix__').click(function() {
        if ('undefined' === typeof(oOvenLivekit__suffix__) || !oOvenLivekit__suffix__)
            return;

        // Get media stream from user device
        oOvenLivekit__suffix__.getUserMedia(fGetUserConstraints()).then(function () {
            const oConnectionConfig = {
                iceServers : null ,
                iceTransportPolicy: null,
                maxBitrate: null // is Kbps
            }
            // Got device stream and start streaming to OvenMediaEngine
            oOvenLivekit__suffix__.startStreaming('__broadcast_url__', oConnectionConfig);

            fOnStreamingStart();

        }).catch(function (error) {
            // Failed to get device stream.
            console.log(error);
        });
    });

    // setup event for changing source devices
    $('select[name=audio],select[name=video]').change(function () {
        if ('undefined' === typeof(oOvenLivekit__suffix__) || !oOvenLivekit__suffix__)
            return;
        fInit();
    });

    // get currently selected devices
    let fGetUserConstraints = function() {

        let videoDeviceId = $('select[name=video]').val();
        let audioDeviceId = $('select[name=audio]').val();

        let newConstraint = {};

        if (videoDeviceId) {
            newConstraint.video = {
                deviceId: {
                    exact: videoDeviceId
                }
            };
            if (__aspect_ratio__)
                newConstraint.video['aspectRatio'] = {ideal: __aspect_ratio__};
        }

        if (audioDeviceId) {
            newConstraint.audio = {
                deviceId: {
                    exact: audioDeviceId
                }
            };
        }

        return newConstraint;
    }

    // fill list of source devices
    let fSetDevice = function (sType, eSelect, oDevices) {

        eSelect.html('');

        if (oDevices.length === 0) {

            eSelect.append('<option value="">No Source Available</option>'); // TODO: add to lang

        } else {

            $.each(oDevices, function () {
                let oDevice = this;
                let option = $('<option></option>');

                option.text(oDevice.label);
                option.val(oDevice.deviceId);

                eSelect.append(option);
            });
        }

        eSelect.find('option').eq(0).prop('selected', true);
    }

    // initialize
    let fInit = function () {
        if ('undefined' !== typeof(oOvenLivekit__suffix__) && oOvenLivekit__suffix__)
            oOvenLivekit__suffix__.remove();

        // Configuration
        var oConfig = {
            callbacks: {
                error: function (error) {
                    let errorMessage = '';

                    if (error.message)
                        errorMessage = error.message;
                    else if (error.name)
                        errorMessage = error.name;
                    else
                        errorMessage = error.toString();

                    if (errorMessage === 'OverconstrainedError')
                        errorMessage = 'The input device does not support the specified resolution or frame rate.';

                    console.error(errorMessage);
                },
                connected: function (event) {
                },
                connectionClosed: function (type, event) {

                    if (type === 'websocket') {
                        let reason;
                        // See http://tools.ietf.org/html/rfc6455#section-7.4.1
                        if (event.code === 1000)
                            reason = "Normal closure, meaning that the purpose for which the connection was established has been fulfilled.";
                        else if (event.code === 1001)
                            reason = "An endpoint is \"going away\", such as a server going down or a browser having navigated away from a page.";
                        else if (event.code === 1002)
                            reason = "An endpoint is terminating the connection due to a protocol error";
                        else if (event.code === 1003)
                            reason = "An endpoint is terminating the connection because it has received a type of data it cannot accept (e.g., an endpoint that understands only text data MAY send this if it receives a binary message).";
                        else if (event.code === 1004)
                            reason = "Reserved. The specific meaning might be defined in the future.";
                        else if (event.code === 1005)
                            reason = "No status code was actually present.";
                        else if (event.code === 1006)
                            reason = "The connection was closed abnormally, e.g., without sending or receiving a Close control frame";
                        else if (event.code === 1007)
                            reason = "An endpoint is terminating the connection because it has received data within a message that was not consistent with the type of the message (e.g., non-UTF-8 [http://tools.ietf.org/html/rfc3629] data within a text message).";
                        else if (event.code === 1008)
                            reason = "An endpoint is terminating the connection because it has received a message that \"violates its policy\". This reason is given either if there is no other sutible reason, or if there is a need to hide specific details about the policy.";
                        else if (event.code === 1009)
                            reason = "An endpoint is terminating the connection because it has received a message that is too big for it to process.";
                        else if (event.code === 1010) // Note that this status code is not used by the server, because it can fail the WebSocket handshake instead.
                            reason = "An endpoint (client) is terminating the connection because it has expected the server to negotiate one or more extension, but the server didn't return them in the response message of the WebSocket handshake. <br /> Specifically, the extensions that are needed are: " + event.reason;
                        else if (event.code === 1011)
                            reason = "A server is terminating the connection because it encountered an unexpected condition that prevented it from fulfilling the request.";
                        else if (event.code === 1015)
                            reason = "The connection was closed due to a failure to perform a TLS handshake (e.g., the server certificate can't be verified).";
                        else
                            reason = "Unknown reason";

                        console.log('Web Socket is closed. ' + reason);
                    }
                    if (type === 'ice') {
                        console.log('Peer Connection is closed. State: ' + input.peerConnection.iceConnectionState);
                    }                    
                },
                iceStateChange: function (state) {
                    console.log("IceStateChange: " + state);
                }
            }
        }

        // Initialize OvenLiveKit
        oOvenLivekit__suffix__ = OvenLiveKit.create(oConfig);

        // Attaching video element for playing device stream
        oOvenLivekit__suffix__.attachMedia(document.getElementById('bx-stream-preview-__suffix__'));

        oOvenLivekit__suffix__.getUserMedia(fGetUserConstraints()).then(function () {
            fOnStreamingStop(); // instead of init
        }).catch(function (error) {
            // Failed to get device stream.
            console.log(error);
        });
    };
    
    let fPreInit = function () {

        fSetDevice('audio', $('select[name=audio]'), glAllDevices.audioinput);
        fSetDevice('video', $('select[name=video]'), glAllDevices.videoinput);

        fInit();
    };

    $(document).ready(function() {
        // get all devices at the first time
        OvenLiveKit.getDevices().then(function (devices) {

            glAllDevices = devices;
            fPreInit();

        }).catch(function (error) {

            let errorMessage = '';

            if (error.message) {
                errorMessage = error.message;
            } else if (error.name) {
                errorMessage = error.name;
            } else {
                errorMessage = error.toString();
            }

            console.error(errorMessage);
        });
    });
</script>