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

video / audio source change

Browse Source
screen-share
Mustafa Yontar 5 years ago
parent 3c87a375c3
commit 332040e2b9
4 changed files with 75 additions and 63 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. 51
      src/App.vue
  2. 43
      src/lib/RemoteFeed.vue
  3. 42
      src/lib/VueJanus.vue
  4. 2
      src/plugins/janus.js

51
src/App.vue
Unescape View File

@ -1,44 +1,8 @@
<template>
<v-app>
<v-app-bar
app
color="primary"
dark
>
<div class="d-flex align-center">
<v-img
alt="Vuetify Logo"
class="shrink mr-2"
contain
src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
transition="scale-transition"
width="40"
/>
<v-img
alt="Vuetify Name"
class="shrink mt-1 hidden-sm-and-down"
contain
min-width="100"
src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
width="100"
/>
</div>
<v-spacer></v-spacer>
<v-btn
href="https://github.com/vuetifyjs/vuetify/releases/latest"
target="_blank"
text
>
<span class="mr-2">Latest Release</span>
<v-icon>mdi-open-in-new</v-icon>
</v-btn>
</v-app-bar>
<v-content>
<VueJanus server="https://vid.w3ic.org/janus" :room="room" username="vuettest"/>
<v-text-field v-if="!start" v-model="username" label="please enter name"></v-text-field> <v-btn v-if="!start" @click="startM">Start</v-btn>
<VueJanus v-if="start" server="https://vid.w3ic.org/janus" :room="room" :username="username"/>
</v-content>
</v-app>
</template>
@ -55,9 +19,18 @@ export default {
data: () => ({
test: ' ',
room:1234
room:1234,
username: '',
start:false
}),
mounted () {
},
methods: {
startM () {
if (this.username) {
this.start = true
}
}
}
};
</script>

43
src/lib/RemoteFeed.vue
Unescape View File

