Browse Source

video / audio source change

screen-share
Mustafa Yontar 2 years ago
parent
commit
332040e2b9
  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

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

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

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

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

Loading…
Cancel
Save