some changes

src/App.vue

@@ -1,6 +1,7 @@
 <template>
+  <v-app>
   <v-content>
     <router-view></router-view>
-  </v-content>
+  </v-content></v-app>
 </template>
 

src/lib/RemoteFeed.vue

@@ -87,6 +87,7 @@
 
                         this.$refs.feed_video.src = URL.createObjectURL(stream)
                     }
+                    this.$refs
                 } else {
                     console.log(this.$refs.feed_video)
                 }
@@ -96,6 +97,7 @@
                 this.bitrate = this.remoteFeed.getBitrate()
             },
             feedResponse (jsep) {
+                console.log(jsep)
                 var body = { "request": "start", "room": this.room }
                 this.remoteFeed.send({"message": body, "jsep": jsep})
             },
@@ -108,7 +110,6 @@
                 if (msg["janus"]) {
                     console.log("######################")
                     console.log("nn",msg)
-
                 }
                 console.log("-------------------------")
                 var event = msg["videoroom"];
@@ -117,7 +118,6 @@
                 } else if(event !== undefined && event != null) {
                     this.remoteFeed.rfid = msg["id"]
                     this.remoteFeed.rfdisplay = msg["display"]
-
                 } else if(event === "event") {
                     var substream = msg["substream"]
                     var temporal = msg["temporal"]

src/lib/VueJanus.vue

@@ -348,7 +348,6 @@
 
                 this.$janus.listDevices(this.initDevices);
 
-
             },
             initDevices (devices) {
                 console.log(devices)
@@ -370,8 +369,8 @@
             },
             offerSend (jsep) {
                 console.log('vid offer')
+                console.log(jsep)
                 var publish = {"request": "configure", "audio": true, "video": true};
-
                 this.pluginHandle.send({"message": publish, "jsep": jsep});
             },
             controlPublishers(msg) {

src/router/index.js

@@ -7,12 +7,17 @@ Vue.use(VueRouter)
   {
     path: '/',
     name: 'Home',
-    component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue')
+    component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue')
   },
     {
       path: '/rooms',
       name: 'Room',
-      component: () => import(/* webpackChunkName: "about" */ '../views/Room.vue')
+      component: () => import(/* webpackChunkName: "Room" */ '../views/Room.vue')
+    },
+    {
+      path: '/room/:id',
+      name: 'RoomView',
+      component: () => import(/* webpackChunkName: "RoomView" */ '../views/RoomView.vue')
     }
 ]
 

src/store/index.js

@@ -5,7 +5,8 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    token: null
+    token: null,
+    name: 'None'
   },
   mutations: {
   },

src/views/Home.vue

@@ -1,6 +1,9 @@
 <template>
   <v-container>
     <v-row>
+      <v-col cols="12" md="12" sm="12" v-if="error">
+        <v-alert type="error">{{error}}</v-alert>
+      </v-col>
       <v-col cols="12" md="6" sm="12">
         <v-text-field placeholder="Name/Nickname" v-model="name"></v-text-field>
       </v-col>
@@ -26,6 +29,7 @@ export default {
     passwd: false,
     name:'',
     code:'',
+    error:'',
     password:''
   }),
   methods: {
@@ -35,7 +39,11 @@ export default {
         password: this.password
       }).then(response => {
         this.$store.state.token = response.data.access_token
+        this.$axios.defaults.headers.common['Authorization'] = "Bearer " + response.data.access_token
+        this.$store.state.name = this.name
         this.$router.push('/rooms')
+      }).catch((resp) => {
+        this.error = resp.response.data.msg
       })
     }
   }

src/views/Room.vue

@@ -1,10 +1,80 @@
 <template>
-    <div>room</div>
+    <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"
+        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>
 

src/views/RoomView.vue

@@ -0,0 +1,28 @@
+<template>
+<VueJanus v-if="rid" :room="rid" server="https://vid.w3ic.org/janus" :username="$store.state.name"></VueJanus>
+</template>
+
+<script>
+    import VueJanus from "@/lib/VueJanus";
+    export default {
+        name: "RoomView",
+        components: {VueJanus},
+        data: () => ({
+           rid:''
+        }),
+        mounted () {
+            this.getRoom()
+        },
+        methods: {
+            getRoom () {
+                this.$axios.get(`room/${this.$route.params.id}`).then(response => {
+                    this.rid = response.data.rid
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>