@ -2,7 +2,15 @@
<div class="vid_main">
<video ref="feed_video" width="100%" height="100%" autoplay playsinline/>
<div class="info">{{ bitrate }}</div>
<div class="actions"></div>
<div class="infoSlow">Slow Connection</div>
<div class="actions">
<v-slider
v-model="volume"
:min="0"
:max="100"
light
></v-slider>
</div>
</div>
</template>
@ -13,15 +21,23 @@
janusInit: Object,
opaqueId: String,
room: Number,
mypvtid: String,
feedid: String
mypvtid: Number,
feedid: Number
},
name: "RemoteFeed",
data: () => ({
remoteFeed: null,
bitrateTimer: null,
bitrate: 0
muted: false,
bitrate: 0,
volume: 100
}),
watch: {
volume (old, newVal) {
console.log(parseFloat(newVal) * 0.01)
this.$refs.feed_video.volume = parseFloat(newVal) * 0.01
}
},
mounted () {
console.log(this.janusInit)
this.janusInit.attach({
@ -42,6 +58,10 @@
})
},
methods: {
mute () {
this.muted = !this.muted
this.$refs.feed_video.muted = this.muted
},
onSuccess (pluginHandle) {
this.remoteFeed = pluginHandle;
this.remoteFeed.simulcastStarted = false;
@ -59,6 +79,7 @@
this.$refs.feed_video.srcObject = stream
setInterval(() => {
console.log(this.remoteFeed.getBitrate())
this.bitrate = this.remoteFeed.getBitrate()
},1000)
},
@ -72,6 +93,11 @@
onMessage (msg, jsep) {
console.log(msg)
console.log(jsep)
if (msg["janus"]) {
console.log("######################")
console.log("nn",msg)
}
console.log("-------------------------")
var event = msg["videoroom"];
if(msg["error"] !== undefined && msg["error"] !== null) {
@ -112,10 +138,19 @@
position: absolute;
bottom:0;
left:0;
color:#fff;
width:100%;
}
.vid_main {
position: relative;
}
.infoSlow {
position: absolute;
right: 0;
bottom:0;
color:#fff;
display:none
}
.info {
position: absolute;
right: 0;

42
src/lib/VueJanus.vue
Unescape View File

@ -1,5 +1,6 @@
<template>
<v-container>
<v-btn @click="deviceSelectDialog = true">change</v-btn>
<v-dialog
v-model="deviceSelectDialog"
max-width="290"
@ -17,6 +18,7 @@
item-value="deviceId"
item-text="label"
></v-select>
<v-checkbox label="No Video" v-model="noVid"></v-checkbox>
</v-col>
<v-col md="12" cols="12">
<v-select
@ -51,7 +53,6 @@
</v-card-actions>
</v-card>
</v-dialog>
<v-btn @click="genRemoteFeed">Remote Feed</v-btn>
<v-row>
<v-col cols="12" md="3">
<video ref="ownstream" class="rounded centered" id="myvideo" width="100%" height="100%" autoplay
@ -65,8 +66,6 @@
</template>
<script>
import RemoteFeed from "@/lib/RemoteFeed";
export default {
components: {RemoteFeed},
@ -85,9 +84,11 @@
mypvtid: '',
selectedVideo: null,
selectedAudio: null,
started: false,
videoDevices: [],
audioDevices: [],
deviceSelectDialog: false,
noVid: false,
remoteStreams: []
}
},
@ -159,11 +160,8 @@
})
},
janusMessage: function (msg, jsep) {
// this.$janus.debug(" ::: Got a message (publisher) :::");
console.log(msg);
// this.$janus.debug(jsep);
var event = msg["videoroom"];
// this.$janus.debug("Event: " + event);
if (event !== undefined) {
if (event === "joined") {
this.myid = msg["id"];
@ -174,7 +172,6 @@
this.controlPublishers(msg)
}
} else if(event === "event") {
// Any new feed to attach to?
if (msg["publishers"] !== undefined && msg["publishers"] !== null) {
this.controlPublishers(msg)
@ -193,15 +190,11 @@
this.pluginHandle.handleRemoteJsep({jsep: jsep});
var audio = msg["audio_codec"];
if (this.mystream && this.mystream.getAudioTracks() && this.mystream.getAudioTracks().length > 0 && !audio) {
// Audio has been rejected
//toastr.warning("Our audio stream has been rejected, viewers won't hear us");
console.log("Our audio stream has been rejected, viewers won't hear us");
}
}
},
onlocalstream: function (stream) {
// this.$janus.debug(" ::: Got a local stream :::");
// this.$janus.debug(stream);
this.mystream = stream
console.log(this.$refs)
console.log(this.$refs["ownstream"])
@ -212,7 +205,7 @@
this.deviceSelectDialog = false
var media = {
audioRecv: false, videoRecv: false, audioSend: true, videoSend: true,
audioRecv: false, videoRecv: false, audioSend: true, videoSend: !this.noVid,
audio: {
deviceId: {
exact: this.selectedAudio
@ -244,14 +237,25 @@
mediaState: function (medium, on) {
this.$janus.log("Janus " + (on ? "started" : "stopped") + " receiving our " + medium);
},
changeDevice: function () {
this.$refs.ownstream.setSinkId(this.selectedVideo)
this.$refs.ownstream.setSinkId(this.selectedAudio)
},
selectDevice: function () {
console.log(this.selectedVideo)
console.log(this.selectedAudio)
// this.$refs.ownstream.setSinkId(this.selectedVideo)
// this.$refs.ownstream.setSinkId(this.selectedAudio)
var register = {"request": "join", "room": this.room, "ptype": "publisher", "display": this.username};
this.pluginHandle.send({"message": register});
if (!this.started) {
console.log(this.selectedVideo)
console.log(this.selectedAudio)
this.started = true
var register = {
"request": "join",
"room": this.room,
"ptype": "publisher",
"display": this.username
};
this.pluginHandle.send({"message": register});
} else {
this.restartDevices()
}
},
janusSuccess: function () {
this.opaqueId = "videoroomtest-" + this.$janus.randomString(12);

2
src/plugins/janus.js
Unescape View File

@ -9,7 +9,7 @@ const JanusPlugin = {
install(Vue, options) {
console.log('install call')
console.log(_janus)
_janus.init({debug: true, callback: function() {
_janus.init({debug: 'all', callback: function() {
Vue.prototype.$janus = _janus
}})
}