townsquare/src/components/Screenshot.vue

85 lines
2.2 KiB
Vue
Raw Normal View History

2020-04-19 20:54:25 +00:00
<template>
<div id="screenshot">
<video ref="video" autoplay></video>
<canvas ref="canvas"></canvas>
</div>
</template>
<script>
export default {
data: function() {
return {
stream: null
};
},
methods: {
2020-05-02 19:11:20 +00:00
async capture({ x = 0, y = 0, width = 0, height = 0 }) {
2020-04-19 20:54:25 +00:00
const canvas = this.$refs.canvas;
const video = this.$refs.video;
2020-05-02 19:11:20 +00:00
const zoom = this.$store.state.grimoire.zoom;
2020-04-19 20:54:25 +00:00
// 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) {
2020-05-02 19:11:20 +00:00
this.$store.commit("updateScreenshot", false);
2020-04-19 20:54:25 +00:00
}
}
// get screenshot
if (this.stream && this.stream.active) {
video.srcObject = this.stream;
video.play();
setTimeout(() => {
const context = canvas.getContext("2d");
2020-04-25 17:25:32 +00:00
canvas.setAttribute("width", width * zoom || video.videoWidth);
canvas.setAttribute("height", height * zoom || video.videoHeight);
2020-04-19 20:54:25 +00:00
context.drawImage(
video,
2020-04-25 17:25:32 +00:00
x * zoom || 0,
y * zoom || 0,
width * zoom || video.videoWidth,
height * zoom || video.videoHeight,
2020-04-19 20:54:25 +00:00
0,
0,
2020-04-25 17:25:32 +00:00
width * zoom || video.videoWidth,
height * zoom || video.videoHeight
2020-04-19 20:54:25 +00:00
);
canvas.toBlob(blob => {
try {
// eslint-disable-next-line no-undef
const item = new ClipboardItem({ "image/png": blob });
navigator.clipboard.write([item]);
2020-05-02 19:11:20 +00:00
this.$store.commit("updateScreenshot", true);
2020-04-19 20:54:25 +00:00
} catch (err) {
2020-05-02 19:11:20 +00:00
this.$store.commit("updateScreenshot", false);
2020-04-19 20:54:25 +00:00
}
});
}, 100);
}
}
}
};
</script>
<style scoped>
video {
width: 100%;
height: 100%;
display: none;
}
canvas {
width: 100%;
height: 100%;
display: none;
}
</style>