backend-api
Mustafa Yontar 4 years ago
parent 4bff32dabb
commit eb68c1e5c9
  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,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>

@ -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"];

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

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

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

@ -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>
Loading…
Cancel
Save