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