~liusuyi/ruoyi-api.git

			@@ -20,8 +20,8 @@

			.container {
			background-color: #151414; /* 将网格项目的颜色设置为红色背景 */
			flex: 9;
			border: 1px solid #ccc;
			flex: 30;
			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; /* 添加相对定位 */
			@@ -68,6 +68,19 @@
			height: 100%;
			object-fit: fill;
			}

			#loadingMessage {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 24px;
			color: white;
			background-color: rgba(0, 0, 0, 0.7);
			padding: 10px 20px;
			border-radius: 5px;
			display: none;
			}
			</style>
			</head>
			<body>
			@@ -75,65 +88,26 @@
			<div class="container" id="gridContainer">
			<!-- 网格项目将由 JavaScript 动态生成 -->
			</div>
			<div id="loadingMessage">正在取流</div>
			<div class="container2">
			<div class="button-container">
			<button class="toggle-button" onclick="closeAllVideo()">关闭</button>
			<button class="toggle-button" onclick="changeGrid(1, 1)">1x1</button>
			<button class="toggle-button" onclick="changeGrid(2, 2)">2x2</button>
			<button class="toggle-button" onclick="changeGrid(3, 3)">3x3</button>
			<button class="toggle-button" onclick="changeGrid(4, 4)">4x4</button>
			<button class="toggle-button" onclick="changeGrid(5, 5)">5x5</button>
			<button class="toggle-button" onclick="changeGrid(6, 6)">6x6</button>
			<button class="toggle-button" onclick="changeGrid(7, 7)">7x7</button>
			<button class="toggle-button" onclick="changeGrid(8, 8)">8x8</button>
			<button class="toggle-button" onclick="changeGrid(9, 9)">9x9</button>
			<input id="videoUrl" type="text" value="http://192.168.1.11:8889/164/" style="width: 250px"/>
			</div>
			</div>
			</div>

			<script>
			function calculateAspectRatio(videoWidth, videoHeight) {
			return videoWidth / videoHeight;
			}

			function adjustGridItemSize(gridItem, videoWidth, videoHeight) {
			const aspectRatio = calculateAspectRatio(videoWidth, videoHeight);
			gridItem.style.aspectRatio = aspectRatio; /* 设置宽高比 */
			}

			function changeGrid(rows, cols) {
			closeAllVideo();
			const gridContainer = document.getElementById('gridContainer');
			gridContainer.innerHTML = '';

			for (let i = 1; i <= rows * cols; i++) {
			const gridItem = document.createElement('div');
			gridItem.className = 'grid-item';
			const videoContainer = document.createElement('div');
			videoContainer.className = 'video-container';
			const video = document.createElement('video');
			video.id="video"+i;
			video.controls = true;
			video.autoplay = true;
			video.muted = true;
			videoContainer.appendChild(video);
			gridItem.appendChild(videoContainer);
			gridContainer.appendChild(gridItem);

			video.addEventListener('loadedmetadata', function () {
			adjustGridItemSize(gridItem, gridItem.videoWidth, gridItem.videoHeight);
			});
			console.log(video.id)
			}

			gridContainer.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
			}


			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/");
			console.log(chanMap);
			}
			//whep操作方法
			const linkToIceServers = (links) => (
			(links !== null) ? links.split(', ').map((link) => {
			const m = link.match(/^<(.+?)>; rel="ice-server"(; username="(.?)"; credential="(.?)"; credential-type="password")?/i);
			@@ -364,34 +338,104 @@
			}
			}

			let videoMap = new Map();
			$(document).on('click', 'video', function() {
			//初始化加载
			var chanMap = new Map();
			window.onload = function () {
			let videoUrl = $("#videoUrl").val();
			for (let i = 1; i < 82; i++) {
			chanMap.set("video" + i, videoUrl);
			}
			console.log(chanMap);
			changeGrid(2, 2);
			}
			//绑定点击事件
			let playMap = new Map();
			$(document).on('click', 'video', function () {
			let ID = this.id;//获取当前点击事件的元素
			console.log(ID);
			console.log(videoMap);
			if (videoMap.get(ID) != null) {
			console.log(playMap);
			if (playMap.get(ID) != null) {
			closeVideo(ID);
			} else {
			let stream = chanMap.get(ID);
			let client = new WHEPClient(stream, ID);
			videoMap.set(ID, client);
			playMap.set(ID, client);
			}
			});

			//关闭一个video
			function closeVideo(id) {
			console.log("关闭" + id)
			let client = videoMap.get(id);
			let client = playMap.get(id);
			client.stop(id);
			videoMap.delete(id);
			playMap.delete(id);
			}
			function closeAllVideo(){
			videoMap.forEach((val,key) => {
			console.log(val,key);

			//关闭所有video
			function closeAllVideo() {
			playMap.forEach((val, key) => {
			val.stop(key);
			videoMap.delete(key);
			closeVideo(key);
			playMap.delete(key);
			})
			}

			//动态改变grid
			function calculateAspectRatio(videoWidth, videoHeight) {
			return videoWidth / videoHeight;
			}

			function adjustGridItemSize(gridItem, videoWidth, videoHeight) {
			const aspectRatio = calculateAspectRatio(videoWidth, videoHeight);
			gridItem.style.aspectRatio = aspectRatio; /* 设置宽高比 */
			}

			function changeGrid(rows, cols) {
			closeAllVideo();
			let num = rows * cols;
			let videoUrl = $("#videoUrl").val();
			for (let i = 1; i < num + 1; i++) {
			chanMap.set("video" + i, videoUrl);
			}
			const gridContainer = document.getElementById('gridContainer');
			gridContainer.innerHTML = '';

			for (let i = 1; i <= rows * cols; i++) {
			const gridItem = document.createElement('div');
			gridItem.className = 'grid-item';
			const videoContainer = document.createElement('div');
			videoContainer.className = 'video-container';
			const video = document.createElement('video');
			video.id = "video" + i;
			video.controls = true;
			video.autoplay = true;
			video.muted = true;
			video.loop = true;

			videoContainer.appendChild(video);
			gridItem.appendChild(videoContainer);
			gridContainer.appendChild(gridItem);

			video.addEventListener('loadedmetadata', function () {
			adjustGridItemSize(gridItem, gridItem.videoWidth, gridItem.videoHeight);
			});
			video.addEventListener("click", function () {
			loadingMessage.style.display = "block";
			video.play().then(function () {
			loadingMessage.style.display = "none";
			}).catch(function (error) {
			console.error("Error playing the video:", error);
			loadingMessage.style.display = "none";
			});
			});
			console.log(video.id)
			let stream = chanMap.get(video.id);
			let client = new WHEPClient(stream, video.id);
			playMap.set(video.id, client);
			}

			gridContainer.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
			}
			</script>
			</body>
			</html>