{"ast":null,"code":"import \"core-js/modules/es.array.push.js\";\nimport { getUsersig, reserveConferenceList } from '@/api/home';\nimport { getWidth, getHeight, getWidthPhone } from \"@/utils/utils\";\nimport roomFooter from './components/roomFooter.vue';\nimport roomFooterPhone from \"./components/footerPhone.vue\";\n\n// import TRTC from 'trtc-sdk-v5';\n// let trtc = null;\nexport default {\n  name: 'App',\n  components: {\n    roomFooter\n  },\n  data() {\n    return {\n      userClass: \"userVideo5\",\n      userClassPhone: \"userVideoPhone\",\n      userList: [1],\n      userHeight: '100%',\n      userPhoneHeight: '92%',\n      userSign: \"\",\n      roomId: \"\",\n      userId: null,\n      showFlag: false\n    };\n  },\n  methods: {\n    // 鼠标滑过显示操作栏\n    mouseHover() {\n      this.showFlag = true;\n      setTimeout(() => {\n        this.showFlag = false;\n      }, 4000);\n    },\n    async exitRoom() {\n      await trtc.exitRoom();\n      await trtc.updateLocalVideo({\n        publish: false\n      });\n      await trtc.updateLocalAudio({\n        publish: false\n      });\n      await trtc.destroy();\n      this.$router.push({\n        name: \"Home\"\n      });\n    },\n    // 获取拉流信息\n    getPushVideo() {\n      trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, event => {\n        const userId = event.userId;\n        const streamType = event.streamType;\n        this.userList.push(userId);\n        // this.userClass = getWidth(this.userList);\n        // this.userHeight = getHeight(this.userList);\n        this.userClassPhone = getWidthPhone(this.userList);\n        setTimeout(() => {\n          trtc.startRemoteVideo({\n            userId,\n            streamType,\n            view: `${userId}`\n          });\n        });\n      });\n    },\n    // 删除退出会议人员列表\n    deletePushVideo() {\n      trtc.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, event => {\n        const userId = event.userId;\n        if (this.hostId == userId) {\n          alert('主持人已经解散会议');\n          this.$router.push({\n            name: 'Home'\n          });\n          this.userList = [];\n          return;\n        }\n        let deleteIndex = this.userList.indexOf(userId);\n        this.userList = this.userList.filter(item => item !== userId);\n        if (deleteIndex !== -1) {\n          this.userList.splice(deleteIndex, 1);\n        }\n        // this.userClass = getWidth(this.userList);\n        // this.userHeight = getHeight(this.userList);\n        this.userClassPhone = getWidthPhone(this.userList);\n      });\n    },\n    // 根据caseId查询房间相关信息\n    reserveConferenceListFn(data) {\n      reserveConferenceList(data).then(res => {\n        this.hostId = res.data[0].userName;\n      });\n    }\n  },\n  async mounted() {\n    let roomId = this.$route.query.roomId;\n    this.roomId = this.$route.query.roomId;\n    let userId = this.$route.query.userId;\n    this.userId = this.$route.query.userId;\n    this.caseId = this.$route.query.caseId;\n    // 获取主持人的userId\n    this.reserveConferenceListFn(this.caseId);\n    const sdkAppId = 1600011167;\n    // 获取usersign\n    await getUsersig(userId).then(res => {\n      this.userSign = res.msg;\n    });\n    this.getPushVideo();\n    this.deletePushVideo();\n    try {\n      await trtc.enterRoom({\n        roomId: Number(roomId),\n        scene: 'rtc',\n        sdkAppId,\n        userId,\n        userSig: this.userSign\n      });\n      await trtc.startLocalVideo({\n        view: document.getElementById('localStream') // 在 DOM 中的 elementId 为 localStream 的标签上预览视频。\n      });\n\n      await trtc.startLocalAudio();\n      console.log('进房成功');\n      this.$message({\n        message: \"进房成功\",\n        type: 'success'\n      });\n    } catch (error) {\n      console.error('进房失败 ' + error);\n      this.$message({\n        message: \"进房失败\",\n        type: 'error'\n      });\n      this.$router.push({\n        name: 'Home'\n      });\n    }\n  },\n  created() {\n    // trtc = TRTC.create();\n  }\n};","map":{"version":3,"names":["getUsersig","reserveConferenceList","getWidth","getHeight","getWidthPhone","roomFooter","roomFooterPhone","name","components","data","userClass","userClassPhone","userList","userHeight","userPhoneHeight","userSign","roomId","userId","showFlag","methods","mouseHover","setTimeout","exitRoom","trtc","updateLocalVideo","publish","updateLocalAudio","destroy","$router","push","getPushVideo","on","TRTC","EVENT","REMOTE_VIDEO_AVAILABLE","event","streamType","startRemoteVideo","view","deletePushVideo","REMOTE_VIDEO_UNAVAILABLE","hostId","alert","deleteIndex","indexOf","filter","item","splice","reserveConferenceListFn","then","res","userName","mounted","$route","query","caseId","sdkAppId","msg","enterRoom","Number","scene","userSig","startLocalVideo","document","getElementById","startLocalAudio","console","log","$message","message","type","error","created"],"sources":["src/views/room.vue"],"sourcesContent":["<template>\n    <div class=\"page\">\n        <!-- <div class=\"roompage\" @mouseover=\"mouseHover\">\n            <div :class=\"userClass\" :style=\"{ height: userHeight }\" id=\"localStream\">\n                <div class=\"userName\">{{ userId }}</div>\n            </div>\n            <div :class=\"userClass\" :style=\"{ height: userHeight }\" v-for=\"(item, index) in userList\" :key=\"index\"\n                :id=\"item\">\n                <div class=\"userName\">{{ item }}</div>\n            </div>\n            <div class=\"footer\" v-show=\"showFlag\">\n                <roomFooter @exitRoom=\"exitRoom\" :roomId=\"roomId\"></roomFooter>\n            </div>\n        </div> -->\n        <div class=\"roomPhone\">\n            <div class=\"header\">\n                <roomFooterPhone></roomFooterPhone>\n            </div>\n            <div class=\"bodyVideo\">\n                <div :class=\"userClassPhone\" id=\"localStream\">\n                    <div class=\"userNamePhone\">{{ userId }}</div>\n                </div>\n                <div :class=\"userClassPhone\" v-for=\"(item, index) in userList\" :key=\"index\" :id=\"item\">\n                    <div class=\"userNamePhone\">{{ item }}</div>\n                </div>\n            </div>\n            <!-- <div class=\"footer\" v-show=\"showFlag\">\n                <roomFooter @exitRoom=\"exitRoom\" :roomId=\"roomId\"></roomFooter>\n            </div> -->\n        </div>\n    </div>\n</template>\n  \n<script>\nimport { getUsersig, reserveConferenceList } from '@/api/home';\nimport { getWidth, getHeight, getWidthPhone } from \"@/utils/utils\";\nimport roomFooter from './components/roomFooter.vue';\nimport roomFooterPhone from \"./components/footerPhone.vue\";\n\n// import TRTC from 'trtc-sdk-v5';\n// let trtc = null;\nexport default {\n    name: 'App',\n    components: {\n        roomFooter\n    },\n    data() {\n        return {\n            userClass: \"userVideo5\",\n            userClassPhone: \"userVideoPhone\",\n            userList: [1],\n            userHeight: '100%',\n            userPhoneHeight: '92%',\n            userSign: \"\",\n            roomId: \"\",\n            userId: null,\n            showFlag: false,\n        };\n    },\n    methods: {\n        // 鼠标滑过显示操作栏\n        mouseHover() {\n            this.showFlag = true;\n            setTimeout(() => {\n                this.showFlag = false;\n            }, 4000)\n        },\n        async exitRoom() {\n            await trtc.exitRoom();\n            await trtc.updateLocalVideo({ publish: false });\n            await trtc.updateLocalAudio({ publish: false });\n            await trtc.destroy();\n            this.$router.push({\n                name: \"Home\"\n            })\n        },\n        // 获取拉流信息\n        getPushVideo() {\n            trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, event => {\n                const userId = event.userId;\n                const streamType = event.streamType;\n                this.userList.push(userId);\n                // this.userClass = getWidth(this.userList);\n                // this.userHeight = getHeight(this.userList);\n        this.userClassPhone = getWidthPhone(this.userList);\n\n                setTimeout(() => {\n                    trtc.startRemoteVideo({ userId, streamType, view: `${userId}` })\n                })\n            })\n        },\n        // 删除退出会议人员列表\n        deletePushVideo() {\n            trtc.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, event => {\n                const userId = event.userId;\n                if (this.hostId == userId) {\n                    alert('主持人已经解散会议')\n                    this.$router.push({\n                        name: 'Home'\n                    })\n                    this.userList = [];\n                    return\n                }\n                let deleteIndex = this.userList.indexOf(userId);\n                this.userList = this.userList.filter(item => item !== userId);\n                if (deleteIndex !== -1) {\n                    this.userList.splice(deleteIndex, 1)\n                }\n                // this.userClass = getWidth(this.userList);\n                // this.userHeight = getHeight(this.userList);\n        this.userClassPhone = getWidthPhone(this.userList);\n\n            })\n        },\n        // 根据caseId查询房间相关信息\n        reserveConferenceListFn(data) {\n            reserveConferenceList(data).then(res => {\n                this.hostId = res.data[0].userName;\n            })\n        }\n    },\n    async mounted() {\n        let roomId = this.$route.query.roomId;\n        this.roomId = this.$route.query.roomId;\n        let userId = this.$route.query.userId;\n        this.userId = this.$route.query.userId;\n        this.caseId = this.$route.query.caseId;\n        // 获取主持人的userId\n        this.reserveConferenceListFn(this.caseId)\n        const sdkAppId = 1600011167;\n        // 获取usersign\n        await getUsersig(userId).then(res => {\n            this.userSign = res.msg;\n        })\n        this.getPushVideo();\n        this.deletePushVideo();\n        try {\n            await trtc.enterRoom({ roomId: Number(roomId), scene: 'rtc', sdkAppId, userId, userSig: this.userSign });\n            await trtc.startLocalVideo({\n                view: document.getElementById('localStream'), // 在 DOM 中的 elementId 为 localStream 的标签上预览视频。\n            });\n            await trtc.startLocalAudio();\n            console.log('进房成功');\n            this.$message({\n                message: \"进房成功\",\n                type: 'success'\n            })\n        } catch (error) {\n            console.error('进房失败 ' + error);\n            this.$message({\n                message: \"进房失败\",\n                type: 'error'\n            });\n            this.$router.push({\n                name: 'Home'\n            })\n        }\n    },\n    created() {\n        // trtc = TRTC.create();\n    },\n};\n</script>\n  \n<style scoped>\n.roompage {\n    width: 100%;\n    height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: space-around;\n    flex-wrap: wrap;\n    position: relative;\n}\n\n.userVideo,\n.userVideo1,\n.userVideo2,\n.userVideo3,\n.userVideo4,\n.userVideo5 {\n    position: relative;\n}\n\n.userVideo5 {\n    width: 100%;\n}\n\n.userVideo {\n    width: 48%;\n}\n\n.userVideo1 {\n    width: 33%;\n}\n\n.userVideo2 {\n    width: 33%;\n}\n\n.userVideo3 {\n    width: 33%;\n}\n\n.userVideo4 {\n    width: 100%;\n}\n\n.footer {\n    width: 100%;\n    height: 10%;\n    background: rgb(46 43 43 / 90%);\n    position: absolute;\n    bottom: 0;\n    z-index: 10;\n}\n\n.userName {\n    border-radius: 10px;\n    width: 90px;\n    height: 40px;\n    text-align: center;\n    line-height: 40px;\n    background-color: black;\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    z-index: 9;\n    color: #ffffff;\n}\n.userNamePhone{\n    border-radius: 10px;\n    min-width: 20%;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n    background-color: black;\n    font-size: 12px;\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    z-index: 9;\n    color: #ffffff;\n}\n.header {\n    width: 100%;\n    height: 8%;\n    background-color: #716c6c;\n    display: flex;\n    flex-direction: row-reverse;\n    align-items: center;\n}\n\n.roomPhone {\n    width: 100%;\n    height: 100vh;\n}\n\n.bodyVideo {\n    width: 100%;\n    height: 92%;\n    display: flex;\n    flex-wrap: wrap;\n    /* justify-content: space-between; */\n}\n\n.userVideoPhone {\n    width: 100%;\n    height: 100%;\n    background-color: yellow;\n    position: relative;\n}\n\n.userVideoPhone1 {\n    width: 50%;\n    flex-basis: calc(33.333% - 3px);\n    max-width: calc(33.333% - 3px);\n    height: 0;\n    padding-bottom: calc(33.333% - 3px);\n    background-color: red;\n    margin-bottom: 3px;\n    position: relative;\n}\n</style>\n  \n  \n  "],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}