pdf casting is ready!

share-pdf
Mustafa Yontar 4 years ago
parent ecb63156fa
commit 487416746e
  1. 147
      src/lib/PdfShare.vue
  2. 2
      src/lib/RemoteFeed.vue
  3. 2
      src/lib/VueJanus.vue
  4. 1
      src/lib/janus.js

@ -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>
<video></video>
<v-btn @click="nextPage">Next</v-btn>
<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 () {
console.log('Page rendered');
renderTask.promise.then( () => {
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
}
)
})
}

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

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

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

Loading…
Cancel
Save