video / audio source change

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>

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,
+          mypvtid: Number,
-          feedid: String
+          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;

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)
+                if (!this.started) {
-                console.log(this.selectedAudio)
+                    console.log(this.selectedVideo)
-                // this.$refs.ownstream.setSinkId(this.selectedVideo)
+                    console.log(this.selectedAudio)
-                // this.$refs.ownstream.setSinkId(this.selectedAudio)
+                    this.started = true
-
+                    var register = {
-                var register = {"request": "join", "room": this.room, "ptype": "publisher", "display": this.username};
+                        "request": "join",
-                this.pluginHandle.send({"message": register});
+                        "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);

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