From 24ae8d765755119047da7457fc506710f7f1b385 Mon Sep 17 00:00:00 2001
From: TonyChyi <tonychee1989@gmail.com>
Date: Tue, 27 Sep 2022 17:23:49 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A8=8D=E5=90=8E=E5=86=8D=E5=81=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO                             |  3 +++
 web/src/components/AceScreen.vue | 22 +++++++++++++++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 TODO

diff --git a/TODO b/TODO
new file mode 100644
index 0000000..752a6b9
--- /dev/null
+++ b/TODO
@@ -0,0 +1,3 @@
+1. 视频分辨率切换问题
+2. 还是没声音
+3. 综合调试
\ No newline at end of file
diff --git a/web/src/components/AceScreen.vue b/web/src/components/AceScreen.vue
index 815fe7b..446e64a 100644
--- a/web/src/components/AceScreen.vue
+++ b/web/src/components/AceScreen.vue
@@ -2,7 +2,7 @@
   <div>
     <canvas id="vnc" />
     <div id="data">
-      <video id="video" muted autoplay />
+      <video id="video" muted autoplay controls="none" />
       <audio id="audio" autoplay />
     </div>
   </div>
@@ -66,6 +66,7 @@ onMounted(() => {
   props.methods.resetVM = resetVM;
 
   const video = document.querySelector("canvas#vnc");
+  video.oncontextmenu = () => false;
 
   store.getICEServers().then((servers) => {
     const pc = new RTCPeerConnection({
@@ -99,6 +100,13 @@ onMounted(() => {
       el.controls = false;
       el.oncontextmenu = () => false;
       document.getElementById("data").appendChild(el);
+
+      if (el.track.kind === "video") {
+        const ctx = video.getContext("2d");
+        setTimeout(() => {
+          ctx.drawImage(this.video, 0, 0);
+        }, 0);
+      }
     };
 
     dataChannel.onopen = () => {
@@ -156,6 +164,7 @@ onMounted(() => {
 </script>
 
 <style scoped>
+/*
 video#video {
   vertical-align: middle;
   top: 50%;
@@ -165,4 +174,15 @@ video#video {
   max-height: 100%;
   max-width: 100%;
 }
+*/
+
+canvas#vnc {
+  vertical-align: middle;
+  top: 50%;
+  transform: translateY(-50%) translateX(-50%);
+  left: 50%;
+  position: absolute;
+  max-height: 100%;
+  max-width: 100%;
+}
 </style>
\ No newline at end of file