fixedcam.html

<main class="container-fluid d-flex align-items-center" style="position: absolute; top: 0; bottom: 0; overflow: hidden;">
    <div class="row align-items-center" style="height: 100vh;" id="videoContainer" hidden>
        <div class="col-12 text-center" style="padding: 0">
            <video id="localVideo" class="localVideo" autoplay playsinline muted style="width: 100vw !important; margin-right: 0; margin-left: 0;"></video>
        </div>
    </div>
</main>

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@remotemonster/sdk/remon.min.js"></script>
<script src="https://cdn.WebRTC-Experiment.com/getScreenId.js"></script>
<script>
    let channel_Id
    const localVideo = document.getElementById("localVideo");
    const res_x = parseInt(window.innerWidth) * 3;
    const res_y = parseInt(window.innerHeight) * 3;
    const aspectRatio = res_y / res_x;
    const remonConfig = {
        credential: {
            serviceId: '{{ remonId }}',
            key: '{{ remonSecret }}'
        },
        media: {
            audio: {
                channelCount: 2,
                maxBandwidth: 128,
                autoGainControl: true,
                echoCancellation: true,
                noiseSuppression: true,
            },
            video: {
                facingMode: 'environment',
                width: {ideal: res_x.toString()},
                aspectRatio: aspectRatio,
                //codec: 'vp9',
                //minBandwidth: 500000,
                //maxBandwidth: 500000
            }
        },
        view: {
            local: '#localVideo'
        }
    };

    function getUrl(action=null) {
        var base = window.location.href
        var url = `${base}?channelId=${channel_Id}`
        if (action) {
            url = `${url}&action=${action}`
        }
        return url
    }

    const listener = {
        onCreate(channelId) {
            channel_Id = channelId
            document.getElementById('callWait').hidden = true
            document.getElementById('callInitFail').hidden = true
            document.getElementById('videoContainer').hidden = false
            $.ajax({
                type: "POST",
                url: getUrl('onCreate'),
                data: {'csrfmiddlewaretoken': '{{ csrf_token }}'},
                dataType: "json",
            })
        },
        onClose() {
            alert('송출이 중지되었습니다.')
        },
        onError(e) {
            console.log(e)
        }
    };
    const caster = new Remon({listener, config: remonConfig});
    caster.createCast();
</script>