| | |
| | | .video-container { |
| | | display: inline-block; |
| | | vertical-align: top; |
| | | width: 25%; /* 六个视频平均分配一行的宽度 */ |
| | | width: 33%; /* 3个视频平均分配一行的宽度 */ |
| | | /*padding: 2px; !* 可以根据需要调整内边距 *!*/ |
| | | box-sizing: border-box; |
| | | } |
| | |
| | | </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); |
| | |
| | | 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> |