pdf casting is ready!

src/lib/PdfShare.vue

@@ -3,10 +3,11 @@
         <v-file-input ref="file" id="myfile" accept="pdf" label="Please select a file"></v-file-input>
         <v-btn @click="loadFile">load file</v-btn>
         <canvas id="mypdfview"></canvas>
-        <v-btn>Pref</v-btn>
+        <v-btn @click="prevPage">Prev</v-btn>
         <span v-if="pdf && !loading">{{pdf.numPages}}</span>
-        <v-btn>Next</v-btn>
+        <v-btn @click="nextPage">Next</v-btn>
-        <video></video>
+        <video class="rounded centered" id="pdfvid" width="100%" height="100%" autoplay
+               playsinline muted="muted"/>
     </div>
 </template>
 
@@ -25,12 +26,14 @@ export default {
       janusInit: Object,
       username: String,
       myrivid: Number,
-      room: Number
+      room: Number,
+      opaqueId:String
     },
     data: () => ({
         pdf:null,
         pageNumber:0,
-        loading:true
+        loading:true,
+        pluginHandle: null
         }),
     mounted () {
         pdfjsLib.GlobalWorkerOptions.workerSrc = "/pdf.worker.js"
@@ -40,7 +43,7 @@ export default {
             this.pdf.getPage(pageNumber).then(page => {
                 console.log('Page loaded');
 
-                var scale = 1.5;
+                var scale = 1.0;
                 var viewport = page.getViewport({scale: scale});
 
                 // Prepare canvas using PDF page dimensions
@@ -54,12 +57,123 @@ export default {
                     canvasContext: context,
                     viewport: viewport
                 };
+
                 var renderTask = page.render(renderContext);
-                renderTask.promise.then(function () {
+                renderTask.promise.then( () => {
-                    console.log('Page rendered');
+                    if (this.loading) {
+                        this.loading = false
+                        document.getElementById('pdfvid').srcObject = document.getElementById('mypdfview').captureStream(60)
+
+                        this.janusInit.attach(
+                            {
+                                plugin: "janus.plugin.videoroom",
+                                opaqueId: this.opaqueId,
+                                success: this.janusPluginSuccess,
+                                consentDialog: this.consentDialog,
+                                error: this.janusPluginError,
+                                mediaState: this.mediaState,
+                                webrtcState: this.webrtcState,
+                                onmessage: this.janusMessage,
+                                onlocalstream: this.onlocalstream
+                            }
+                        )
+                    }
                 });
             });
         },
+        janusPluginSuccess (pluginHandle) {
+            this.pluginHandle = pluginHandle
+
+            var register = { "request": "join", "room": this.room, "ptype": "publisher", "display": this.username + '- PDF' };
+            pluginHandle.send({"message": register});
+
+        },
+        janusPluginError (error) {
+            console.log('error', error)
+        },
+        consentDialog () {
+
+        },
+        mediaState (medium, on) {
+            console.log("Janus " + (on ? "started" : "stopped") + " receiving our " + medium);
+        },
+        webrtcState (on) {
+            this.pluginHandle.send({"message": { "request": "configure", "bitrate": 1024*1000 }});
+            console.log(on, "webrt")
+        },
+        janusMessage (msg, jsep) {
+            console.log(msg)
+            console.log(jsep)
+            var event = msg["videoroom"];
+            if(event != undefined && event != null) {
+                if (event === "joined") {
+                    this.createStream()
+                }
+            }
+
+            if(jsep !== undefined && jsep !== null) {
+                this.pluginHandle.handleRemoteJsep({jsep: jsep});
+            }
+        },
+        createStreamSuccess(jsep) {
+            console.log('createStreamSuccess')
+            var publish = { "request": "configure", "audio": false, "video": true };
+            this.pluginHandle.send({"message": publish, "jsep": jsep});
+
+        },
+        createStream() {
+            console.log('createStream')
+
+            this.pluginHandle.createOffer({
+                media: { audioRecv: false, videoRecv: false, audioSend: false, videoSend: true },	// Publishers are sendonly
+                stream: document.getElementById('mypdfview').captureStream(),
+                success: this.createStreamSuccess,
+                error: error => {
+                    console.log(error)
+                    alert(error)
+                }
+            })
+        },
+        pdfTimer () {
+            // this.renderPage(this.pageNumber)
+            var canvas = document.getElementById('mypdfview');
+            var context = canvas.getContext('2d');
+            var text = '.';
+
+//Set the font size and the fontface to use.
+            context.font = '25px Arial';
+
+//Set the color of the text. This can be
+//an RGB color or a textual description
+//such as red.
+            context.fillStyle = '0,0,0';
+
+//The X coordinate where to start
+            var x = 0;
+
+//The Y coordinate where to start
+            var y = 0;
+
+//Use the fillText method to draw the text.
+            context.fillText(text, x, y);
+        },
+        nextPage () {
+          this.pageNumber++
+            this.renderPage(this.pageNumber)
+
+        },
+        prevPage () {
+          this.pageNumber--
+            this.renderPage(this.pageNumber)
+
+        },
+        onlocalstream (stream) {
+            // Janus.attachMediaStream($('#myvideo').get(0), stream);
+            console.log('pdf --------- onlocalstream')
+
+            console.log(stream)
+        },
+
         async loadFile() {
 
             console.log(this.$refs.file.files)
@@ -72,21 +186,10 @@ export default {
                 console.log(pdf)
                 // var pageNumber = 1;
                 this.pdf = pdf
-                this.loading = false
+                this.loading = true
+                setInterval(this.pdfTimer, 1000/60)
                 this.renderPage(1)
-                this.janusInit.attach(
+
-                    {
-                        plugin: "janus.plugin.videoroom",
-                        opaqueId: this.opaqueId,
-                        success: this.janusPluginSuccessScreen,
-                        consentDialog: this.consentDialog,
-                        error: this.janusPluginError,
-                        mediaState: this.mediaState,
-                        webrtcState: this.webrtcState,
-                        onmessage: this.janusMessageScreen,
-                        onlocalstream: this.onlocalstreamScreen
-                    }
-                )
 
             })
         }

src/lib/RemoteFeed.vue

@@ -64,7 +64,7 @@
             },
             onSuccess (pluginHandle) {
                 this.remoteFeed = pluginHandle;
-                alert(pluginHandle.id)
+
                 this.remoteFeed.simulcastStarted = false;
                 console.log('Remote feed success')
                 var subscribe = { "request": "join", "room": this.room, "ptype": "subscriber", "feed": this.feedid, "private_id": this.mypvtid };

src/lib/VueJanus.vue

@@ -2,7 +2,7 @@
     <v-container>
         <v-btn @click="deviceSelectDialog = true">change</v-btn>
         <v-btn @click="screenShare">share a screen</v-btn>
-        <PdfShare :username="username" :room="room" :janus-init="janusInit" ></PdfShare>
+        <PdfShare :username="username"  :opaque-id="opaqueId" :room="room" :janus-init="janusInit" ></PdfShare>
 
         <v-dialog
                 v-model="mozillaAlert"

src/lib/janus.js

@@ -2080,6 +2080,7 @@ function Janus(gatewayCallbacks) {
 		if(callbacks.stream) {
 			var stream = callbacks.stream;
 			Janus.log("MediaStream provided by the application");
+			Janus.log("############################################################");
 			Janus.debug(stream);
 			// If this is an update, let's check if we need to release the previous stream
 			if(media.update) {