projectx/src/views/RoomView.vue

<template>
<div fill-height class="fill-height">
       <ObsVue server="ws://localhost:4444/"></ObsVue>

  <v-dialog
            v-model="dialog"
            max-width="290"
    >
        <v-card>
            <v-card-title class="headline">
                What's your name ?
            </v-card-title>
            <v-card-text>
                <v-text-field label="Name" v-model="name"></v-text-field>
            </v-card-text>
            <v-card-actions>
                <v-btn @click="dialog=false" text>Cancel</v-btn>
                <v-spacer></v-spacer>
                <v-btn @click="getRoom" color="primary" text>Enter Room</v-btn>
            </v-card-actions>
        </v-card>

    </v-dialog>
    <VueJanus @kick="kick" @rtp="rtp" :streamer="hasStreamer" v-if="rid" :creator="creator" :room="1234" server="ws://localhost:8188/ws" :username="name"></VueJanus>
</div>
</template>

<script>
    import VueJanus from "@/lib/VueJanus";
    // import ObsVue from "@/lib/ObsVue";
    export default {
        name: "RoomView",
        components: {VueJanus},
        // components: {ObsVue},
        data: () => ({
           rid:'',
           name:'',
            hasStreamer: false,
           dialog:false,
            creator:false
        }),
        created () {
            console.log(this.$route.params)
            this.name = this.$route.params.name
            this.streamer = this.$route.params.streamer
            this.hasStreamer = !!this.$route.params.streamer
        },
        mounted () {
            console.log(this.$route.params)
            this.name = this.$route.params.name
            this.streamer = this.$route.params.streamer
            this.hasStreamer = !!this.$route.params.streamer

            if (this.name)  this.getRoom()
                if (!this.name) this.dialog = true
        },
        methods: {
            kick (user) {
                this.$axios.get(`kick/${this.$route.params.id}/${user}`).then(response => {
                    console.log(response)
                })
            },
            rtp (user) {
                this.$axios.get(`rtp/${this.$route.params.id}/${user}`).then(response => {
                    console.log(response)
                })
            },
            getRoom () {
                this.dialog = false
                this.$axios.get(`room/${this.$route.params.id}`).then(response => {
                    this.rid = 1234
                    this.creator = response.data.can_modify
                })
            }
        }
    }
</script>

<style scoped>

</style>