diff options
| author | metamuffin <metamuffin@disroot.org> | 2023-03-09 22:32:23 +0100 |
|---|---|---|
| committer | metamuffin <metamuffin@disroot.org> | 2023-03-09 22:32:23 +0100 |
| commit | c45f80a14ecd00914eb1d4e8f628b74a713667ba (patch) | |
| tree | 406ddf17582a074bc407525bcf5bf68a2ccacbc6 | |
| parent | 7494981595712cf42681823e8fd79977b9b5f9dc (diff) | |
| download | video-codec-experiments-c45f80a14ecd00914eb1d4e8f628b74a713667ba.tar video-codec-experiments-c45f80a14ecd00914eb1d4e8f628b74a713667ba.tar.bz2 video-codec-experiments-c45f80a14ecd00914eb1d4e8f628b74a713667ba.tar.zst | |
web player shows index
| -rw-r--r-- | lvc/codec-web/src/lib.rs | 18 | ||||
| -rw-r--r-- | lvc/codec-web/web/index.html | 5 | ||||
| -rw-r--r-- | lvc/codec-web/web/main.ts | 65 |
3 files changed, 68 insertions, 20 deletions
diff --git a/lvc/codec-web/src/lib.rs b/lvc/codec-web/src/lib.rs index c26da29..cb2ad3c 100644 --- a/lvc/codec-web/src/lib.rs +++ b/lvc/codec-web/src/lib.rs @@ -10,13 +10,13 @@ struct State { decoder: Decoder, } -#[wasm_bindgen] -extern "C" { - #[wasm_bindgen(js_namespace = console)] - fn log(s: &str); - #[wasm_bindgen(js_namespace = console, js_name = "log")] - fn logs(s: String); -} +// #[wasm_bindgen] +// extern "C" { +// #[wasm_bindgen(js_namespace = console)] +// fn log(s: &str); +// #[wasm_bindgen(js_namespace = console, js_name = "log")] +// fn logs(s: String); +// } #[wasm_bindgen(start)] fn panic_init() { @@ -42,15 +42,11 @@ pub fn decode_frame(buf: &[u8], debug: bool) -> Vec<u8> { let mut g = DECODER.write().unwrap(); let state = g.as_mut().unwrap(); state.buffer.extend(buf.iter()); - log("d"); - logs(format!("{}", state.buffer.len())); - log("a"); state .decoder .decode_frame(&mut state.buffer, &mut state.frame, debug) .unwrap(); - log("b"); for y in 0..state.frame.size.y { for x in 0..state.frame.size.x { diff --git a/lvc/codec-web/web/index.html b/lvc/codec-web/web/index.html index 2580ed9..b572671 100644 --- a/lvc/codec-web/web/index.html +++ b/lvc/codec-web/web/index.html @@ -7,5 +7,8 @@ <title>bv1 web player</title> <script defer async src="./bundle.js" type="module"></script> </head> - <body></body> + <body> + <noscript>need js</noscript> + <p>loading…</p> + </body> </html> diff --git a/lvc/codec-web/web/main.ts b/lvc/codec-web/web/main.ts index 150e1c3..bdaa1f6 100644 --- a/lvc/codec-web/web/main.ts +++ b/lvc/codec-web/web/main.ts @@ -5,14 +5,63 @@ console.log("init wasm"); await init() console.log("done"); -decode_init(1920, 1080) +index("..") -const res = await fetch("/data/encoded") -if (!res.ok) throw new Error("not ok"); +async function index(url: string) { + const res = await fetch(url) + if (!res.ok) throw new Error("not ok"); + document.body.innerHTML = await res.text(); + const h1 = document.createElement("h1") + h1.textContent = "bv1 web player" + document.body.prepend(h1) + document.body.querySelectorAll("a").forEach(e => { + const u = url + "/" + e.textContent + e.onclick = ev => { + ev.preventDefault() + document.body.innerHTML = "" + play(u.toString()) + } + }) +} -const buf = new Uint8Array(await res.arrayBuffer()) +async function play(url: string) { + decode_init(1920, 1080) -console.log("decode"); -const frame = decode_frame(buf.slice(0, 500000), true); -console.log("done"); -console.log(frame); + const res = await fetch(url) + if (!res.ok) throw new Error("not ok"); + let buf: Uint8Array | undefined = new Uint8Array(await res.arrayBuffer()) + + const canvas = document.createElement("canvas") + canvas.width = 1920 + canvas.height = 1080 + document.body.append(canvas) + document.body.style.backgroundColor = "#111" + const ctx = canvas.getContext("2d")! + let debug = false; + + document.body.addEventListener("keydown", ev => { + if (ev.code == "KeyD") debug = !debug; + }) + + setInterval(() => { + const frame = decode_frame(buf ?? new Uint8Array(), debug); + buf = undefined + + const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); + const data = imageData.data; + + for (let y = 0; y < 1080; y++) { + for (let x = 0; x < 1920; x++) { + const ti = (x + y * 1920) * 4; + const si = (x + y * 1920) * 3; + data[ti + 0] = frame[si + 0] + data[ti + 1] = frame[si + 1] + data[ti + 2] = frame[si + 2] + data[ti + 3] = 255 + } + } + + ctx.putImageData(imageData, 0, 0); + + }, 1000 / 30) +} |