分支自 ard/ruoyi-api
blame | 历史 | 补丁 | 提交 | 提交对比 | 忽略空白
liusuyi
2024-07-11 b1084891961232e3c697ea9fc52f127cdccffb6b 
 ard-work/src/main/resources/templates/test.html


@@ -10,22 +10,23 @@


        .top-buffer {


            margin-top: 10px;


        }




        .container {


            border: 2px solid #1b6d85;


            padding: 20px;


            padding: 15px;


        }


    </style>


<body>


<div class="container">


    <div class="row ">


        <div class="col-md-12">


            相机id：<select id="select" style="width: 330px;">


        </select>


        </div>


    </div>


    <div class="row">


        <div class="col-md-5">


            <div class="row top-buffer">


                设备：<select id="selectDev" style="width: 330px;">


            </select>


            </div>


            <div class="row top-buffer">


                通道：<select id="selectChn" style="width: 330px;">


            </select>


            </div>


            <div class="row top-buffer">


                <div class="col-md-1 col-md-offset-1">


                    <button id="up" type="button" class="btn btn-primary">上</button>


@@ -125,6 +126,10 @@


        <div class="col-md-6">


            <div class="row">


                <div class="row top-buffer">


                    <button id="preview" type="button" class="btn btn-primary">预览</button>


                    <button id="previewStop" type="button" class="btn btn-primary">停止</button>


                </div>


                <div class="row top-buffer">


                    <video id="video" muted autoplay loop controls


                           style="width: 100%; height: 360px; object-fit: fill; border: 2px solid #3498db;"/>


                </div>


@@ -137,10 +142,30 @@


    </div>


</div>


