98 lines
1.8 KiB
Vue
98 lines
1.8 KiB
Vue
<template>
|
|
<form @submit="onSubmit">
|
|
<input type="text" v-model="q" />
|
|
<button type="submit">Submit</button>
|
|
|
|
<video
|
|
controls
|
|
ref="video"
|
|
:src="videoSrc"
|
|
@loadeddata="onVideoLoad"
|
|
@seeked="onSeeked"
|
|
></video>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, useTemplateRef } from "vue";
|
|
|
|
const q = ref("");
|
|
const videoSrc = ref("");
|
|
const videoEl = useTemplateRef("video");
|
|
const wsRef = ref<WebSocket>();
|
|
|
|
function onSubmit(ev: SubmitEvent) {
|
|
ev.preventDefault();
|
|
if (!q.value) return;
|
|
|
|
videoSrc.value = "/" + q.value;
|
|
}
|
|
|
|
function onVideoLoad() {
|
|
const ws = new WebSocket("ws://localhost:8080");
|
|
wsRef.value = ws;
|
|
ws.onmessage = (ev) => {
|
|
console.log(ev.data)
|
|
const { name, t } = JSON.parse(ev.data);
|
|
switch (name) {
|
|
case "seek_q":
|
|
{
|
|
videoEl.value!.currentTime = t;
|
|
}
|
|
break;
|
|
}
|
|
};
|
|
|
|
ws.onopen = async () => {
|
|
ws.send(
|
|
JSON.stringify({
|
|
name: "download_q",
|
|
q: q.value.replace(/\.[a-z0-9]+$/, ""),
|
|
}),
|
|
);
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
wsRef.value = undefined;
|
|
};
|
|
}
|
|
|
|
function onSeeked() {
|
|
const ws = wsRef.value;
|
|
if (!ws) return;
|
|
|
|
const v = videoEl.value!;
|
|
let c = document.createElement("canvas");
|
|
c.height = v.videoHeight || parseInt(v.style.height);
|
|
c.width = v.videoWidth || parseInt(v.style.width);
|
|
const ctx = c.getContext("2d")!;
|
|
ctx.drawImage(v, 0, 0);
|
|
|
|
ws.send(
|
|
JSON.stringify({
|
|
name: "timed_q",
|
|
q: q.value.replace(/\.[a-z0-9]+$/, ""),
|
|
t: videoEl.value!.currentTime,
|
|
data: c.toDataURL("image/png"),
|
|
}),
|
|
);
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
form {
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
form * {
|
|
border: 1px solid gray;
|
|
}
|
|
|
|
button {
|
|
margin-left: 0.5em;
|
|
cursor: pointer;
|
|
padding: 0 0.5em;
|
|
border-radius: 5px;
|
|
}
|
|
</style>
|