{"ast":null,"code":"import \"core-js/modules/es.array.push.js\";\nimport { getUsersig } from '@/api/home';\nimport { getWidth, getHeight } from \"@/utils/utils\";\nimport roomFooter from './components/roomFooter.vue';\nimport TRTC from 'trtc-sdk-v5';\nlet trtc = null;\nexport default {\n  name: 'App',\n  components: {\n    roomFooter\n  },\n  data() {\n    return {\n      userClass: \"userVideo5\",\n      userList: [],\n      userHeight: '100%',\n      userSign: \"\",\n      roomId: \"\"\n    };\n  },\n  methods: {\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      // this.$router.go(-1)\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        setTimeout(() => {\n          trtc.startRemoteVideo({\n            userId,\n            streamType,\n            view: `${userId}`\n          });\n        });\n      });\n    },\n    deletePushVideo() {\n      trtc.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, event => {\n        const userId = event.userId;\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      });\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    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\n  created() {\n    trtc = TRTC.create();\n  }\n};","map":{"version":3,"names":["getUsersig","getWidth","getHeight","roomFooter","TRTC","trtc","name","components","data","userClass","userList","userHeight","userSign","roomId","methods","exitRoom","updateLocalVideo","publish","updateLocalAudio","destroy","$router","push","getPushVideo","on","EVENT","REMOTE_VIDEO_AVAILABLE","event","userId","streamType","setTimeout","startRemoteVideo","view","deletePushVideo","REMOTE_VIDEO_UNAVAILABLE","deleteIndex","indexOf","filter","item","splice","mounted","$route","query","sdkAppId","then","res","msg","created","create"],"sources":["src/views/room.vue"],"sourcesContent":["<template>\n    <div class=\"roompage\">\n        <div :class=\"userClass\" :style=\"{ height: userHeight }\" id=\"localStream\">\n            <div class=\"userName\">111</div>\n        </div>\n        <div :class=\"userClass\" :style=\"{ height: userHeight }\" v-for=\"(item, index) in userList\" :key=\"index\" :id=\"item\">\n        </div>\n        <div class=\"footer\">\n            <roomFooter @exitRoom=\"exitRoom\" :roomId=\"roomId\"></roomFooter>\n        </div>\n    </div>\n</template>\n  \n<script>\nimport { getUsersig } from '@/api/home';\nimport { getWidth, getHeight } from \"@/utils/utils\";\nimport roomFooter from './components/roomFooter.vue';\nimport TRTC from 'trtc-sdk-v5';\nlet trtc = null;\nexport default {\n    name: 'App',\n    components: {\n        roomFooter\n    },\n    data() {\n        return {\n            userClass: \"userVideo5\",\n            userList: [],\n            userHeight: '100%',\n            userSign: \"\",\n            roomId: \"\"\n        };\n    },\n    methods: {\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            // this.$router.go(-1)\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                setTimeout(() => {\n                    trtc.startRemoteVideo({ userId, streamType, view: `${userId}` })\n                })\n            })\n        },\n        deletePushVideo() {\n            trtc.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, event => {\n                const userId = event.userId;\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            })\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        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.userVideo,.userVideo1,.userVideo2,.userVideo3,.userVideo4,.userVideo5{\n    position: relative;\n}\n.userVideo5 {\n    width: 100%;\n    background-color: yellow;\n}\n\n.userVideo {\n    width: 48%;\n    background-color: yellow;\n}\n\n.userVideo1 {\n    width: 33%;\n    background-color: yellow;\n}\n\n.userVideo2 {\n    width: 33%;\n    background-color: yellow;\n}\n\n.userVideo3 {\n    width: 33%;\n    background-color: yellow;\n}\n\n.userVideo4 {\n    width: 100%;\n    background-color: yellow;\n}\n\n.footer {\n    width: 100%;\n    height: 10%;\n    background: rgb(46 43 43 / 90%);\n    position: absolute;\n    bottom: 0;\n}\n.userName{\n    height: 20px;\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    z-index: 99999;\n    color: #ffffff;\n}\n</style>\n  \n  \n  "],"mappings":";AAcA,SAAAA,UAAA;AACA,SAAAC,QAAA,EAAAC,SAAA;AACA,OAAAC,UAAA;AACA,OAAAC,IAAA;AACA,IAAAC,IAAA;AACA;EACAC,IAAA;EACAC,UAAA;IACAJ;EACA;EACAK,KAAA;IACA;MACAC,SAAA;MACAC,QAAA;MACAC,UAAA;MACAC,QAAA;MACAC,MAAA;IACA;EACA;EACAC,OAAA;IACA,MAAAC,SAAA;MACA,MAAAV,IAAA,CAAAU,QAAA;MACA,MAAAV,IAAA,CAAAW,gBAAA;QAAAC,OAAA;MAAA;MACA,MAAAZ,IAAA,CAAAa,gBAAA;QAAAD,OAAA;MAAA;MACA,MAAAZ,IAAA,CAAAc,OAAA;MACA,KAAAC,OAAA,CAAAC,IAAA;QACAf,IAAA;MACA;MACA;IACA;;IACAgB,aAAA;MACAjB,IAAA,CAAAkB,EAAA,CAAAnB,IAAA,CAAAoB,KAAA,CAAAC,sBAAA,EAAAC,KAAA;QACA,MAAAC,MAAA,GAAAD,KAAA,CAAAC,MAAA;QACA,MAAAC,UAAA,GAAAF,KAAA,CAAAE,UAAA;QACA,KAAAlB,QAAA,CAAAW,IAAA,CAAAM,MAAA;QACA,KAAAlB,SAAA,GAAAR,QAAA,MAAAS,QAAA;QACA,KAAAC,UAAA,GAAAT,SAAA,MAAAQ,QAAA;QACAmB,UAAA;UACAxB,IAAA,CAAAyB,gBAAA;YAAAH,MAAA;YAAAC,UAAA;YAAAG,IAAA,KAAAJ,MAAA;UAAA;QACA;MACA;IACA;IACAK,gBAAA;MACA3B,IAAA,CAAAkB,EAAA,CAAAnB,IAAA,CAAAoB,KAAA,CAAAS,wBAAA,EAAAP,KAAA;QACA,MAAAC,MAAA,GAAAD,KAAA,CAAAC,MAAA;QACA,IAAAO,WAAA,QAAAxB,QAAA,CAAAyB,OAAA,CAAAR,MAAA;QACA,KAAAjB,QAAA,QAAAA,QAAA,CAAA0B,MAAA,CAAAC,IAAA,IAAAA,IAAA,KAAAV,MAAA;QACA,IAAAO,WAAA;UACA,KAAAxB,QAAA,CAAA4B,MAAA,CAAAJ,WAAA;QACA;QACA,KAAAzB,SAAA,GAAAR,QAAA,MAAAS,QAAA;QACA,KAAAC,UAAA,GAAAT,SAAA,MAAAQ,QAAA;MACA;IACA;EACA;EACA,MAAA6B,QAAA;IACA,IAAA1B,MAAA,QAAA2B,MAAA,CAAAC,KAAA,CAAA5B,MAAA;IACA,KAAAA,MAAA,QAAA2B,MAAA,CAAAC,KAAA,CAAA5B,MAAA;IACA,IAAAc,MAAA,QAAAa,MAAA,CAAAC,KAAA,CAAAd,MAAA;IACA,MAAAe,QAAA;IACA;IACA,MAAA1C,UAAA,CAAA2B,MAAA,EAAAgB,IAAA,CAAAC,GAAA;MACA,KAAAhC,QAAA,GAAAgC,GAAA,CAAAC,GAAA;IACA;IACA,KAAAvB,YAAA;IACA,KAAAU,eAAA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;EACA;;EACAc,QAAA;IACAzC,IAAA,GAAAD,IAAA,CAAA2C,MAAA;EACA;AACA"},"metadata":{},"sourceType":"module","externalDependencies":[]}