mirror of https://github.com/bra1n/townsquare.git
85 lines
2.2 KiB
Vue
85 lines
2.2 KiB
Vue
<template>
|
|
<div id="screenshot">
|
|
<video ref="video" autoplay></video>
|
|
<canvas ref="canvas"></canvas>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data: function() {
|
|
return {
|
|
stream: null
|
|
};
|
|
},
|
|
methods: {
|
|
async capture({ x = 0, y = 0, width = 0, height = 0 }) {
|
|
const canvas = this.$refs.canvas;
|
|
const video = this.$refs.video;
|
|
const zoom = this.$store.state.grimoire.zoom;
|
|
// start capturing
|
|
if (!this.stream || !this.stream.active) {
|
|
alert(
|
|
"Please select to stream the current browser tab to get the appropriate screenshots"
|
|
);
|
|
try {
|
|
this.stream = await navigator.mediaDevices.getDisplayMedia({
|
|
video: {
|
|
// frameRate: 5,
|
|
cursor: "never"
|
|
},
|
|
audio: false
|
|
});
|
|
} catch (err) {
|
|
this.$store.commit("updateScreenshot", false);
|
|
}
|
|
}
|
|
// get screenshot
|
|
if (this.stream && this.stream.active) {
|
|
video.srcObject = this.stream;
|
|
video.play();
|
|
setTimeout(() => {
|
|
const context = canvas.getContext("2d");
|
|
canvas.setAttribute("width", width * zoom || video.videoWidth);
|
|
canvas.setAttribute("height", height * zoom || video.videoHeight);
|
|
context.drawImage(
|
|
video,
|
|
x * zoom || 0,
|
|
y * zoom || 0,
|
|
width * zoom || video.videoWidth,
|
|
height * zoom || video.videoHeight,
|
|
0,
|
|
0,
|
|
width * zoom || video.videoWidth,
|
|
height * zoom || video.videoHeight
|
|
);
|
|
canvas.toBlob(blob => {
|
|
try {
|
|
// eslint-disable-next-line no-undef
|
|
const item = new ClipboardItem({ "image/png": blob });
|
|
navigator.clipboard.write([item]);
|
|
this.$store.commit("updateScreenshot", true);
|
|
} catch (err) {
|
|
this.$store.commit("updateScreenshot", false);
|
|
}
|
|
});
|
|
}, 100);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
video {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: none;
|
|
}
|
|
canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: none;
|
|
}
|
|
</style>
|