稍后再做

TODO

@@ -0,0 +1,3 @@
+1. 视频分辨率切换问题
+2. 还是没声音
+3. 综合调试

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>