You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
2.9 KiB
83 lines
2.9 KiB
<template>
|
|
<v-container>
|
|
<v-dialog
|
|
v-model="createDialog"
|
|
max-width="290"
|
|
>
|
|
<v-card>
|
|
<v-card-title>
|
|
<v-row>
|
|
<v-col cols="12"><v-text-field v-model="roomCreate.room_name" placeholder="name"></v-text-field></v-col>
|
|
<v-col cols="12"><v-text-field v-model="roomCreate.publisher_count" placeholder="Room Publisher Count"></v-text-field></v-col>
|
|
<v-col cols="12"><v-select label="Video Codec" v-model="roomCreate.video_codec" :items="vcodecs"></v-select></v-col>
|
|
<v-col cols="12"><v-select label="Audio Codec" v-model="roomCreate.audio_codec" :items="acodecs"></v-select></v-col>
|
|
</v-row>
|
|
</v-card-title>
|
|
<v-card-actions>
|
|
<v-btn @click="createDialog=false">Cancel</v-btn>
|
|
<v-spacer></v-spacer>
|
|
<v-btn @click="saveRoom">Create</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
<v-btn v-if="canCreate" @click="createDialog=true">Create Room</v-btn>
|
|
<v-row>
|
|
<v-col v-for="room in rooms" :key="room.id" cols="12">
|
|
<v-btn @click="joinRoom(room.ridn)" text>{{ room.room_name }}</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Room",
|
|
data: () => ({
|
|
rooms: [],
|
|
canCreate: false,
|
|
createDialog: false,
|
|
vcodecs: ['VP8','VP9','h264'],
|
|
acodecs: ['OPUS'],
|
|
roomCreate: {
|
|
video_codec: 'VP9',
|
|
audio_codec: 'OPUS',
|
|
publisher_count: 16,
|
|
room_name: ''
|
|
}
|
|
}),
|
|
mounted () {
|
|
this.getRooms()
|
|
},
|
|
methods: {
|
|
saveRoom () {
|
|
this.$axios.post('create/room',this.roomCreate).then(response => {
|
|
this.roomCreate ={
|
|
video_codec: 'VP9',
|
|
audio_codec: 'OPUS',
|
|
publisher_count: 16,
|
|
room_name: ''
|
|
}
|
|
this.getRooms()
|
|
this.createDialog = false
|
|
console.log(response)
|
|
})
|
|
},
|
|
joinRoom (id) {
|
|
this.$router.push('/room/' + id)
|
|
},
|
|
getRooms() {
|
|
this.$axios.get('rooms').then(response => {
|
|
console.log(response)
|
|
this.rooms = response.data.rooms
|
|
this.canCreate = response.data.can_create
|
|
}).catch(() => {
|
|
this.$router.push('/')
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|
|
|