<script th:inline="javascript">




    var cameraId, opt, optOpen, optClose, token;


    var cameraId, chanNo,opt, optOpen, optClose, token;


    window.onload = function () {


        console.log(RTCRtpReceiver.getCapabilities('video').codecs)


        opt = {"username": "admin", "password": "admin123"};


        $.ajax({


            headers: {


                'Accept': 'application/json',


                'Content-Type': 'application/json'


            },


            url: "../login",


            type: "post",


            dataType: "json",


            data: JSON.stringify(opt),


            success: function (data) {


                token = data.token;


                getDeviceList();// 获取设备列表


            }


        })


        // 初始化内容


        console.log(cameraMap);


    }




    //获取设备


    function getDeviceList() {


        $.ajax({


            url: "../cameraSdk/list",


            type: "get",


@@ -149,6 +174,7 @@


                var arr = data.data;


                for (var i = 0; i < arr.length; i++) {


                    console.log(arr[i].id);


                    console.log(arr[i].name)


                    var camera = {


                        name: arr[i].name,


                        factory: arr[i].factory,


@@ -162,31 +188,86 @@


                    };


                    cameraMap.set(arr[i].id, camera);


                    //先创建好select里面的option元素


                    var option = document.createElement("option");


                    var option = $("<option>");


                    //给option的text赋值,这就是你点开下拉框能够看到的东西


                    $(option).text(arr[i].id);


                    $(option).val(arr[i].id);


                    $(option).text(arr[i].name);


                    //获取select 下拉框对象,并将option添加进select


                    $('#select').append(option);


                    $('#selectDev').append(option);


                }


                $("#selectDev").trigger("change");


            }


        })


        opt = {"username": "admin", "password": "admin123"};


    }




    //选择设备


    $("#selectDev").change(function () {


        // 在这里处理选择事件


        var cameraId = $(this).find("option:selected").val();


        var name = $(this).find("option:selected").text();


        getChannelList(cameraId);


        console.log("选择了：" + cameraId + "---" + name);


    });




    //获取通道


    function getChannelList(cameraId) {


        console.log(cameraId)


        var myEntity = {


            deviceId: cameraId,


            pageNum: 1,


            pageSize: 64


        }


        var queryString = $.param(myEntity);


        $.ajax({


            headers: {


                'Accept': 'application/json',


                'Content-Type': 'application/json'


                'Content-Type': 'application/json',


                'Authorization': token


            },


            url: "../login",


            type: "post",


            dataType: "json",


            data: JSON.stringify(opt),


            url: "../device/channel/list?" + queryString,


            type: "get",


            success: function (data) {


                token = data.token;


                console.log(data);


                var arr = data.rows;


                $('#selectChn').empty();


                for (var i = 0; i < arr.length; i++) {


                    console.log(arr[i].chanNo);


                    console.log(arr[i].name);


                    //先创建好select里面的option元素


                    var option = document.createElement("option");


                    //给option的text赋值,这就是你点开下拉框能够看到的东西


                    $(option).text(arr[i].name);


                    $(option).val(arr[i].chanNo);


                    //获取select 下拉框对象,并将option添加进select


                    $('#selectChn').append(option);


                }


            }


        })


        // 初始化内容


        console.log(cameraMap);


    }




    //预览


    $('#preview').click(() => {


        var cameraId = $('#selectDev option:selected').val();


        var chanNo = $('#selectChn option:selected').val();


        console.log(cameraId + " " + chanNo)


        $.ajax({


            headers: {


                'Accept': 'application/json',


                'Content-Type': 'application/json',


                'Authorization': token


            },


            url: "../vtdu/media/" + cameraId + "_" + chanNo,


            type: "get",


            dataType: "json",


            success: function (data) {


                realView(data.data.webrtcUrl + "/", "video");


            }


        })


    });


    //停止


    $('#previewStop').click(() => {


        webrtcClient.stop();


    });


    //云台上下左右


    $("#up").mousedown(function () {


        var url = "../cameraSdk/PTZControlWithSpeed";


@@ -314,8 +395,9 @@


    })




    $("#setPreset").click(function () {


        cameraId = $('#select option:selected').val();


        opt = {"cameraId": cameraId, "chanNo": 1, "speed": 8, "presetIndex": 1};


        cameraId = $('#selectDev option:selected').val();


        chanNo = $('#selectChn option:selected').val();


        opt = {"cameraId": cameraId, "chanNo": chanNo, "speed": 8, "presetIndex": 1};


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -332,8 +414,9 @@


        })


    })


    $("#gotoPreset").click(function () {


        cameraId = $('#select option:selected').val();


        opt = {"cameraId": cameraId, "chanNo": 1, "speed": 8, "presetIndex": 1};


        cameraId = $('#selectDev option:selected').val();


        chanNo = $('#selectChn option:selected').val();


        opt = {"cameraId": cameraId, "chanNo": chanNo, "speed": 8, "presetIndex": 1};


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -350,8 +433,9 @@


        })


    })


    $("#getPTZ").click(function () {


        cameraId = $('#select option:selected').val();


        opt = {"cameraId": cameraId, "chanNo": 1};


        cameraId = $('#selectDev option:selected').val();


        chanNo = $('#selectChn option:selected').val();


        opt = {"cameraId": cameraId, "chanNo": chanNo};


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -371,13 +455,14 @@


        })


    })


    $("#setPTZ").click(function () {


        cameraId = $('#select option:selected').val();


        cameraId = $('#selectDev option:selected').val();


        chanNo = $('#selectChn option:selected').val();


        var p = $('#p').val();


        var t = $('#t').val();


        var z = $('#z').val();


        //定义一个带有Map字段的实体对象


        var myEntity = {


            chanNo: 1,


            chanNo: chanNo,


            cameraId: cameraId,


            ptzMap: {


                p: p,


@@ -402,16 +487,18 @@


        })


    })


    $("#setTargetPostion").click(function () {


        cameraId = $('#select option:selected').val();


        cameraId = $('#selectDev option:selected').val();


        chanNo = $('#selectChn option:selected').val();


        var camera = cameraMap.get(cameraId);


        var camP = camera.longitude + ',' + camera.latitude + ',' + camera.altitude;


        var targetP = $('#targetPostion').val();


        var arr = targetP.split(",");


        arr = arr.map(item => parseFloat(item));


        //定义一个带有Map字段的实体对象


        var myEntity = {


            chanNo: 1,


            chanNo: chanNo,


            cameraId: cameraId,


            targetPosition: targetP,


            camPosition: camP,


            targetPosition: arr


        };


        console.log(myEntity)


        $.ajax({


@@ -430,8 +517,9 @@


        })


    })


    $("#setZeroPTZ").click(function () {


        cameraId = $('#select option:selected').val();


        opt = {"cameraId": cameraId, "chanNo": 1};


        cameraId = $('#selectDev option:selected').val();


        chanNo = $('#selectChn option:selected').val();


        opt = {"cameraId": cameraId, "chanNo": chanNo};


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -448,8 +536,9 @@


        })


    })


    $("#WiperPwron").click(function () {


        cameraId = $('#select option:selected').val();


        opt = {"cameraId": cameraId, "chanNo": 1, "speed": 8, "enable": true, "code": 16};


        cameraId = $('#selectDev option:selected').val();


        chanNo = $('#selectChn option:selected').val();


        opt = {"cameraId": cameraId, "chanNo": chanNo, "speed": 8, "enable": true, "code": 16};


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -467,9 +556,10 @@


    })


    var defogflag = true;


    $("#Defogcfg").click(function () {


        cameraId = $('#select option:selected').val();


        optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true};


        optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false};


        cameraId = $('#selectDev option:selected').val();


        chanNo = $('#selectChn option:selected').val();


        optOpen = {"cameraId": cameraId, "chanNo": chanNo, "enable": true};


        optClose = {"cameraId": cameraId, "chanNo": chanNo, "enable": false};


        if (defogflag) {


            $(this).text("关闭透雾");


            defogflag = false;


@@ -509,9 +599,10 @@


    })


    var infrareflag = true;


    $("#Infrarecfg").click(function () {


        cameraId = $('#select option:selected').val();


        optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true};


        optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false};


        cameraId = $('#selectDev option:selected').val();


        chanNo = $('#selectChn option:selected').val();


        optOpen = {"cameraId": cameraId, "chanNo": chanNo, "enable": true};


        optClose = {"cameraId": cameraId, "chanNo": chanNo, "enable": false};


        if (infrareflag) {


            $(this).text("关闭红外");


            infrareflag = false;


@@ -551,9 +642,10 @@


    })


    var focusModeflag = true;


    $("#FocusMode").click(function () {


        cameraId = $('#select option:selected').val();


        optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true};


        optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false};


        cameraId = $('#selectDev option:selected').val();


        chanNo = $('#selectChn option:selected').val();


        optOpen = {"cameraId": cameraId, "chanNo": chanNo, "enable": true};


        optClose = {"cameraId": cameraId, "chanNo": chanNo, "enable": false};


        if (focusModeflag) {


            $(this).text("自动聚焦");


            focusModeflag = false;


@@ -591,8 +683,9 @@


        }


    })


    $("#getFocusPos").click(function () {


        cameraId = $('#select option:selected').val();


        opt = {"cameraId": cameraId, "chanNo": 1};


        cameraId = $('#selectDev option:selected').val();


        chanNo = $('#selectChn option:selected').val();


        opt = {"cameraId": cameraId, "chanNo": chanNo};


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -611,9 +704,10 @@


    })


    var heateRpwronflag = true;


    $("#HeateRpwron").click(function () {


        cameraId = $('#select option:selected').val();


        optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true};


        optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false};


        cameraId = $('#selectDev option:selected').val();


        chanNo = $('#selectChn option:selected').val();


        optOpen = {"cameraId": cameraId, "chanNo": chanNo, "enable": true};


        optClose = {"cameraId": cameraId, "chanNo": chanNo, "enable": false};


        if (heateRpwronflag) {


            $(this).text("关闭云台加热");


            heateRpwronflag = false;


@@ -652,9 +746,10 @@


    })


    var CameraDeicingflag = true;


    $("#CameraDeicing").click(function () {


        cameraId = $('#select option:selected').val();


        optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true};


        optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false};


        cameraId = $('#selectDev option:selected').val();


        chanNo = $('#selectChn option:selected').val();


        optOpen = {"cameraId": cameraId, "chanNo": chanNo, "enable": true};


        optClose = {"cameraId": cameraId, "chanNo": chanNo, "enable": false};


        if (CameraDeicingflag) {


            $(this).text("关闭镜头加热");


            CameraDeicingflag = false;


@@ -692,8 +787,9 @@


        }


    })


    $("#realCutPic").click(function () {


        cameraId = $('#select option:selected').val();


        opt = {"cameraId": cameraId, "chanNo": 1};


        cameraId = $('#selectDev option:selected').val();


        chanNo = $('#selectChn option:selected').val();


        opt = {"cameraId": cameraId, "chanNo": chanNo};


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -711,8 +807,9 @@


        })


    })


    $("#saveCutPic").click(function () {


        cameraId = $('#select option:selected').val();


        opt = {"cameraId": cameraId, "chanNo": 1};


        cameraId = $('#selectDev option:selected').val();


        chanNo = $('#selectChn option:selected').val();


        opt = {"cameraId": cameraId, "chanNo": chanNo};


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -734,9 +831,10 @@


    })


    var recordflag = true;


    $("#record").click(function () {


        cameraId = $('#select option:selected').val();


        optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true};


        optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false};


        cameraId = $('#selectDev option:selected').val();


        chanNo = $('#selectChn option:selected').val();


        optOpen = {"cameraId": cameraId, "chanNo": chanNo, "enable": true};


        optClose = {"cameraId": cameraId, "chanNo": chanNo, "enable": false};


        if (recordflag) {


            $(this).text("停止录像");


            recordflag = false;


@@ -778,8 +876,9 @@




    /*云台公共方法*/


    function commondMethod(url, code, enable) {


        cameraId = $('#select option:selected').val();


        opt = {"cameraId": cameraId, "chanNo": 1, "speed": 4, "enable": enable, "code": code};


        cameraId = $('#selectDev option:selected').val();


        chanNo = $('#selectChn option:selected').val();


        opt = {"cameraId": cameraId, "chanNo": chanNo, "speed": 4, "enable": enable, "code": code};


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -797,14 +896,16 @@


    }




    $('video').click(function (e) {


        var cameraId = $('#select option:selected').val();


        var cameraId = $('#selectDev option:selected').val();


        var chanNo = $('#selectChn option:selected').val();


        console.log(cameraId + " " + chanNo)


        $.ajax({


            headers: {


                'Accept': 'application/json',


                'Content-Type': 'application/json',


                'Authorization': token


            },


            url: "../vtdu/media/" + cameraId + "_" + 1,


            url: "../vtdu/media/" + cameraId + "_" + chanNo,


            type: "get",


            dataType: "json",


            success: function (data) {


@@ -815,10 +916,32 @@




    let webrtcClient;


    //whep操作方法


    const restartPause = 2000;


    const retryPause = 2000;




    const video = document.getElementById('video');


    const message = document.getElementById('message');




    let nonAdvertisedCodecs = [];


    let pc = null;


    let restartTimeout = null;


    let sessionUrl = '';


    let offerData = '';


    let queuedCandidates = [];


    let defaultControls = false;




    const setMessage = (str) => {


        if (str !== '') {


            video.controls = false;


        } else {


            video.controls = defaultControls;


        }


        message.innerText = str;


    };




    const unquoteCredential = (v) => (


        JSON.parse(`"${v}"`)


    );




    const linkToIceServers = (links) => (


        (links !== null) ? links.split(', ').map((link) => {


            const m = link.match(/^<(.+?)>; rel="ice-server"(; username="(.*?)"; credential="(.*?)"; credential-type="password")?/i);


@@ -829,20 +952,21 @@


            if (m[3] !== undefined) {


                ret.username = unquoteCredential(m[3]);


                ret.credential = unquoteCredential(m[4]);


                ret.credentialType = "password";


                ret.credentialType = 'password';


            }




            return ret;


        }) : []


    );


    const parseOffer = (offer) => {




    const parseOffer = (sdp) => {


        const ret = {


            iceUfrag: '',


            icePwd: '',


            medias: [],


        };




        for (const line of offer.split('\r\n')) {


        for (const line of sdp.split('\r\n')) {


            if (line.startsWith('m=')) {


                ret.medias.push(line.slice('m='.length));


            } else if (ret.iceUfrag === '' && line.startsWith('a=ice-ufrag:')) {


@@ -854,7 +978,131 @@




        return ret;


    };


    const generateSdpFragment = (offerData, candidates) => {




    const enableStereoPcmau = (section) => {


        let lines = section.split('\r\n');




        lines[0] += ' 118';


        lines.splice(lines.length - 1, 0, 'a=rtpmap:118 PCMU/8000/2');


        lines.splice(lines.length - 1, 0, 'a=rtcp-fb:118 transport-cc');




        lines[0] += ' 119';


        lines.splice(lines.length - 1, 0, 'a=rtpmap:119 PCMA/8000/2');


        lines.splice(lines.length - 1, 0, 'a=rtcp-fb:119 transport-cc');




        return lines.join('\r\n');


    };




    const enableMultichannelOpus = (section) => {


        let lines = section.split('\r\n');




        lines[0] += " 112";


        lines.splice(lines.length - 1, 0, "a=rtpmap:112 multiopus/48000/3");


        lines.splice(lines.length - 1, 0, "a=fmtp:112 channel_mapping=0,2,1;num_streams=2;coupled_streams=1");


        lines.splice(lines.length - 1, 0, "a=rtcp-fb:112 transport-cc");




        lines[0] += " 113";


        lines.splice(lines.length - 1, 0, "a=rtpmap:113 multiopus/48000/4");


        lines.splice(lines.length - 1, 0, "a=fmtp:113 channel_mapping=0,1,2,3;num_streams=2;coupled_streams=2");


        lines.splice(lines.length - 1, 0, "a=rtcp-fb:113 transport-cc");




        lines[0] += " 114";


        lines.splice(lines.length - 1, 0, "a=rtpmap:114 multiopus/48000/5");


        lines.splice(lines.length - 1, 0, "a=fmtp:114 channel_mapping=0,4,1,2,3;num_streams=3;coupled_streams=2");


        lines.splice(lines.length - 1, 0, "a=rtcp-fb:114 transport-cc");




        lines[0] += " 115";


        lines.splice(lines.length - 1, 0, "a=rtpmap:115 multiopus/48000/6");


        lines.splice(lines.length - 1, 0, "a=fmtp:115 channel_mapping=0,4,1,2,3,5;num_streams=4;coupled_streams=2");


        lines.splice(lines.length - 1, 0, "a=rtcp-fb:115 transport-cc");




        lines[0] += " 116";


        lines.splice(lines.length - 1, 0, "a=rtpmap:116 multiopus/48000/7");


        lines.splice(lines.length - 1, 0, "a=fmtp:116 channel_mapping=0,4,1,2,3,5,6;num_streams=4;coupled_streams=4");


        lines.splice(lines.length - 1, 0, "a=rtcp-fb:116 transport-cc");




        lines[0] += " 117";


        lines.splice(lines.length - 1, 0, "a=rtpmap:117 multiopus/48000/8");


        lines.splice(lines.length - 1, 0, "a=fmtp:117 channel_mapping=0,6,1,4,5,2,3,7;num_streams=5;coupled_streams=4");


        lines.splice(lines.length - 1, 0, "a=rtcp-fb:117 transport-cc");




        return lines.join('\r\n');


    };




    const enableL16 = (section) => {


        let lines = section.split('\r\n');




        lines[0] += " 120";


        lines.splice(lines.length - 1, 0, "a=rtpmap:120 L16/8000/2");


        lines.splice(lines.length - 1, 0, "a=rtcp-fb:120 transport-cc");




        lines[0] += " 121";


        lines.splice(lines.length - 1, 0, "a=rtpmap:121 L16/16000/2");


        lines.splice(lines.length - 1, 0, "a=rtcp-fb:121 transport-cc");




        lines[0] += " 122";


        lines.splice(lines.length - 1, 0, "a=rtpmap:122 L16/48000/2");


        lines.splice(lines.length - 1, 0, "a=rtcp-fb:122 transport-cc");




        return lines.join('\r\n');


    };




    const enableStereoOpus = (section) => {


        let opusPayloadFormat = '';


        let lines = section.split('\r\n');




        for (let i = 0; i < lines.length; i++) {


            if (lines[i].startsWith('a=rtpmap:') && lines[i].toLowerCase().includes('opus/')) {


                opusPayloadFormat = lines[i].slice('a=rtpmap:'.length).split(' ')[0];


                break;


            }


        }




        if (opusPayloadFormat === '') {


            return section;


        }




        for (let i = 0; i < lines.length; i++) {


            if (lines[i].startsWith('a=fmtp:' + opusPayloadFormat + ' ')) {


                if (!lines[i].includes('stereo')) {


                    lines[i] += ';stereo=1';


                }


                if (!lines[i].includes('sprop-stereo')) {


                    lines[i] += ';sprop-stereo=1';


                }


            }


        }




        return lines.join('\r\n');


    };




    const editOffer = (sdp) => {


        const sections = sdp.split('m=');




        for (let i = 0; i < sections.length; i++) {


            if (sections[i].startsWith('audio')) {


                sections[i] = enableStereoOpus(sections[i]);




                if (nonAdvertisedCodecs.includes('pcma/8000/2')) {


                    sections[i] = enableStereoPcmau(sections[i]);


                }




                if (nonAdvertisedCodecs.includes('multiopus/48000/6')) {


                    sections[i] = enableMultichannelOpus(sections[i]);


                }




                if (nonAdvertisedCodecs.includes('L16/48000/2')) {


                    sections[i] = enableL16(sections[i]);


                }




                break;


            }


        }




        return sections.join('m=');


    };




    const generateSdpFragment = (od, candidates) => {


        const candidatesByMedia = {};


        for (const candidate of candidates) {


            const mid = candidate.sdpMLineIndex;


@@ -864,12 +1112,12 @@


            candidatesByMedia[mid].push(candidate);


        }




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


            + 'a=ice-pwd:' + offerData.icePwd + '\r\n';


        let frag = 'a=ice-ufrag:' + od.iceUfrag + '\r\n'


            + 'a=ice-pwd:' + od.icePwd + '\r\n';




        let mid = 0;




        for (const media of offerData.medias) {


        for (const media of od.medias) {


            if (candidatesByMedia[mid] !== undefined) {


                frag += 'm=' + media + '\r\n'


                    + 'a=mid:' + mid + '\r\n';


@@ -882,174 +1130,269 @@


        }




        return frag;


    }


    };




    class WHEPClient {


        constructor(whepUrl, videoId) {


            this.video = videoId;


            this.wurl = new URL('whep', whepUrl);


            this.pc = null;


            this.restartTimeout = null;


            this.eTag = '';


            this.queuedCandidates = [];


            this.start();


        }


    const loadStream = () => {


        requestICEServers();


    };




        start() {


            console.log("requesting ICE servers");


            fetch(this.wurl, {


                method: 'OPTIONS',


            })


                .then((res) => this.onIceServers(res))


    const supportsNonAdvertisedCodec = (codec, fmtp) => (


        new Promise((resolve, reject) => {


            const pc = new RTCPeerConnection({ iceServers: [] });


            pc.addTransceiver('audio', { direction: 'recvonly' });


            pc.createOffer()


                .then((offer) => {


                    if (offer.sdp.includes(' ' + codec)) { // codec is advertised, there's no need to add it manually


                        resolve(false);


                        return;


                    }


                    const sections = offer.sdp.split('m=audio');


                    const lines = sections[1].split('\r\n');


                    lines[0] += ' 118';


                    lines.splice(lines.length - 1, 0, 'a=rtpmap:118 ' + codec);


                    if (fmtp !== undefined) {


                        lines.splice(lines.length - 1, 0, 'a=fmtp:118 ' + fmtp);


                    }


                    sections[1] = lines.join('\r\n');


                    offer.sdp = sections.join('m=audio');


                    return pc.setLocalDescription(offer);


                })


                .then(() => {


                    return pc.setRemoteDescription(new RTCSessionDescription({


                        type: 'answer',


                        sdp: 'v=0\r\n'


                            + 'o=- 6539324223450680508 0 IN IP4 0.0.0.0\r\n'


                            + 's=-\r\n'


                            + 't=0 0\r\n'


                            + 'a=fingerprint:sha-256 0D:9F:78:15:42:B5:4B:E6:E2:94:3E:5B:37:78:E1:4B:54:59:A3:36:3A:E5:05:EB:27:EE:8F:D2:2D:41:29:25\r\n'


                            + 'm=audio 9 UDP/TLS/RTP/SAVPF 118\r\n'


                            + 'c=IN IP4 0.0.0.0\r\n'


                            + 'a=ice-pwd:7c3bf4770007e7432ee4ea4d697db675\r\n'


                            + 'a=ice-ufrag:29e036dc\r\n'


                            + 'a=sendonly\r\n'


                            + 'a=rtcp-mux\r\n'


                            + 'a=rtpmap:118 ' + codec + '\r\n'


                            + ((fmtp !== undefined) ? 'a=fmtp:118 ' + fmtp + '\r\n' : ''),


                    }));


                })


                .then(() => {


                    resolve(true);


                })


                .catch((err) => {


                    console.log('error: ' + err);


                    this.scheduleRestart();


                    resolve(false);


                })


                .finally(() => {


                    pc.close();


                });


        }


        })


    );




        onIceServers(res) {


            this.pc = new RTCPeerConnection({


                iceServers: linkToIceServers(res.headers.get('Link')),


    const getNonAdvertisedCodecs = () => {


        Promise.all([


            ['pcma/8000/2'],


            ['multiopus/48000/6', 'channel_mapping=0,4,1,2,3,5;num_streams=4;coupled_streams=2'],


            ['L16/48000/2']


        ].map((c) => supportsNonAdvertisedCodec(c[0], c[1]).then((r) => (r) ? c[0] : false)))


            .then((c) => c.filter((e) => e !== false))


            .then((codecs) => {


                nonAdvertisedCodecs = codecs;


                loadStream();


            });


    };




            const direction = "sendrecv";


            this.pc.addTransceiver("video", {direction});


            this.pc.addTransceiver("audio", {direction});


    const onError = (err) => {


        if (restartTimeout === null) {


            setMessage(err + ', retrying in some seconds');




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


            this.pc.oniceconnectionstatechange = () => this.onConnectionState();


            if (pc !== null) {


                pc.close();


                pc = null;


            }




            this.pc.ontrack = (evt) => {


                console.log("new track:", evt.track.kind);


                document.getElementById(this.video).srcObject = evt.streams[0];


            };


            restartTimeout = window.setTimeout(() => {


                restartTimeout = null;


                loadStream();


            }, retryPause);




            this.pc.createOffer()


                .then((offer) => this.onLocalOffer(offer));


        }




        onLocalOffer(offer) {


            this.offerData = parseOffer(offer.sdp);


            this.pc.setLocalDescription(offer);




            console.log("sending offer");


            console.log(this.wurl);


            fetch(this.wurl, {


                method: 'POST',


                headers: {


                    'Content-Type': 'application/sdp',


                },


                body: offer.sdp,


            })


                .then((res) => {


                    if (res.status !== 201) {


                        throw new Error('bad status code');


                    }


                    // this.eTag = res.headers.get('ETag');


                    this.eTag = res.headers.get("ETag") || res.headers.get('E-Tag');


                    return res.text();


                })


                .then((sdp) => this.onRemoteAnswer(new RTCSessionDescription({


                    type: 'answer',


                    sdp,


                })))


                .catch((err) => {


                    console.log('error: ' + err);


                    this.scheduleRestart();


            if (sessionUrl) {


                fetch(sessionUrl, {


                    method: 'DELETE',


                });


            }


            sessionUrl = '';




            queuedCandidates = [];


        }


    };




        onConnectionState() {


            if (this.restartTimeout !== null) {


                return;


            }




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




            switch (this.pc.iceConnectionState) {


                case "disconnected":


                    this.scheduleRestart();


            }


        }




        onRemoteAnswer(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])


    const sendLocalCandidates = (candidates) => {


        fetch(sessionUrl + window.location.search, {


            method: 'PATCH',


            headers: {


                'Content-Type': 'application/trickle-ice-sdpfrag',


                'If-Match': '*',


            },


            body: generateSdpFragment(offerData, candidates),


        })


            .then((res) => {


                switch (res.status) {


                    case 204:


                        break;


                    case 404:


                        throw new Error('stream not found');


                    default:


                        throw new Error(`bad status code ${res.status}`);


                }


            }


        }




        sendLocalCandidates(candidates) {


            fetch(this.wurl, {


                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();


                });


            .catch((err) => {


                onError(err.toString());


            });


    };




    const onLocalCandidate = (evt) => {


        if (restartTimeout !== null) {


            return;


        }




        scheduleRestart() {


            if (this.restartTimeout !== null) {


                return;


        if (evt.candidate !== null) {


            if (sessionUrl === '') {


                queuedCandidates.push(evt.candidate);


            } else {


                sendLocalCandidates([evt.candidate])


            }


        }


    };




            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 onRemoteAnswer = (sdp) => {


        if (restartTimeout !== null) {


            return;


        }




        stop() {


            if (this.pc) {


                try {


                    this.pc.close();


                } catch (e) {


                    console.log("Failure close peer connection:" + e);


        pc.setRemoteDescription(new RTCSessionDescription({


            type: 'answer',


            sdp,


        }))


            .then(() => {


                if (queuedCandidates.length !== 0) {


                    sendLocalCandidates(queuedCandidates);


                    queuedCandidates = [];


                }


                this.pc = null;


            }


            })


            .catch((err) => {


                onError(err.toString());


            });


    };




    const sendOffer = (offer) => {


        fetch(new URL('whep', window.location.href) + window.location.search, {


            method: 'POST',


            headers: {


                'Content-Type': 'application/sdp',


            },


            body: offer.sdp,


        })


            .then((res) => {


                switch (res.status) {


                    case 201:


                        break;


                    case 404:


                        throw new Error('stream not found');


                    case 400:


                        return res.json().then((e) => { throw new Error(e.error); });


                    default:


                        throw new Error(`bad status code ${res.status}`);


                }




                sessionUrl = new URL(res.headers.get('location'), window.location.href).toString();




                return res.text()


                    .then((sdp) => onRemoteAnswer(sdp));


            })


            .catch((err) => {


                onError(err.toString());


            });


    };




    const createOffer = () => {


        pc.createOffer()


            .then((offer) => {


                offer.sdp = editOffer(offer.sdp);


                offerData = parseOffer(offer.sdp);


                pc.setLocalDescription(offer)


                    .then(() => {


                        sendOffer(offer);


                    })


                    .catch((err) => {


                        onError(err.toString());


                    });


            })


            .catch((err) => {


                onError(err.toString());


            });


    };




    const onConnectionState = () => {


        if (restartTimeout !== null) {


            return;


        }


    }




        if (pc.iceConnectionState === 'disconnected') {


            onError('peer connection closed');


        }


    };




    const onTrack = (evt) => {


        setMessage('');


        video.srcObject = evt.streams[0];


    };




    const requestICEServers = () => {


        fetch(new URL('whep', window.location.href) + window.location.search, {


            method: 'OPTIONS',


        })


            .then((res) => {


                pc = new RTCPeerConnection({


                    iceServers: linkToIceServers(res.headers.get('Link')),


                    // https://webrtc.org/getting-started/unified-plan-transition-guide


                    sdpSemantics: 'unified-plan',


                });




                const direction = 'sendrecv';


                pc.addTransceiver('video', { direction });


                pc.addTransceiver('audio', { direction });




                pc.onicecandidate = (evt) => onLocalCandidate(evt);


                pc.oniceconnectionstatechange = () => onConnectionState();


                pc.ontrack = (evt) => onTrack(evt);




                createOffer();


            })


            .catch((err) => {


                onError(err.toString());


            });


    };




    const parseBoolString = (str, defaultVal) => {


        str = (str || '');




        if (['1', 'yes', 'true'].includes(str.toLowerCase())) {


            return true;


        }


        if (['0', 'no', 'false'].includes(str.toLowerCase())) {


            return false;


        }


        return defaultVal;


    };




    const loadAttributesFromQuery = () => {


        const params = new URLSearchParams(window.location.search);


        video.controls = parseBoolString(params.get('controls'), true);


        video.muted = parseBoolString(params.get('muted'), true);


        video.autoplay = parseBoolString(params.get('autoplay'), true);


        video.playsInline = parseBoolString(params.get('playsinline'), true);


        defaultControls = video.controls;


    };






    function realView(whepUrl, videoId) {


        console.log(whepUrl)


@@ -1057,4 +1400,4 @@


    }


</script>


</body>


</html>


</html>