‘liusuyi’
2023-08-29 510c29eecab77493816d3f0cdb5e5c4462083cc8
ard-work/src/main/resources/templates/mediaMTX.html
@@ -10,7 +10,7 @@
        .video-container {
            display: inline-block;
            vertical-align: top;
            width: 25%; /* 六个视频平均分配一行的宽度 */
            width: 33%; /* 3个视频平均分配一行的宽度 */
            /*padding: 2px; !* 可以根据需要调整内边距 *!*/
            box-sizing: border-box;
        }
@@ -42,7 +42,16 @@
    </div>
</div>
<script th:inline="javascript">
    const restartPause = 2000;
    var chanMap = new Map();
    window.onload = function () {
        chanMap.set("video1", "http://127.0.0.1:8889/164/");
        chanMap.set("video2", "http://127.0.0.1:8889/164/");
        chanMap.set("video3", "http://127.0.0.1:8889/164/");
        chanMap.set("video4", "http://127.0.0.1:8889/165/");
        chanMap.set("video5", "http://127.0.0.1:8889/165/");
        console.log(chanMap);
    }
    const linkToIceServers = (links) => (
        (links !== null) ? links.split(', ').map((link) => {
            const m = link.match(/^<(.+?)>; rel="ice-server"(; username="(.*?)"; credential="(.*?)"; credential-type="password")?/i);
@@ -260,22 +269,37 @@
            this.eTag = '';
            this.queuedCandidates = [];
        }
        stop() {
            if (this.pc) {
                try {
                    this.pc.close();
                } catch (e) {
                    console.log("Failure close peer connection:" + e);
                }
                this.pc = null;
            }
        }
    }
    let videoMap = new Map();
    $('video').click(function (e) {
        let ID = e.target.id;//获取当前点击事件的元素
        console.log(ID);
        console.log(videoMap);
        if (videoMap.get(ID) != null) {
            closeVideo(ID, videoMap.get(ID));
            closeVideo(ID);
        } else {
            let client = new WHEPClient("http://127.0.0.1:8889/165/", ID);
            let stream = chanMap.get(ID);
            let client = new WHEPClient(stream, ID);
            videoMap.set(ID, client);
        }
    });
    function closeVideo(id) {
        let elementById = document.getElementById(id);
        elementById.pause();
        console.log("关闭" + id)
        let client = videoMap.get(id);
        client.stop(id);
        videoMap.delete(id);
    }
</script>