procyberian
/
projectx
Archived
forked from Albatross/projectx
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

kick add

Browse Source
backend-api
Mustafa Yontar 5 years ago
parent 4bff32dabb
commit eb68c1e5c9
6 changed files with 140 additions and 53 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      src/lib/RemoteFeed.vue
  2. 42
      src/lib/VueJanus.vue
  3. 4
      src/router/index.js
  4. 58
      src/views/Home.vue
  5. 37
      src/views/RoomView.vue
  6. 51
      src/views/login.vue

1
src/lib/RemoteFeed.vue
Unescape View File

@ -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>

42
src/lib/VueJanus.vue
Unescape View File

@ -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
playsinline muted="muted"/>
<div width="100%" height="100%" style="position: relative">
<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"];

4
src/router/index.js
Unescape View File

@ -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')

58
src/views/Home.vue
Unescape View File

@ -1,51 +1,19 @@
<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>
<v-container>
<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-btn x-small @click="$router.push('/login')" text>login with user</v-btn>
</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
})
export default {
name: "Home",
data: () => ({
room: null
})
}
}
}
</script>
<style scoped>
</style>

37
src/views/RoomView.vue
Unescape View File

@ -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
})
}
}

51
src/views/login.vue
Unescape View File

@ -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>