From e291e4d1c935a273ea972b898b4a38702cf7539f Mon Sep 17 00:00:00 2001
From: rustdesk <info@rustdesk.com>
Date: Fri, 21 Jan 2022 00:41:02 +0800
Subject: [PATCH] video works

---
 src/codec.js      |  4 ++--
 src/connection.ts |  9 +++++----
 src/ui.js         | 12 ++++++++++--
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/codec.js b/src/codec.js
index 213f2e8fc..da4f0cbdb 100644
--- a/src/codec.js
+++ b/src/codec.js
@@ -24,7 +24,7 @@ export function loadVp9(callback) {
     "OGVDecoderVideoVP9W",
     (videoCodecClass) => {
       window.videoCodecClass = videoCodecClass;
-      videoCodecClass().then((decoder) => {
+      videoCodecClass({ videoFormat: {} }).then((decoder) => {
         decoder.init(() => {
           callback(decoder);
         })
@@ -38,7 +38,7 @@ export function loadOpus(callback) {
   window.OGVLoader.loadClass(
     "OGVDecoderAudioOpusW",
     (audioCodecClass) => {
-      audioCodecClass().then((decoder) => {
+      audioCodecClass({ audioFormat: {} }).then((decoder) => {
         decoder.init(() => {
           callback(decoder);
         })
diff --git a/src/connection.ts b/src/connection.ts
index a67fbd71a..85f919d40 100644
--- a/src/connection.ts
+++ b/src/connection.ts
@@ -226,6 +226,8 @@ export default class Connection {
   close() {
     clearInterval(this._interval);
     this._ws?.close();
+    this._videoDecoder?.close();
+    this._audioDecoder?.close();
   }
 
   setMsgbox(callback: MsgboxCallback) {
@@ -266,11 +268,10 @@ export default class Connection {
     }
     if (vf.vp9s) {
       let dec = this._videoDecoder;
+      // dec.sync();
       vf.vp9s.frames.forEach((f) => {
-        dec.processFrame(f.data.buffer, (ok: any) => {
-          console.log(ok);
-          if (dec.frameBuffer) {
-            console.log(dec.frameBuffer);
+        dec.processFrame(f.data.slice(0).buffer, (ok: any) => {
+          if (ok && dec.frameBuffer) {
             this.draw(dec.frameBuffer);
           }
         });
diff --git a/src/ui.js b/src/ui.js
index de602904b..c5c55bf5c 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -21,7 +21,10 @@ if (app) {
     <div id="text" style="line-height: 2em"></div>
     <button id="cancel" onclick="cancel();">Cancel</button>
   </div>
-  <canvas id="player"></canvas>
+  <div id="canvas" style="display: none;">
+    <button id="cancel" onclick="cancel();">Cancel</button>
+    <canvas id="player"></canvas>
+  </div>
 `;
 
   let player;
@@ -33,7 +36,7 @@ if (app) {
     id.value = localStorage.getItem('id');
     const key = document.querySelector('#key');
     key.value = localStorage.getItem('key');
-    player = YUVCanvas.attach(document.getElementById("player"))
+    player = YUVCanvas.attach(document.getElementById('player'))
   };
 
   window.connect = () => {
@@ -67,11 +70,15 @@ if (app) {
       document.querySelector('div#status').style.display = 'none';
       document.querySelector('div#password').style.display = 'block';
     } else if (!type) {
+      document.querySelector('div#canvas').style.display = 'block';
+      document.querySelector('div#password').style.display = 'none';
       document.querySelector('div#status').style.display = 'none';
     } else if (type == 'error') {
       document.querySelector('div#status').style.display = 'block';
+      document.querySelector('div#canvas').style.display = 'none';
       document.querySelector('div#text').innerHTML = '<div style="color: red; font-weight: bold;">' + text + '</div>';
     } else {
+      document.querySelector('div#password').style.display = 'none';
       document.querySelector('div#status').style.display = 'block';
       document.querySelector('div#text').innerHTML = '<div style="font-weight: bold;">' + text + '</div>';
     }
@@ -82,6 +89,7 @@ if (app) {
     document.querySelector('div#connect').style.display = 'block';
     document.querySelector('div#password').style.display = 'none';
     document.querySelector('div#status').style.display = 'none';
+    document.querySelector('div#canvas').style.display = 'none';
   }
 
   window.confirm = () => {