kick add

src/lib/RemoteFeed.vue

@@ -1,5 +1,6 @@
 <template>
     <v-card max-height="150" height="150" dark
+            :color="remoteStream.talking?'green':''"
             class="vid_main" @mouseleave="showaction = false"   @mouseover="showaction = true">
         <video ref="feed_video" class="vid_container" autoplay playsinline/>
         <div class="infor">{{ bitrate }}</div>

src/lib/VueJanus.vue

@@ -88,15 +88,19 @@
 
         <v-row>
             <v-col cols="12" md="2">
-                    <video ref="ownstream" class="rounded centered" id="myvideo" width="100%" height="100%" autoplay
+                    <div width="100%" height="100%" style="position: relative">
-                           playsinline muted="muted"/>
+                        <video ref="ownstream" class="rounded centered" id="myvideo" width="100%" height="100%" autoplay
+                               playsinline muted="muted"/>
+                        <v-btn icon v-if="ownmuted" @click="muteMe"><v-icon>mdi-volume-mute</v-icon></v-btn>
+                        <v-btn icon v-if="!ownmuted" @click="muteMe"><v-icon>mdi-volume-high</v-icon></v-btn>
+                    </div>
             </v-col>
             <v-col cols="12" md="2" style="display: none">
                 <video ref="ownstreamscreen" class="rounded centered" id="myvideo2" width="100%" height="100%" autoplay
                        playsinline muted="muted"/>
             </v-col>
             <v-col cols="12" md="2" v-for="remoteStream in remoteStreams" :key="remoteStream.id">
-                    <RemoteFeed :opaqueId="opaqueId" :mypvtid="mypvtid" :feedid="remoteStream.id" :remote-stream="remoteStream" :janusInit="janusInit" :room="room" ></RemoteFeed>
+                    <RemoteFeed @kick="kickUser" :creator="creator" :talking="remoteStream.talking" :opaqueId="opaqueId" :mypvtid="mypvtid" :feedid="remoteStream.id" :remote-stream="remoteStream" :janusInit="janusInit" :room="room" ></RemoteFeed>
             </v-col>
         </v-row>
         <v-speed-dial
