parent
c09e15ad51
commit
ecb63156fa
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,99 @@ |
||||
<template> |
||||
<div> |
||||
<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> |
||||
<span v-if="pdf && !loading">{{pdf.numPages}}</span> |
||||
<v-btn>Next</v-btn> |
||||
<video></video> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import pdfjsLib from 'pdfjs-dist/webpack'; |
||||
const toBase64 = file => new Promise((resolve, reject) => { |
||||
const reader = new FileReader(); |
||||
reader.readAsDataURL(file); |
||||
reader.onload = () => resolve(reader.result); |
||||
reader.onerror = error => reject(error); |
||||
}); |
||||
|
||||
export default { |
||||
name: "PdfShare", |
||||
props: { |
||||
janusInit: Object, |
||||
username: String, |
||||
myrivid: Number, |
||||
room: Number |
||||
}, |
||||
data: () => ({ |
||||
pdf:null, |
||||
pageNumber:0, |
||||
loading:true |
||||
}), |
||||
mounted () { |
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = "/pdf.worker.js" |
||||
}, |
||||
methods: { |
||||
renderPage(pageNumber) { |
||||
this.pdf.getPage(pageNumber).then(page => { |
||||
console.log('Page loaded'); |
||||
|
||||
var scale = 1.5; |
||||
var viewport = page.getViewport({scale: scale}); |
||||
|
||||
// Prepare canvas using PDF page dimensions |
||||
var canvas = document.getElementById('mypdfview'); |
||||
var context = canvas.getContext('2d'); |
||||
canvas.height = viewport.height; |
||||
canvas.width = viewport.width; |
||||
|
||||
// Render PDF page into canvas context |
||||
var renderContext = { |
||||
canvasContext: context, |
||||
viewport: viewport |
||||
}; |
||||
var renderTask = page.render(renderContext); |
||||
renderTask.promise.then(function () { |
||||
console.log('Page rendered'); |
||||
}); |
||||
}); |
||||
}, |
||||
async loadFile() { |
||||
|
||||
console.log(this.$refs.file.files) |
||||
var file = document.querySelector('#myfile').files[0] |
||||
var pdfdata = await toBase64(file) |
||||
console.log(pdfdata.split('data:application/pdf;base64,')[1]) |
||||
|
||||
var loadingTask = pdfjsLib.getDocument({data: atob(pdfdata.split('data:application/pdf;base64,')[1])}); |
||||
loadingTask.promise.then(pdf => { |
||||
console.log(pdf) |
||||
// var pageNumber = 1; |
||||
this.pdf = pdf |
||||
this.loading = false |
||||
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 |
||||
} |
||||
) |
||||
|
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue