| 1 |
- {"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';\nconst trtc = TRTC.create();\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\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 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 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 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};","map":{"version":3,"names":["getUsersig","getWidth","getHeight","roomFooter","TRTC","trtc","create","name","components","data","userClass","userList","userHeight","userSign","roomId","methods","exitRoom","updateLocalVideo","publish","updateLocalAudio","destroy","$router","push","mounted","$route","query","userId","sdkAppId","then","res","msg","on","EVENT","REMOTE_VIDEO_AVAILABLE","event","streamType","setTimeout","startRemoteVideo","view","REMOTE_VIDEO_UNAVAILABLE","deleteIndex","indexOf","filter","item","splice","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=\"roompage\">\n <div :class=\"userClass\" :style=\"{ height: userHeight }\" id=\"localStream\"></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';\nconst trtc = TRTC.create();\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 },\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 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 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 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 \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.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.footer{\n width: 100%;\n height: 10%;\n background: rgb(46 43 43 / 90%);\n position: absolute;\n bottom: 0;\n}\n</style>\n \n \n "],"mappings":";AAYA,SAAAA,UAAA;AACA,SAAAC,QAAA,EAAAC,SAAA;AACA,OAAAC,UAAA;AACA,OAAAC,IAAA;AACA,MAAAC,IAAA,GAAAD,IAAA,CAAAE,MAAA;AACA;EACAC,IAAA;EACAC,UAAA;IACAL;EACA;EACAM,KAAA;IACA;MACAC,SAAA;MACAC,QAAA;MACAC,UAAA;MACAC,QAAA;MACAC,MAAA;IACA;EACA;EACAC,OAAA;IACA,MAAAC,SAAA;MACA,MAAAX,IAAA,CAAAW,QAAA;MACA,MAAAX,IAAA,CAAAY,gBAAA;QAAAC,OAAA;MAAA;MACA,MAAAb,IAAA,CAAAc,gBAAA;QAAAD,OAAA;MAAA;MACA,MAAAb,IAAA,CAAAe,OAAA;MACA,KAAAC,OAAA,CAAAC,IAAA;QACAf,IAAA;MACA;MACA;IACA;EACA;;EACA,MAAAgB,QAAA;IACA,IAAAT,MAAA,QAAAU,MAAA,CAAAC,KAAA,CAAAX,MAAA;IACA,KAAAA,MAAA,QAAAU,MAAA,CAAAC,KAAA,CAAAX,MAAA;IACA,IAAAY,MAAA,QAAAF,MAAA,CAAAC,KAAA,CAAAC,MAAA;IACA,MAAAC,QAAA;IACA;IACA,MAAA3B,UAAA,CAAA0B,MAAA,EAAAE,IAAA,CAAAC,GAAA;MACA,KAAAhB,QAAA,GAAAgB,GAAA,CAAAC,GAAA;IACA;IACAzB,IAAA,CAAA0B,EAAA,CAAA3B,IAAA,CAAA4B,KAAA,CAAAC,sBAAA,EAAAC,KAAA;MACA,MAAAR,MAAA,GAAAQ,KAAA,CAAAR,MAAA;MACA,MAAAS,UAAA,GAAAD,KAAA,CAAAC,UAAA;MACA,KAAAxB,QAAA,CAAAW,IAAA,CAAAI,MAAA;MACA,KAAAhB,SAAA,GAAAT,QAAA,MAAAU,QAAA;MACA,KAAAC,UAAA,GAAAV,SAAA,MAAAS,QAAA;MACAyB,UAAA;QACA/B,IAAA,CAAAgC,gBAAA;UAAAX,MAAA;UAAAS,UAAA;UAAAG,IAAA,KAAAZ,MAAA;QAAA;MACA;IACA;IACArB,IAAA,CAAA0B,EAAA,CAAA3B,IAAA,CAAA4B,KAAA,CAAAO,wBAAA,EAAAL,KAAA;MACA,MAAAR,MAAA,GAAAQ,KAAA,CAAAR,MAAA;MACA,IAAAc,WAAA,QAAA7B,QAAA,CAAA8B,OAAA,CAAAf,MAAA;MACA,KAAAf,QAAA,QAAAA,QAAA,CAAA+B,MAAA,CAAAC,IAAA,IAAAA,IAAA,KAAAjB,MAAA;MACA,IAAAc,WAAA;QACA,KAAA7B,QAAA,CAAAiC,MAAA,CAAAJ,WAAA;MACA;MACA,KAAA9B,SAAA,GAAAT,QAAA,MAAAU,QAAA;MACA,KAAAC,UAAA,GAAAV,SAAA,MAAAS,QAAA;IACA;IACA;MACA,MAAAN,IAAA,CAAAwC,SAAA;QAAA/B,MAAA,EAAAgC,MAAA,CAAAhC,MAAA;QAAAiC,KAAA;QAAApB,QAAA;QAAAD,MAAA;QAAAsB,OAAA,OAAAnC;MAAA;MACA,MAAAR,IAAA,CAAA4C,eAAA;QACAX,IAAA,EAAAY,QAAA,CAAAC,cAAA;MACA;;MACA,MAAA9C,IAAA,CAAA+C,eAAA;MACAC,OAAA,CAAAC,GAAA;MACA,KAAAC,QAAA;QACAC,OAAA;QACAC,IAAA;MACA;IACA,SAAAC,KAAA;MACAL,OAAA,CAAAK,KAAA,WAAAA,KAAA;MACA,KAAAH,QAAA;QACAC,OAAA;QACAC,IAAA;MACA;MACA,KAAApC,OAAA,CAAAC,IAAA;QACAf,IAAA;MACA;IACA;EACA;EACAoD,QAAA,GAEA;AACA"},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