@@ -195,7 +199,8 @@
         props: {
             server: String,
             room: Number,
-            username: String
+            username: String,
+            creator: Boolean
         },
         data() {
             return {
@@ -204,6 +209,7 @@
                 pluginHandle: null,
                 mystream: null,
                 myid: '',
+                ownmuted: false,
                 mypvtid: '',
                 selectedVideo: null,
                 selectedAudio: null,
@@ -239,11 +245,24 @@
 
         },
         methods: {
+            kickUser (user) {
+                this.$emit('kick',user)
+            },
+            muteMe () {
+              this.ownmuted = !this.ownmuted
+
+                if(!this.ownmuted) {
+
+                    this.pluginHandle.unmuteAudio()
+                } else {
+                    this.pluginHandle.muteAudio()
+                }
+            },
             stopSharePdf(){
                 this.sharePdf=false;
             },
             webrtcState (on) {
-                this.pluginHandle.send({"message": { "request": "configure", "bitrate": 512*1000 }});
+                this.pluginHandle.send({"message": { "request": "configure", "bitrate": 128*1000 }});
                 console.log(on, "webrt")
             },
             janusPluginSuccessScreen (pluginHandle) {
@@ -376,6 +395,7 @@
             controlPublishers(msg) {
                 msg["publishers"].forEach(item => {
                     var has = false
+                    item.talking = false
                     this.remoteStreams.forEach(rm => {
                         if (item.id === rm.id) has = true
                     })
@@ -388,7 +408,19 @@
             janusMessage (msg, jsep) {
                 console.log(msg);
                 var event = msg["videoroom"];
+
                 if (event !== undefined) {
+                    if (event === "talking") {
+                        this.remoteStreams.forEach(item => {
+                            if (item.id === msg['id']) item.talking = true
+                        })
+                    }
+                    if (event === "stopped-talking") {
+                        this.remoteStreams.forEach(item => {
+                            if (item.id === msg['id']) item.talking = false
+                        })
+                    }
+
                     if (event === "joined") {
                         this.myid = msg["id"];
                         this.mypvtid = msg["private_id"];

src/router/index.js

@@ -5,6 +5,10 @@ Vue.use(VueRouter)
 
   const routes = [
   {
+    path: '/login',
+    name: 'login',
+    component: () => import(/* webpackChunkName: "login" */ '../views/login.vue')
+  }, {
     path: '/',
     name: 'Home',
     component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue')

src/views/Home.vue

@@ -1,51 +1,19 @@
 <template>
-  <v-container>
+    <v-container>
-    <v-row>
+        <v-text-field v-model="room" label="Enter Room Name"></v-text-field> <v-btn @click="$router.push('/room/' + this.room)">Enter Room</v-btn><br />
-      <v-col cols="12" md="12" sm="12" v-if="error">
+        <v-btn x-small @click="$router.push('/login')" text>login with user</v-btn>
-        <v-alert type="error">{{error}}</v-alert>
+    </v-container>
-      </v-col>
-      <v-col cols="12" md="6" sm="12">
-        <v-text-field placeholder="Name/Nickname" v-model="name"></v-text-field>
-      </v-col>
-      <v-col cols="12" md="6" sm="12">
-        <v-text-field placeholder="Code" v-model="code"></v-text-field>
-      </v-col>
-      <v-col cols="12" md="12" sm="12">
-        <v-text-field v-if="passwd" v-model="password" placeholder="Password" type="password"></v-text-field>
-
-      </v-col>
-      <v-col cols="12" md="6" sm="12"><v-btn @click="passwd=!passwd" text>Password Login</v-btn></v-col>
-      <v-col cols="12" md="6" sm="12">
-        <v-btn @click="login">Login</v-btn>
-      </v-col>
-    </v-row>
-  </v-container>
 </template>
 
 <script>
-export default {
+    export default {
-  name: 'Home',
+        name: "Home",
-  data:() => ({
+        data: () => ({
-    passwd: false,
+            room: null
-    name:'',
+        })
-    code:'',
-    error:'',
-    password:''
-  }),
-  methods: {
-    login () {
-      this.$axios.post('login', {
-        username: this.code,
-        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
-      })
     }
-  }
-}
 </script>
+
+<style scoped>
+
+</style>

src/views/RoomView.vue

@@ -1,5 +1,26 @@
 <template>
-<VueJanus v-if="rid" :room="rid" server="https://vid.w3ic.org/janus" :username="$store.state.name"></VueJanus>
+<div fill-height class="fill-height">
+    <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" v-if="rid" :creator="creator" :room="rid" server="wss://vid.w3ic.org/ws/janus/" :username="name"></VueJanus>
+</div>
 </template>
 
 <script>
@@ -8,15 +29,25 @@
         name: "RoomView",
         components: {VueJanus},
         data: () => ({
-           rid:''
+           rid:'',
+           name:'',
+           dialog:false,
+            creator:false
         }),
         mounted () {
-            this.getRoom()
+            if (!name) this.dialog = true
         },
         methods: {
+            kick (user) {
+                this.$axios.get(`kick/${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 = response.data.rid
+                    this.creator = response.data.can_modify
                 })
             }
         }

src/views/login.vue

@@ -0,0 +1,51 @@
+<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>
+      <v-col cols="12" md="6" sm="12">
+        <v-text-field placeholder="Code" v-model="code"></v-text-field>
+      </v-col>
+      <v-col cols="12" md="12" sm="12">
+        <v-text-field v-if="passwd" v-model="password" placeholder="Password" type="password"></v-text-field>
+
+      </v-col>
+      <v-col cols="12" md="6" sm="12"><v-btn @click="passwd=!passwd" text>Password Login</v-btn></v-col>
+      <v-col cols="12" md="6" sm="12">
+        <v-btn @click="login">Login</v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: 'Home',
+  data:() => ({
+    passwd: false,
+    name:'',
+    code:'',
+    error:'',
+    password:''
+  }),
+  methods: {
+    login () {
+      this.$axios.post('login', {
+        username: this.code,
+        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
+      })
+    }
+  }
+}
+</script>