src/lib/PdfShare.vue

@@ -15,6 +15,11 @@
         <v-btn v-if="pdf && !loading" :disabled="pageNumber ==1" @click="prevPage" icon><v-icon>mdi-chevron-left</v-icon></v-btn>
         <span v-if="pdf && !loading">{{pageNumber}} / {{pdf.numPages}}</span>
         <v-btn v-if="pdf && !loading" :disabled="pdf.numPages == pageNumber" @click="nextPage" icon><v-icon>mdi-chevron-right</v-icon></v-btn>
+        <v-row>
+            <v-col cols="12" md="12">
+                <v-btn v-if="pdf && !loading" @click="stop">stop pdf share</v-btn>
+            </v-col>
+        </v-row>
     </div>
 </template>
 
@@ -31,6 +36,7 @@ export default {
     name: "PdfShare",
     props: {
       janusInit: Object,
+      onstop: Function,
       username: String,
       myrivid: Number,
       room: Number,
@@ -95,6 +101,21 @@ export default {
             pluginHandle.send({"message": register});
 
         },
+        stop(){
+            var unpublish = { "request": "unpublish"};
+            this.pluginHandle.send({"message": unpublish});
+
+            this.pluginHandle.detach();
+
+            // reset
+            this.pluginHandle = null;
+            this.pdf = null;
+            this.pageNumber = 1;
+            this.loading = true;
+
+            // callback
+            this.onstop();
+        },
         janusPluginError (error) {
             console.log('error', error)
         },

src/lib/VueJanus.vue

@@ -6,11 +6,11 @@
         <v-btn @click="screenShareStop" v-if="screenShareStarted">stop screen share</v-btn>
 
         <v-btn @click="sharePdf=true">share a pdf</v-btn>
-        <PdfShare v-if="sharePdf" :username="username"  :opaque-id="opaqueId" :room="room" :janus-init="janusInit" ></PdfShare>
+        <PdfShare v-if="sharePdf" :username="username" :onstop="stopSharePdf" :opaque-id="opaqueId" :room="room" :janus-init="janusInit" ></PdfShare>
 
         <v-dialog
                 v-model="mozillaAlert"
-                max-width="290"
+                max-width="410"
         >
             <v-card>
                 <v-card-title class="headline">Share whole screen or a window?</v-card-title>
@@ -19,13 +19,16 @@
                     Firefox handles screensharing in a different way: are you going to share the whole screen, or would you rather pick a single window/application to share instead?
                 </v-card-text>
                 <v-card-actions>
+                    <v-spacer></v-spacer>
                     <v-btn @click="shareScreenStart('screen')">Share a screen</v-btn>
+                    <v-spacer></v-spacer>
                     <v-btn @click="shareScreenStart('window')">Share a window</v-btn>
+                    <v-spacer></v-spacer>
                 </v-card-actions>
             </v-card>
         </v-dialog><v-dialog
                 v-model="chromeAlert"
-                max-width="290"
+                max-width="410"
         >
             <v-card>
                 <v-card-title class="headline">Chrome Extension Error</v-card-title>
@@ -155,6 +158,9 @@
 
         },
         methods: {
+            stopSharePdf(){
+                this.sharePdf=false;
+            },
             webrtcState (on) {
                 this.pluginHandle.send({"message": { "request": "configure", "bitrate": 512*1000 }});
                 console.log(on, "webrt")
@@ -191,6 +197,8 @@
                 }
             },
             onlocalstreamScreen (stream) {
+                if(!this.screenShareStarted)
+                    this.screenShareStarted=true;
                 this.$refs.ownstreamscreen.srcObject = stream
             },
             shareScreenStart (capture) {
@@ -208,7 +216,6 @@
                         onlocalstream: this.onlocalstreamScreen
                     }
                 )
-                this.screenShareStarted=true;
             },
             screenShareStop(){
                 var srcObject=this.$refs.ownstreamscreen.srcObject;