diff --git a/package.json b/package.json
index abe5dd151..17f883055 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "web_hbb",
   "version": "1.0.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "cp node_modules/ogv/dist/* dist/ && vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
@@ -11,6 +11,8 @@
     "vite": "^2.7.2"
   },
   "dependencies": {
+    "libsodium": "^0.7.9",
+    "ogv": "^1.8.6",
     "ts-proto": "^1.101.0"
   }
 }
diff --git a/src/codec.js b/src/codec.js
new file mode 100644
index 000000000..384a5165e
--- /dev/null
+++ b/src/codec.js
@@ -0,0 +1,47 @@
+import { OGVLoader } from "ogv";
+
+// example: https://github.com/rgov/js-theora-decoder/blob/main/index.html
+// dev: copy decoder files from node/ogv/dist/* to project dir
+// dist: .... to dist
+
+export function loadVp9() {
+    OGVLoader.loadClass(
+        "OGVDecoderVideoVP9W",
+        (videoCodecClass) => {
+            videoCodecClass().then((decoder) => {
+                decoder.init(() => {
+                    onVp9Ready(decoder)
+                })
+            })
+        },
+        { worker: true }
+    );
+}
+
+export function loadOpus() {
+    OGVLoader.loadClass(
+        "OGVDecoderAudioOpusW",
+        (audioCodecClass) => {
+            audioCodecClass().then((decoder) => {
+                decoder.init(() => {
+                    onOpusReady(decoder)
+                })
+            })
+        },
+        { worker: true }
+    );
+}
+
+async function onVp9Ready(decoder) {
+    console.log("Vp9 decoder ready");
+
+    /*
+    decoder.processFrame(buffer, () => {
+        player.drawFrame(decoder.frameBuffer)
+    })
+    */
+}
+
+async function onOpusReady(decoder) {
+    console.log("Opus decoder ready");
+}
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index f77db7a8f..00470a0a5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,8 @@
-import './style.css'
+import './style.css';
+import { loadVp9, loadOpus } from "./codec";
+
+loadVp9();
+loadOpus();
 
 const app = document.querySelector<HTMLDivElement>('#app')!
 
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 11f02fe2a..151aa6856 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 8cdbb2ac9..ca949de6a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,11 @@
     "target": "ESNext",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": ["ESNext", "DOM"],
+    "allowJs": true,
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
     "moduleResolution": "Node",
     "strict": true,
     "sourceMap": true,
@@ -14,5 +18,7 @@
     "noUnusedParameters": true,
     "noImplicitReturns": true
   },
-  "include": ["./src"]
-}
+  "include": [
+    "./src"
+  ]
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 8672df468..f1a562057 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,13 @@
 # yarn lockfile v1
 
 
+"@babel/runtime@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa"
+  integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"
@@ -207,6 +214,11 @@ is-core-module@^2.8.0:
   dependencies:
     has "^1.0.3"
 
+libsodium@^0.7.9:
+  version "0.7.9"
+  resolved "https://registry.yarnpkg.com/libsodium/-/libsodium-0.7.9.tgz#4bb7bcbf662ddd920d8795c227ae25bbbfa3821b"
+  integrity sha512-gfeADtR4D/CM0oRUviKBViMGXZDgnFdMKMzHsvBdqLBHd9ySi6EtYnmuhHVDDYgYpAO8eU8hEY+F8vIUAPh08A==
+
 lodash@^4.17.15:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
@@ -227,6 +239,13 @@ object-hash@^1.3.1:
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df"
   integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==
 
+ogv@^1.8.6:
+  version "1.8.6"
+  resolved "https://registry.yarnpkg.com/ogv/-/ogv-1.8.6.tgz#0e6fa1c166802e3a405b1b318d8eb27d2544cce9"
+  integrity sha512-YuvO37U7Hc0mIm/TyAbyn3qVDKgg+4b+ViU73qEGzEKVX8bdxEVH08SoYrGLTJ2b8Z1/IEx8Vdy0hO4CWhRMOA==
+  dependencies:
+    "@babel/runtime" "^7.16.7"
+
 path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
@@ -270,6 +289,11 @@ protobufjs@^6.8.8:
     "@types/node" ">=13.7.0"
     long "^4.0.0"
 
+regenerator-runtime@^0.13.4:
+  version "0.13.9"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+
 resolve@^1.20.0:
   version "1.21.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.21.0.tgz#b51adc97f3472e6a5cf4444d34bc9d6b9037591f"