diff --git a/package.json b/package.json index a29e223..c6614db 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "exif-js": "^2.3.0", "font-awesome": "^4.7.0", "mint-ui": "^2.2.13", + "qnweb-rtc": "^4.3.1", "qrcodejs2": "^0.0.2", "regenerator-runtime": "^0.14.1", "simple-peer": "^9.11.1", diff --git a/src/components/Homes.vue b/src/components/Homes.vue index 0cfc05d..61b8d0a 100644 --- a/src/components/Homes.vue +++ b/src/components/Homes.vue @@ -11,6 +11,15 @@ --> +
+
+
{{ live.title }}
+
+
+

開始時間：{{ live.start_time }}

+
+
+
@@ -47,8 +56,8 @@

{{ item.name }}

{{ item.description }}

-
{{ item.page_view }}人
+
{{ + item.page_view }}人
进入课程
@@ -72,7 +81,9 @@ export default { return { company: {}, course: [], - step: 0 + step: 0, + haveLive: false, + liveData: [], } }, created() { @@ -80,6 +91,7 @@ export default { mounted() { this.getPageData(); + this.getLiveStreams(); }, methods: { goCourseDetail(id) { @@ -124,6 +136,22 @@ export default { }, err => { }) }, + getLiveStreams() { + this.getData("/Membervideo/getLiveStreams", { token: getStore("token") }).then( + (data) => { + if (data.code == 1) { + if (data.data.length > 0) { + this.haveLive = true; + this.liveData = data.data; + } + } + }, + (err) => {} + ); + }, + goLive(room) { + this.$router.push({ path: "/liveview?roomName=" + room }); + }, nextLead() { if (this.step == 9) { this.step = 0 @@ -295,4 +323,25 @@ export default { } } + +.cover { + left: 0; + top: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.live_box { + background-color: white; + width: 25rem; + box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); + margin: 3rem; + padding: 1rem; + border-radius: 10px; + cursor: pointer; + // display: flex; + // flex-direction: column; +} diff --git a/src/components/study/liveView.vue b/src/components/study/liveView.vue index 8f96fe9..ea59846 100644 --- a/src/components/study/liveView.vue +++ b/src/components/study/liveView.vue @@ -62,7 +62,7 @@ {{ loginInfo.member_realname }}_{{ loginInfo.member_passport }}
-
+
@@ -309,7 +309,7 @@ import { getStore } from "@/utils/storage"; import { mapState } from "vuex"; import { MessageBox } from "mint-ui"; import { v4 as uuidv4 } from "uuid"; -QNRTC.setLogLevel(QNLogLevel.NONE); +// QNRTC.setLogLevel(QNLogLevel.NONE); export default { components: { Back }, data() { @@ -467,25 +467,31 @@ export default { } videoTracks[index].play(this.liveContent); - const videos = document.querySelectorAll( - "video.qnrtc-video-player.qnrtc-stream-player" - ); - // 遍历这些元素并添加 controls 属性 - for (let i = 0; i < videos.length; i++) { - //关闭画中画 - videos[i].disablePictureInPicture = true; - // 打破视频宽高比，全部填充 - videos[i].style.objectFit = "contain"; - // 关闭右键菜单 - videos[i].addEventListener("contextmenu", function (e) { - e.preventDefault(); - }); - //添加水印 - setTimeout(() => { - this.isStop = false; - this.isVisible = true; - }, 10000); - } + // 使用 setTimeout 确保视频元素完全创建后再设置控件 + setTimeout(() => { + const videos = document.querySelectorAll( + "video.qnrtc-video-player.qnrtc-stream-player" + ); + // 遍历这些元素并添加 controls 属性 + for (let i = 0; i < videos.length; i++) { + videos[i].controls = true; + // 确保控件可见 + videos[i].style.pointerEvents = "auto"; + //关闭画中画 + videos[i].disablePictureInPicture = true; + // 打破视频宽高比，全部填充 + videos[i].style.objectFit = "contain"; + // 关闭右键菜单 + videos[i].addEventListener("contextmenu", function (e) { + e.preventDefault(); + }); + //添加水印 + setTimeout(() => { + this.isStop = false; + this.isVisible = true; + }, 10000); + } + }, 100); } else if (videoTracks[index].tag === "video") { const teacherCameraElement = this.$refs.teacherCamera; // 获取所有子元素中的