流媒体优化

‘liusuyi’

2023-09-09 71dbac60afa54d2642c3471c080686da56579ca0

 ard-work/src/main/resources/templates/preview.html

@@ -21,7 +21,7 @@
        .container {
            background-color: #151414; /* 将网格项目的颜色设置为红色背景 */
            flex: 9;
            border: 1px solid #ccc;
            border: 10px solid;
            box-sizing: border-box;
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* 默认 2x2 网格 */
@@ -35,7 +35,7 @@
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #ccc;
            border: 2px solid #384551;
            box-sizing: border-box;
            padding: 10px; /* 内边距为 10px */
            position: relative; /* 添加相对定位 */
@@ -132,11 +132,11 @@
            video.addEventListener('loadedmetadata', function () {
                adjustGridItemSize(gridItem, gridItem.videoWidth, gridItem.videoHeight);
            });
            video.addEventListener("click", function() {
            video.addEventListener("click", function () {
                loadingMessage.style.display = "block";
                video.play().then(function() {
                video.play().then(function () {
                    loadingMessage.style.display = "none";
                }).catch(function(error) {
                }).catch(function (error) {
                    console.error("Error playing the video:", error);
                    loadingMessage.style.display = "none";
                });
@@ -148,14 +148,27 @@
    }


    let mediamtxHost = "192.168.1.227"
    var chanMap = new Map();
    window.onload = function () {
        changeGrid(2, 2);
        chanMap.set("video1", "http://127.0.0.1:8889/245/");
        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/");
        chanMap.set("video1", "http://" + mediamtxHost + ":8889/164/");
        chanMap.set("video2", "http://" + mediamtxHost + ":8889/164/");
        chanMap.set("video3", "http://" + mediamtxHost + ":8889/164/");
        chanMap.set("video4", "http://" + mediamtxHost + ":8889/164/");
        chanMap.set("video5", "http://" + mediamtxHost + ":8889/164/");
        chanMap.set("video6", "http://" + mediamtxHost + ":8889/164/");
        chanMap.set("video7", "http://" + mediamtxHost + ":8889/164/");
        chanMap.set("video8", "http://" + mediamtxHost + ":8889/164/");
        chanMap.set("video9", "http://" + mediamtxHost + ":8889/164/");
        chanMap.set("video10", "http://" + mediamtxHost + ":8889/164/");
        chanMap.set("video11", "http://" + mediamtxHost + ":8889/164/");
        chanMap.set("video12", "http://" + mediamtxHost + ":8889/164/");
        chanMap.set("video13", "http://" + mediamtxHost + ":8889/164/");
        chanMap.set("video14", "http://" + mediamtxHost + ":8889/164/");
        chanMap.set("video15", "http://" + mediamtxHost + ":8889/164/");
        chanMap.set("video16", "http://" + mediamtxHost + ":8889/164/");

        console.log(chanMap);
    }
    const linkToIceServers = (links) => (
@@ -417,6 +430,7 @@
        })
    }


</script>
</body>
</html>