feat: add frame caching demo documentation
This commit is contained in:
zhangheng
34
.gitignore
vendored
Normal file
34
.gitignore
vendored
Normal file
@@ -0,0 +1,34 @@
|
||||
# Rust
|
||||
target/
|
||||
|
||||
# Frontend dependencies and build output
|
||||
web/node_modules/
|
||||
web/.next/
|
||||
web/out/
|
||||
web/.turbo/
|
||||
|
||||
# Generated analysis artifacts
|
||||
graphify-out/
|
||||
|
||||
# Local media asset
|
||||
video.h264
|
||||
|
||||
# Environment files
|
||||
.env
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
web/.env.local
|
||||
web/.env.development.local
|
||||
web/.env.test.local
|
||||
web/.env.production.local
|
||||
!web/.env.local.example
|
||||
|
||||
# Editor / OS noise
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
.idea/
|
||||
.vscode/
|
||||
*.swp
|
||||
*.swo
|
||||
538
Cargo.lock
generated
Normal file
538
Cargo.lock
generated
Normal file
@@ -0,0 +1,538 @@
|
||||
# This file is automatically @generated by Cargo.
|
||||
# It is not intended for manual editing.
|
||||
version = 4
|
||||
|
||||
[[package]]
|
||||
name = "atomic-waker"
|
||||
version = "1.1.2"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "1505bd5d3d116872e7271a6d4e16d81d0c8570876c8de68093a09ac269d8aac0"
|
||||
|
||||
[[package]]
|
||||
name = "axum"
|
||||
version = "0.8.9"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "31b698c5f9a010f6573133b09e0de5408834d0c82f8d7475a89fc1867a71cd90"
|
||||
dependencies = [
|
||||
"axum-core",
|
||||
"bytes",
|
||||
"form_urlencoded",
|
||||
"futures-util",
|
||||
"http",
|
||||
"http-body",
|
||||
"http-body-util",
|
||||
"hyper",
|
||||
"hyper-util",
|
||||
"itoa",
|
||||
"matchit",
|
||||
"memchr",
|
||||
"mime",
|
||||
"percent-encoding",
|
||||
"pin-project-lite",
|
||||
"serde_core",
|
||||
"serde_json",
|
||||
"serde_path_to_error",
|
||||
"serde_urlencoded",
|
||||
"sync_wrapper",
|
||||
"tokio",
|
||||
"tower",
|
||||
"tower-layer",
|
||||
"tower-service",
|
||||
"tracing",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "axum-core"
|
||||
version = "0.5.6"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "08c78f31d7b1291f7ee735c1c6780ccde7785daae9a9206026862dab7d8792d1"
|
||||
dependencies = [
|
||||
"bytes",
|
||||
"futures-core",
|
||||
"http",
|
||||
"http-body",
|
||||
"http-body-util",
|
||||
"mime",
|
||||
"pin-project-lite",
|
||||
"sync_wrapper",
|
||||
"tower-layer",
|
||||
"tower-service",
|
||||
"tracing",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "bitflags"
|
||||
version = "2.11.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "c4512299f36f043ab09a583e57bceb5a5aab7a73db1805848e8fef3c9e8c78b3"
|
||||
|
||||
[[package]]
|
||||
name = "bytes"
|
||||
version = "1.11.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "1e748733b7cbc798e1434b6ac524f0c1ff2ab456fe201501e6497c8417a4fc33"
|
||||
|
||||
[[package]]
|
||||
name = "form_urlencoded"
|
||||
version = "1.2.2"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "cb4cb245038516f5f85277875cdaa4f7d2c9a0fa0468de06ed190163b1581fcf"
|
||||
dependencies = [
|
||||
"percent-encoding",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "futures-channel"
|
||||
version = "0.3.32"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "07bbe89c50d7a535e539b8c17bc0b49bdb77747034daa8087407d655f3f7cc1d"
|
||||
dependencies = [
|
||||
"futures-core",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "futures-core"
|
||||
version = "0.3.32"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "7e3450815272ef58cec6d564423f6e755e25379b217b0bc688e295ba24df6b1d"
|
||||
|
||||
[[package]]
|
||||
name = "futures-sink"
|
||||
version = "0.3.32"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "c39754e157331b013978ec91992bde1ac089843443c49cbc7f46150b0fad0893"
|
||||
|
||||
[[package]]
|
||||
name = "futures-task"
|
||||
version = "0.3.32"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "037711b3d59c33004d3856fbdc83b99d4ff37a24768fa1be9ce3538a1cde4393"
|
||||
|
||||
[[package]]
|
||||
name = "futures-util"
|
||||
version = "0.3.32"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "389ca41296e6190b48053de0321d02a77f32f8a5d2461dd38762c0593805c6d6"
|
||||
dependencies = [
|
||||
"futures-core",
|
||||
"futures-task",
|
||||
"pin-project-lite",
|
||||
"slab",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "http"
|
||||
version = "1.4.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "e3ba2a386d7f85a81f119ad7498ebe444d2e22c2af0b86b069416ace48b3311a"
|
||||
dependencies = [
|
||||
"bytes",
|
||||
"itoa",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "http-body"
|
||||
version = "1.0.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "1efedce1fb8e6913f23e0c92de8e62cd5b772a67e7b3946df930a62566c93184"
|
||||
dependencies = [
|
||||
"bytes",
|
||||
"http",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "http-body-util"
|
||||
version = "0.1.3"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "b021d93e26becf5dc7e1b75b1bed1fd93124b374ceb73f43d4d4eafec896a64a"
|
||||
dependencies = [
|
||||
"bytes",
|
||||
"futures-core",
|
||||
"http",
|
||||
"http-body",
|
||||
"pin-project-lite",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "httparse"
|
||||
version = "1.10.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "6dbf3de79e51f3d586ab4cb9d5c3e2c14aa28ed23d180cf89b4df0454a69cc87"
|
||||
|
||||
[[package]]
|
||||
name = "httpdate"
|
||||
version = "1.0.3"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "df3b46402a9d5adb4c86a0cf463f42e19994e3ee891101b1841f30a545cb49a9"
|
||||
|
||||
[[package]]
|
||||
name = "hyper"
|
||||
version = "1.9.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "6299f016b246a94207e63da54dbe807655bf9e00044f73ded42c3ac5305fbcca"
|
||||
dependencies = [
|
||||
"atomic-waker",
|
||||
"bytes",
|
||||
"futures-channel",
|
||||
"futures-core",
|
||||
"http",
|
||||
"http-body",
|
||||
"httparse",
|
||||
"httpdate",
|
||||
"itoa",
|
||||
"pin-project-lite",
|
||||
"smallvec",
|
||||
"tokio",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "hyper-util"
|
||||
version = "0.1.20"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "96547c2556ec9d12fb1578c4eaf448b04993e7fb79cbaad930a656880a6bdfa0"
|
||||
dependencies = [
|
||||
"bytes",
|
||||
"http",
|
||||
"http-body",
|
||||
"hyper",
|
||||
"pin-project-lite",
|
||||
"tokio",
|
||||
"tower-service",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "itoa"
|
||||
version = "1.0.18"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "8f42a60cbdf9a97f5d2305f08a87dc4e09308d1276d28c869c684d7777685682"
|
||||
|
||||
[[package]]
|
||||
name = "libc"
|
||||
version = "0.2.186"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "68ab91017fe16c622486840e4c83c9a37afeff978bd239b5293d61ece587de66"
|
||||
|
||||
[[package]]
|
||||
name = "log"
|
||||
version = "0.4.29"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "5e5032e24019045c762d3c0f28f5b6b8bbf38563a65908389bf7978758920897"
|
||||
|
||||
[[package]]
|
||||
name = "matchit"
|
||||
version = "0.8.4"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "47e1ffaa40ddd1f3ed91f717a33c8c0ee23fff369e3aa8772b9605cc1d22f4c3"
|
||||
|
||||
[[package]]
|
||||
name = "memchr"
|
||||
version = "2.8.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "f8ca58f447f06ed17d5fc4043ce1b10dd205e060fb3ce5b979b8ed8e59ff3f79"
|
||||
|
||||
[[package]]
|
||||
name = "mime"
|
||||
version = "0.3.17"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "6877bb514081ee2a7ff5ef9de3281f14a4dd4bceac4c09388074a6b5df8a139a"
|
||||
|
||||
[[package]]
|
||||
name = "mio"
|
||||
version = "1.2.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "50b7e5b27aa02a74bac8c3f23f448f8d87ff11f92d3aac1a6ed369ee08cc56c1"
|
||||
dependencies = [
|
||||
"libc",
|
||||
"wasi",
|
||||
"windows-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "once_cell"
|
||||
version = "1.21.4"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "9f7c3e4beb33f85d45ae3e3a1792185706c8e16d043238c593331cc7cd313b50"
|
||||
|
||||
[[package]]
|
||||
name = "percent-encoding"
|
||||
version = "2.3.2"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "9b4f627cb1b25917193a259e49bdad08f671f8d9708acfd5fe0a8c1455d87220"
|
||||
|
||||
[[package]]
|
||||
name = "pin-project-lite"
|
||||
version = "0.2.17"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "a89322df9ebe1c1578d689c92318e070967d1042b512afbe49518723f4e6d5cd"
|
||||
|
||||
[[package]]
|
||||
name = "proc-macro2"
|
||||
version = "1.0.106"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "8fd00f0bb2e90d81d1044c2b32617f68fcb9fa3bb7640c23e9c748e53fb30934"
|
||||
dependencies = [
|
||||
"unicode-ident",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "quote"
|
||||
version = "1.0.45"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "41f2619966050689382d2b44f664f4bc593e129785a36d6ee376ddf37259b924"
|
||||
dependencies = [
|
||||
"proc-macro2",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "ryu"
|
||||
version = "1.0.23"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "9774ba4a74de5f7b1c1451ed6cd5285a32eddb5cccb8cc655a4e50009e06477f"
|
||||
|
||||
[[package]]
|
||||
name = "serde"
|
||||
version = "1.0.228"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "9a8e94ea7f378bd32cbbd37198a4a91436180c5bb472411e48b5ec2e2124ae9e"
|
||||
dependencies = [
|
||||
"serde_core",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "serde_core"
|
||||
version = "1.0.228"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "41d385c7d4ca58e59fc732af25c3983b67ac852c1a25000afe1175de458b67ad"
|
||||
dependencies = [
|
||||
"serde_derive",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "serde_derive"
|
||||
version = "1.0.228"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "d540f220d3187173da220f885ab66608367b6574e925011a9353e4badda91d79"
|
||||
dependencies = [
|
||||
"proc-macro2",
|
||||
"quote",
|
||||
"syn",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "serde_json"
|
||||
version = "1.0.149"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "83fc039473c5595ace860d8c4fafa220ff474b3fc6bfdb4293327f1a37e94d86"
|
||||
dependencies = [
|
||||
"itoa",
|
||||
"memchr",
|
||||
"serde",
|
||||
"serde_core",
|
||||
"zmij",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "serde_path_to_error"
|
||||
version = "0.1.20"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "10a9ff822e371bb5403e391ecd83e182e0e77ba7f6fe0160b795797109d1b457"
|
||||
dependencies = [
|
||||
"itoa",
|
||||
"serde",
|
||||
"serde_core",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "serde_urlencoded"
|
||||
version = "0.7.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "d3491c14715ca2294c4d6a88f15e84739788c1d030eed8c110436aafdaa2f3fd"
|
||||
dependencies = [
|
||||
"form_urlencoded",
|
||||
"itoa",
|
||||
"ryu",
|
||||
"serde",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "slab"
|
||||
version = "0.4.12"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "0c790de23124f9ab44544d7ac05d60440adc586479ce501c1d6d7da3cd8c9cf5"
|
||||
|
||||
[[package]]
|
||||
name = "smallvec"
|
||||
version = "1.15.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "67b1b7a3b5fe4f1376887184045fcf45c69e92af734b7aaddc05fb777b6fbd03"
|
||||
|
||||
[[package]]
|
||||
name = "socket2"
|
||||
version = "0.6.3"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "3a766e1110788c36f4fa1c2b71b387a7815aa65f88ce0229841826633d93723e"
|
||||
dependencies = [
|
||||
"libc",
|
||||
"windows-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "syn"
|
||||
version = "2.0.117"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "e665b8803e7b1d2a727f4023456bbbbe74da67099c585258af0ad9c5013b9b99"
|
||||
dependencies = [
|
||||
"proc-macro2",
|
||||
"quote",
|
||||
"unicode-ident",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "sync_wrapper"
|
||||
version = "1.0.2"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "0bf256ce5efdfa370213c1dabab5935a12e49f2c58d15e9eac2870d3b4f27263"
|
||||
|
||||
[[package]]
|
||||
name = "tokio"
|
||||
version = "1.52.3"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "8fc7f01b389ac15039e4dc9531aa973a135d7a4135281b12d7c1bc79fd57fffe"
|
||||
dependencies = [
|
||||
"libc",
|
||||
"mio",
|
||||
"pin-project-lite",
|
||||
"socket2",
|
||||
"tokio-macros",
|
||||
"windows-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "tokio-macros"
|
||||
version = "2.7.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "385a6cb71ab9ab790c5fe8d67f1645e6c450a7ce006a33de03daa956cf70a496"
|
||||
dependencies = [
|
||||
"proc-macro2",
|
||||
"quote",
|
||||
"syn",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "tokio-util"
|
||||
version = "0.7.18"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "9ae9cec805b01e8fc3fd2fe289f89149a9b66dd16786abd8b19cfa7b48cb0098"
|
||||
dependencies = [
|
||||
"bytes",
|
||||
"futures-core",
|
||||
"futures-sink",
|
||||
"pin-project-lite",
|
||||
"tokio",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "tower"
|
||||
version = "0.5.3"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "ebe5ef63511595f1344e2d5cfa636d973292adc0eec1f0ad45fae9f0851ab1d4"
|
||||
dependencies = [
|
||||
"futures-core",
|
||||
"futures-util",
|
||||
"pin-project-lite",
|
||||
"sync_wrapper",
|
||||
"tokio",
|
||||
"tower-layer",
|
||||
"tower-service",
|
||||
"tracing",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "tower-http"
|
||||
version = "0.6.10"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "68d6fdd9f81c2819c9a8b0e0cd91660e7746a8e6ea2ba7c6b2b057985f6bcb51"
|
||||
dependencies = [
|
||||
"bitflags",
|
||||
"bytes",
|
||||
"http",
|
||||
"pin-project-lite",
|
||||
"tower-layer",
|
||||
"tower-service",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "tower-layer"
|
||||
version = "0.3.3"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "121c2a6cda46980bb0fcd1647ffaf6cd3fc79a013de288782836f6df9c48780e"
|
||||
|
||||
[[package]]
|
||||
name = "tower-service"
|
||||
version = "0.3.3"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "8df9b6e13f2d32c91b9bd719c00d1958837bc7dec474d94952798cc8e69eeec3"
|
||||
|
||||
[[package]]
|
||||
name = "tracing"
|
||||
version = "0.1.44"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "63e71662fa4b2a2c3a26f570f037eb95bb1f85397f3cd8076caed2f026a6d100"
|
||||
dependencies = [
|
||||
"log",
|
||||
"pin-project-lite",
|
||||
"tracing-core",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "tracing-core"
|
||||
version = "0.1.36"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "db97caf9d906fbde555dd62fa95ddba9eecfd14cb388e4f491a66d74cd5fb79a"
|
||||
dependencies = [
|
||||
"once_cell",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "unicode-ident"
|
||||
version = "1.0.24"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "e6e4313cd5fcd3dad5cafa179702e2b244f760991f45397d14d4ebf38247da75"
|
||||
|
||||
[[package]]
|
||||
name = "video-process-backend"
|
||||
version = "0.1.0"
|
||||
dependencies = [
|
||||
"axum",
|
||||
"http",
|
||||
"tokio",
|
||||
"tokio-util",
|
||||
"tower-http",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "wasi"
|
||||
version = "0.11.1+wasi-snapshot-preview1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "ccf3ec651a847eb01de73ccad15eb7d99f80485de043efb2f370cd654f4ea44b"
|
||||
|
||||
[[package]]
|
||||
name = "windows-link"
|
||||
version = "0.2.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "f0805222e57f7521d6a62e36fa9163bc891acd422f971defe97d64e70d0a4fe5"
|
||||
|
||||
[[package]]
|
||||
name = "windows-sys"
|
||||
version = "0.61.2"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "ae137229bcbd6cdf0f7b80a31df61766145077ddf49416a728b02cb3921ff3fc"
|
||||
dependencies = [
|
||||
"windows-link",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "zmij"
|
||||
version = "1.0.21"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "b8848ee67ecc8aedbaf3e4122217aff892639231befc6a1b58d29fff4c2cabaa"
|
||||
11
Cargo.toml
Normal file
11
Cargo.toml
Normal file
@@ -0,0 +1,11 @@
|
||||
[package]
|
||||
name = "video-process-backend"
|
||||
version = "0.1.0"
|
||||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
axum = "0.8"
|
||||
http = "1"
|
||||
tokio = { version = "1", features = ["fs", "macros", "net", "rt-multi-thread"] }
|
||||
tokio-util = { version = "0.7", features = ["io"] }
|
||||
tower-http = { version = "0.6", features = ["cors"] }
|
||||
58
README.md
Normal file
58
README.md
Normal file
@@ -0,0 +1,58 @@
|
||||
# Video Process Demo
|
||||
|
||||
Rust 后端原样提供 `video.h264`，Next.js 前端用 WebCodecs 在浏览器里完成流式切帧、本地帧缓存、单画布播放和帧拖动定位。刷新后优先恢复本地帧，不需要重新拉完整视频再解码。
|
||||
|
||||
## 启动后端
|
||||
|
||||
```bash
|
||||
cargo run
|
||||
```
|
||||
|
||||
后端默认监听 `http://localhost:8080`，视频地址是 `http://localhost:8080/video.h264`。
|
||||
仓库里不包含这个大体积示例视频，请把 `video.h264` 放到项目根目录，或通过 `NEXT_PUBLIC_VIDEO_URL` 指向你自己的 H.264 地址。
|
||||
|
||||
## 启动前端
|
||||
|
||||
```bash
|
||||
cd web
|
||||
npm install
|
||||
NEXT_PUBLIC_VIDEO_URL=http://localhost:8080/video.h264 npm run dev
|
||||
```
|
||||
|
||||
打开 `http://localhost:3000` 即可。
|
||||
|
||||
## 前端架构
|
||||
|
||||
前端分成四层：
|
||||
|
||||
- 传输缓存：`web/lib/video-cache.ts` 用 `Cache Storage` 保存原始 `video.h264` 响应。
|
||||
- 解析切帧：`web/lib/h264.ts` 把 Annex B 字节流拆成 access unit，识别 SPS/PPS 和帧边界。
|
||||
- 帧持久化：`web/lib/frame-store.ts` 用 `IndexedDB` 保存 `CachedFrameSession`，每帧以 `Blob` 形式落盘，刷新后可直接恢复。
|
||||
- 播放控制：`web/components/VideoFrameViewer.tsx` 负责切帧、恢复、单画布播放、拖动条跳帧和缓存清理。
|
||||
|
||||
## 运行流程
|
||||
|
||||
1. 页面先查本地帧会话，命中则直接把 `Blob` 恢复成 `objectURL`，无需重新请求后端。
|
||||
2. 未命中时再去请求 `video.h264`，并边下载边解析 SPS/PPS 和 access unit。
|
||||
3. 每个 `VideoFrame` 会先画到离屏 canvas，再导出成 WebP `Blob`，同时生成缩略图对象 URL。
|
||||
4. 全部帧完成后，会把会话写入 `IndexedDB`，然后尽量清掉原始 `video.h264` 的缓存，减少重复占用。
|
||||
5. 播放区只用一个 canvas，通过 `requestAnimationFrame` 按时间戳切帧；拖动条则直接 `jumpToFrame()` 到指定帧。
|
||||
|
||||
## 缓存策略
|
||||
|
||||
- 原始视频缓存放在 `Cache Storage`，适合保存完整的 fetch 响应。
|
||||
- 切好的帧和元数据放在 `IndexedDB`，避免把大体积帧塞进一个 JSON。
|
||||
- 页面提供“申请持久化”按钮，会调用 `navigator.storage.persist()`，降低浏览器回收缓存的概率。
|
||||
- “清空缓存”会同时删除帧会话和原始视频缓存；下次打开会重新请求后端并重新切帧。
|
||||
- 当前实现还保留了旧版 `Cache Storage` 帧清单的迁移逻辑，便于升级已有缓存。
|
||||
|
||||
## 关键文件
|
||||
|
||||
- `web/components/VideoFrameViewer.tsx`：主界面、播放、拖动条、缓存状态。
|
||||
- `web/lib/h264.ts`：H.264 Annex B 解析、SPS/PPS、WebCodecs 配置。
|
||||
- `web/lib/frame-store.ts`：帧会话读写、校验、迁移。
|
||||
- `web/lib/video-cache.ts`：原始视频响应缓存。
|
||||
|
||||
## 备注
|
||||
|
||||
前端依赖浏览器的 WebCodecs、Cache Storage 和 IndexedDB 能力，建议使用 Chromium / Edge。
|
||||
90
src/main.rs
Normal file
90
src/main.rs
Normal file
@@ -0,0 +1,90 @@
|
||||
use axum::{
|
||||
body::Body,
|
||||
http::{
|
||||
header::{CACHE_CONTROL, CONTENT_LENGTH, CONTENT_TYPE},
|
||||
HeaderValue, StatusCode,
|
||||
},
|
||||
response::Response,
|
||||
routing::get,
|
||||
Router,
|
||||
};
|
||||
use std::io::ErrorKind;
|
||||
use tokio::fs::File;
|
||||
use tokio_util::io::ReaderStream;
|
||||
use tower_http::cors::CorsLayer;
|
||||
|
||||
const VIDEO_PATH: &str = concat!(env!("CARGO_MANIFEST_DIR"), "/video.h264");
|
||||
|
||||
#[tokio::main]
|
||||
async fn main() -> Result<(), std::io::Error> {
|
||||
let port = std::env::var("PORT")
|
||||
.ok()
|
||||
.and_then(|value| value.parse::<u16>().ok())
|
||||
.unwrap_or(8080);
|
||||
|
||||
let app = Router::new()
|
||||
.route("/", get(index))
|
||||
.route("/health", get(health))
|
||||
.route("/video.h264", get(video))
|
||||
.layer(CorsLayer::permissive());
|
||||
|
||||
let addr = format!("0.0.0.0:{port}");
|
||||
let listener = tokio::net::TcpListener::bind(&addr).await?;
|
||||
println!("Rust video server listening on http://{addr}");
|
||||
|
||||
axum::serve(listener, app).await
|
||||
}
|
||||
|
||||
async fn index() -> &'static str {
|
||||
"Rust video server is running. GET /video.h264 for the raw H.264 stream."
|
||||
}
|
||||
|
||||
async fn health() -> &'static str {
|
||||
"ok"
|
||||
}
|
||||
|
||||
async fn video() -> Result<Response, (StatusCode, String)> {
|
||||
let file = open_video_file().await?;
|
||||
let file_len = file
|
||||
.metadata()
|
||||
.await
|
||||
.map_err(|err| (map_io_status(&err), format!("failed to read metadata: {err}")))?
|
||||
.len();
|
||||
|
||||
let stream = ReaderStream::new(file);
|
||||
let body = Body::from_stream(stream);
|
||||
|
||||
let mut response = Response::new(body);
|
||||
let headers = response.headers_mut();
|
||||
headers.insert(CONTENT_TYPE, HeaderValue::from_static("video/h264"));
|
||||
headers.insert(CONTENT_LENGTH, header_value(file_len)?);
|
||||
headers.insert(
|
||||
CACHE_CONTROL,
|
||||
HeaderValue::from_static("public, max-age=86400, stale-while-revalidate=604800"),
|
||||
);
|
||||
|
||||
Ok(response)
|
||||
}
|
||||
|
||||
async fn open_video_file() -> Result<File, (StatusCode, String)> {
|
||||
File::open(VIDEO_PATH)
|
||||
.await
|
||||
.map_err(|err| (map_io_status(&err), format!("failed to open {VIDEO_PATH}: {err}")))
|
||||
}
|
||||
|
||||
fn header_value(len: u64) -> Result<HeaderValue, (StatusCode, String)> {
|
||||
HeaderValue::from_str(&len.to_string()).map_err(|err| {
|
||||
(
|
||||
StatusCode::INTERNAL_SERVER_ERROR,
|
||||
format!("failed to build content-length header: {err}"),
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
fn map_io_status(error: &std::io::Error) -> StatusCode {
|
||||
match error.kind() {
|
||||
ErrorKind::NotFound => StatusCode::NOT_FOUND,
|
||||
ErrorKind::PermissionDenied => StatusCode::FORBIDDEN,
|
||||
_ => StatusCode::INTERNAL_SERVER_ERROR,
|
||||
}
|
||||
}
|
||||
1
web/.env.local.example
Normal file
1
web/.env.local.example
Normal file
@@ -0,0 +1 @@
|
||||
NEXT_PUBLIC_VIDEO_URL=http://localhost:8080/video.h264
|
||||
461
web/app/globals.css
Normal file
461
web/app/globals.css
Normal file
@@ -0,0 +1,461 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg: #07101d;
|
||||
--bg-soft: #0d1828;
|
||||
--panel: rgba(12, 19, 33, 0.82);
|
||||
--panel-strong: rgba(16, 25, 41, 0.94);
|
||||
--border: rgba(255, 255, 255, 0.1);
|
||||
--text: #eef4ff;
|
||||
--muted: #a9bbd5;
|
||||
--accent: #70d6ff;
|
||||
--accent-strong: #35b8ff;
|
||||
--accent-warm: #f4b860;
|
||||
--shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(112, 214, 255, 0.18), transparent 32%),
|
||||
radial-gradient(circle at 80% 18%, rgba(244, 184, 96, 0.12), transparent 28%),
|
||||
linear-gradient(180deg, #07101d 0%, #040912 100%);
|
||||
font-family: var(--font-body), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.viewer-shell {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
padding: 32px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.viewer-shell::before,
|
||||
.viewer-shell::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: auto;
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
border-radius: 999px;
|
||||
filter: blur(72px);
|
||||
opacity: 0.32;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.viewer-shell::before {
|
||||
top: -100px;
|
||||
right: -120px;
|
||||
background: rgba(112, 214, 255, 0.24);
|
||||
}
|
||||
|
||||
.viewer-shell::after {
|
||||
bottom: -120px;
|
||||
left: -120px;
|
||||
background: rgba(244, 184, 96, 0.18);
|
||||
}
|
||||
|
||||
.viewer-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.hero-card,
|
||||
.panel-card {
|
||||
border: 1px solid var(--border);
|
||||
background: var(--panel);
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.85fr);
|
||||
gap: 20px;
|
||||
padding: 28px;
|
||||
border-radius: 28px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 12px;
|
||||
color: var(--accent);
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
margin: 0;
|
||||
font-family: var(--font-display), var(--font-body), sans-serif;
|
||||
font-size: clamp(2rem, 4vw, 4rem);
|
||||
line-height: 1.02;
|
||||
}
|
||||
|
||||
.hero-copy p {
|
||||
margin: 14px 0 0;
|
||||
max-width: 68ch;
|
||||
color: var(--muted);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero-metrics {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.metric {
|
||||
padding: 16px 18px;
|
||||
border-radius: 20px;
|
||||
background: var(--panel-strong);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
margin: 0 0 8px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
margin: 0;
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: 16px;
|
||||
line-height: 1.45;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.metric-note {
|
||||
margin: 8px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.panel-card {
|
||||
padding: 22px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 14px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.field-label,
|
||||
.status-label {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.field-input {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
color: var(--text);
|
||||
background: rgba(3, 8, 18, 0.72);
|
||||
outline: none;
|
||||
transition: border-color 0.18s ease, box-shadow 0.18s ease;
|
||||
}
|
||||
|
||||
.field-input:focus {
|
||||
border-color: rgba(112, 214, 255, 0.55);
|
||||
box-shadow: 0 0 0 4px rgba(112, 214, 255, 0.12);
|
||||
}
|
||||
|
||||
.primary-button,
|
||||
.ghost-button {
|
||||
border: 0;
|
||||
border-radius: 16px;
|
||||
padding: 14px 18px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.18s ease, opacity 0.18s ease, background 0.18s ease;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
background: linear-gradient(135deg, var(--accent-strong), #7f8cff);
|
||||
color: #04111b;
|
||||
font-weight: 700;
|
||||
min-width: 132px;
|
||||
}
|
||||
|
||||
.ghost-button {
|
||||
color: var(--text);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.primary-button:hover,
|
||||
.ghost-button:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.primary-button:disabled,
|
||||
.ghost-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.toolbar-actions .ghost-button {
|
||||
min-width: 132px;
|
||||
}
|
||||
|
||||
.status-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
margin-top: 18px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-copy {
|
||||
color: var(--muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.progress-track {
|
||||
margin-top: 18px;
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, var(--accent), var(--accent-warm));
|
||||
width: 0%;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
.gallery-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
margin: 20px 0 14px;
|
||||
}
|
||||
|
||||
.gallery-title {
|
||||
margin: 0;
|
||||
font-family: var(--font-display), var(--font-body), sans-serif;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.gallery-meta {
|
||||
color: var(--muted);
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
margin-top: 18px;
|
||||
padding: 18px;
|
||||
border-radius: 22px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.scrubber {
|
||||
margin-top: 16px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 18px;
|
||||
background: rgba(2, 5, 11, 0.42);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.scrubber-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.scrubber-label {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.scrubber-value {
|
||||
color: var(--text);
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.scrubber-input {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
accent-color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.scrubber-input:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.scrubber-input::-webkit-slider-runnable-track {
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, rgba(112, 214, 255, 0.9), rgba(244, 184, 96, 0.85));
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.scrubber-input::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: -7px;
|
||||
border-radius: 999px;
|
||||
border: 2px solid rgba(5, 9, 18, 0.92);
|
||||
background: #eef4ff;
|
||||
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.scrubber-input::-moz-range-track {
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, rgba(112, 214, 255, 0.9), rgba(244, 184, 96, 0.85));
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.scrubber-input::-moz-range-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 999px;
|
||||
border: 2px solid rgba(5, 9, 18, 0.92);
|
||||
background: #eef4ff;
|
||||
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.player-surface {
|
||||
min-height: 240px;
|
||||
}
|
||||
|
||||
.playback-canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-height: 72vh;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: #02050b;
|
||||
}
|
||||
|
||||
.player-placeholder {
|
||||
min-height: 240px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
border-radius: 18px;
|
||||
border: 1px dashed rgba(255, 255, 255, 0.14);
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
background: rgba(2, 5, 11, 0.72);
|
||||
}
|
||||
|
||||
.pager {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.pager button {
|
||||
appearance: none;
|
||||
min-width: 44px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
color: var(--text);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
cursor: pointer;
|
||||
transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
|
||||
}
|
||||
|
||||
.pager button.active {
|
||||
border-color: rgba(112, 214, 255, 0.5);
|
||||
background: rgba(112, 214, 255, 0.14);
|
||||
}
|
||||
|
||||
.pager button:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
border-color: rgba(112, 214, 255, 0.35);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.empty-state,
|
||||
.error-state,
|
||||
.loading-state {
|
||||
padding: 28px 18px;
|
||||
border-radius: 18px;
|
||||
border: 1px dashed rgba(255, 255, 255, 0.14);
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error-state {
|
||||
color: #ffd2cf;
|
||||
border-color: rgba(255, 134, 120, 0.3);
|
||||
background: rgba(255, 87, 64, 0.08);
|
||||
}
|
||||
|
||||
@media (max-width: 920px) {
|
||||
.viewer-shell {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.hero-card,
|
||||
.toolbar,
|
||||
.status-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
42
web/app/layout.tsx
Normal file
42
web/app/layout.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import type { Metadata } from "next";
|
||||
import { IBM_Plex_Mono, Noto_Sans_SC, Space_Grotesk } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const display = Space_Grotesk({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-display",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const body = Noto_Sans_SC({
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "500", "700"],
|
||||
variable: "--font-body",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const mono = IBM_Plex_Mono({
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "500"],
|
||||
variable: "--font-mono",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "H.264 Frame Viewer",
|
||||
description: "Rust backend + Next.js frontend for H.264 frame extraction",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="zh-CN">
|
||||
<body className={`${display.variable} ${body.variable} ${mono.variable}`}>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
5
web/app/page.tsx
Normal file
5
web/app/page.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
import VideoFrameViewer from "@/components/VideoFrameViewer";
|
||||
|
||||
export default function Page() {
|
||||
return <VideoFrameViewer />;
|
||||
}
|
||||
1235
web/components/VideoFrameViewer.tsx
Normal file
1235
web/components/VideoFrameViewer.tsx
Normal file
File diff suppressed because it is too large
Load Diff
400
web/lib/frame-store.ts
Normal file
400
web/lib/frame-store.ts
Normal file
@@ -0,0 +1,400 @@
|
||||
const DB_NAME = "video-process-frame-store-v1";
|
||||
const DB_VERSION = 1;
|
||||
const STORE_NAME = "sessions";
|
||||
const LEGACY_CACHE_NAME = "video-process-frame-manifests-v1";
|
||||
|
||||
export interface CachedFrameRecord {
|
||||
index: number;
|
||||
width: number;
|
||||
height: number;
|
||||
timestampUs: number;
|
||||
blob: Blob;
|
||||
}
|
||||
|
||||
export interface CachedFrameSession {
|
||||
version: 1;
|
||||
url: string;
|
||||
sourceSize: number | null;
|
||||
codec: string;
|
||||
frameCount: number;
|
||||
keyFrameCount: number;
|
||||
frames: CachedFrameRecord[];
|
||||
}
|
||||
|
||||
interface LegacyFrameThumb {
|
||||
index: number;
|
||||
src: string;
|
||||
width: number;
|
||||
height: number;
|
||||
timestampUs: number;
|
||||
}
|
||||
|
||||
interface LegacyFrameManifest {
|
||||
version: 1;
|
||||
url: string;
|
||||
sourceSize: number | null;
|
||||
codec: string;
|
||||
frameCount: number;
|
||||
keyFrameCount: number;
|
||||
frames: LegacyFrameThumb[];
|
||||
}
|
||||
|
||||
export async function readCachedFrameSession(url: string): Promise<CachedFrameSession | null> {
|
||||
const stored = await readSessionFromIndexedDb(url);
|
||||
if (stored) {
|
||||
return stored;
|
||||
}
|
||||
|
||||
const legacy = await readLegacyFrameManifest(url);
|
||||
if (!legacy) {
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
await writeCachedFrameSession(legacy);
|
||||
await deleteLegacyFrameManifest(url);
|
||||
} catch {
|
||||
// Migration is best-effort.
|
||||
}
|
||||
|
||||
return legacy;
|
||||
}
|
||||
|
||||
export async function writeCachedFrameSession(session: CachedFrameSession): Promise<void> {
|
||||
const normalized = normalizeCachedFrameSession(session);
|
||||
if (!normalized) {
|
||||
throw new Error("无效的帧缓存会话。");
|
||||
}
|
||||
|
||||
if (typeof indexedDB === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
await runStoreOperation("readwrite", (store) => store.put(normalized));
|
||||
}
|
||||
|
||||
export async function clearCachedFrameSession(url: string): Promise<void> {
|
||||
if (typeof indexedDB !== "undefined") {
|
||||
try {
|
||||
await runStoreOperation("readwrite", (store) => store.delete(url));
|
||||
} catch {
|
||||
// IndexedDB is best-effort.
|
||||
}
|
||||
}
|
||||
|
||||
await deleteLegacyFrameManifest(url);
|
||||
}
|
||||
|
||||
function normalizeCachedFrameSession(value: unknown, expectedUrl?: string): CachedFrameSession | null {
|
||||
if (!isRecord(value)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (value.version !== 1 || typeof value.url !== "string") {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (expectedUrl && value.url !== expectedUrl) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (
|
||||
!isNullableNumber(value.sourceSize) ||
|
||||
typeof value.codec !== "string" ||
|
||||
!isNonNegativeInteger(value.frameCount) ||
|
||||
!isNonNegativeInteger(value.keyFrameCount) ||
|
||||
!Array.isArray(value.frames)
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const frames = value.frames.map(normalizeCachedFrameRecord);
|
||||
if (frames.some((frame) => frame === null)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const normalizedFrames = frames as CachedFrameRecord[];
|
||||
if (normalizedFrames.length !== value.frameCount) {
|
||||
return null;
|
||||
}
|
||||
|
||||
normalizedFrames.sort((left, right) => left.index - right.index);
|
||||
|
||||
return {
|
||||
version: 1,
|
||||
url: value.url,
|
||||
sourceSize: value.sourceSize,
|
||||
codec: value.codec,
|
||||
frameCount: value.frameCount,
|
||||
keyFrameCount: value.keyFrameCount,
|
||||
frames: normalizedFrames,
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeCachedFrameRecord(value: unknown): CachedFrameRecord | null {
|
||||
if (!isRecord(value)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (
|
||||
!isNonNegativeInteger(value.index) ||
|
||||
!isPositiveInteger(value.width) ||
|
||||
!isPositiveInteger(value.height) ||
|
||||
!isNonNegativeInteger(value.timestampUs) ||
|
||||
!(value.blob instanceof Blob)
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
index: value.index,
|
||||
width: value.width,
|
||||
height: value.height,
|
||||
timestampUs: value.timestampUs,
|
||||
blob: value.blob,
|
||||
};
|
||||
}
|
||||
|
||||
async function readSessionFromIndexedDb(url: string): Promise<CachedFrameSession | null> {
|
||||
if (typeof indexedDB === "undefined") {
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
const record = await runStoreOperation("readonly", (store) => store.get(url));
|
||||
return normalizeCachedFrameSession(record, url);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function readLegacyFrameManifest(url: string): Promise<CachedFrameSession | null> {
|
||||
if (typeof caches === "undefined") {
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
const cache = await caches.open(LEGACY_CACHE_NAME);
|
||||
const cached = await cache.match(url);
|
||||
if (!cached) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const parsed = (await cached.json()) as unknown;
|
||||
const legacy = normalizeLegacyFrameManifest(parsed, url);
|
||||
if (!legacy) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const frames = await Promise.all(
|
||||
legacy.frames.map(async (frame) => ({
|
||||
index: frame.index,
|
||||
width: frame.width,
|
||||
height: frame.height,
|
||||
timestampUs: frame.timestampUs,
|
||||
blob: dataUrlToBlob(frame.src),
|
||||
})),
|
||||
);
|
||||
|
||||
frames.sort((left, right) => left.index - right.index);
|
||||
|
||||
return {
|
||||
version: 1,
|
||||
url: legacy.url,
|
||||
sourceSize: legacy.sourceSize,
|
||||
codec: legacy.codec,
|
||||
frameCount: legacy.frameCount,
|
||||
keyFrameCount: legacy.keyFrameCount,
|
||||
frames,
|
||||
};
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteLegacyFrameManifest(url: string): Promise<void> {
|
||||
if (typeof caches === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const cache = await caches.open(LEGACY_CACHE_NAME);
|
||||
await cache.delete(url);
|
||||
} catch {
|
||||
// Cache Storage is best-effort.
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeLegacyFrameManifest(value: unknown, expectedUrl?: string): LegacyFrameManifest | null {
|
||||
if (!isRecord(value)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (value.version !== 1 || typeof value.url !== "string") {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (expectedUrl && value.url !== expectedUrl) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (
|
||||
!isNullableNumber(value.sourceSize) ||
|
||||
typeof value.codec !== "string" ||
|
||||
!isNonNegativeInteger(value.frameCount) ||
|
||||
!isNonNegativeInteger(value.keyFrameCount) ||
|
||||
!Array.isArray(value.frames)
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const frames = value.frames.map((frame) => {
|
||||
if (!isRecord(frame)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (
|
||||
!isNonNegativeInteger(frame.index) ||
|
||||
typeof frame.src !== "string" ||
|
||||
!isPositiveInteger(frame.width) ||
|
||||
!isPositiveInteger(frame.height) ||
|
||||
!isNonNegativeInteger(frame.timestampUs)
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
index: frame.index,
|
||||
src: frame.src,
|
||||
width: frame.width,
|
||||
height: frame.height,
|
||||
timestampUs: frame.timestampUs,
|
||||
};
|
||||
});
|
||||
|
||||
if (frames.some((frame) => frame === null)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const normalizedFrames = frames as LegacyFrameThumb[];
|
||||
if (normalizedFrames.length !== value.frameCount) {
|
||||
return null;
|
||||
}
|
||||
|
||||
normalizedFrames.sort((left, right) => left.index - right.index);
|
||||
|
||||
return {
|
||||
version: 1,
|
||||
url: value.url,
|
||||
sourceSize: value.sourceSize,
|
||||
codec: value.codec,
|
||||
frameCount: value.frameCount,
|
||||
keyFrameCount: value.keyFrameCount,
|
||||
frames: normalizedFrames,
|
||||
};
|
||||
}
|
||||
|
||||
function dataUrlToBlob(dataUrl: string): Blob {
|
||||
const separatorIndex = dataUrl.indexOf(",");
|
||||
if (!dataUrl.startsWith("data:") || separatorIndex === -1) {
|
||||
throw new Error("无效的数据 URL。");
|
||||
}
|
||||
|
||||
const header = dataUrl.slice(5, separatorIndex);
|
||||
const payload = dataUrl.slice(separatorIndex + 1);
|
||||
const isBase64 = header.endsWith(";base64");
|
||||
const mimeType = isBase64 ? header.slice(0, -7) || "application/octet-stream" : header || "application/octet-stream";
|
||||
|
||||
if (!isBase64) {
|
||||
return new Blob([decodeURIComponent(payload)], { type: mimeType });
|
||||
}
|
||||
|
||||
const binary = atob(payload);
|
||||
const bytes = new Uint8Array(binary.length);
|
||||
for (let index = 0; index < binary.length; index += 1) {
|
||||
bytes[index] = binary.charCodeAt(index);
|
||||
}
|
||||
|
||||
return new Blob([bytes], { type: mimeType });
|
||||
}
|
||||
|
||||
function isRecord(value: unknown): value is Record<string, unknown> {
|
||||
return typeof value === "object" && value !== null;
|
||||
}
|
||||
|
||||
function isNullableNumber(value: unknown): value is number | null {
|
||||
return value === null || typeof value === "number";
|
||||
}
|
||||
|
||||
function isNonNegativeInteger(value: unknown): value is number {
|
||||
return typeof value === "number" && Number.isInteger(value) && value >= 0;
|
||||
}
|
||||
|
||||
function isPositiveInteger(value: unknown): value is number {
|
||||
return typeof value === "number" && Number.isInteger(value) && value > 0;
|
||||
}
|
||||
|
||||
function openDatabase(): Promise<IDBDatabase> {
|
||||
if (typeof indexedDB === "undefined") {
|
||||
return Promise.reject(new Error("当前浏览器不支持 IndexedDB。"));
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const request = indexedDB.open(DB_NAME, DB_VERSION);
|
||||
|
||||
request.onupgradeneeded = () => {
|
||||
const db = request.result;
|
||||
if (!db.objectStoreNames.contains(STORE_NAME)) {
|
||||
db.createObjectStore(STORE_NAME, { keyPath: "url" });
|
||||
}
|
||||
};
|
||||
|
||||
request.onerror = () => {
|
||||
reject(request.error ?? new Error("打开 IndexedDB 失败。"));
|
||||
};
|
||||
|
||||
request.onsuccess = () => {
|
||||
const db = request.result;
|
||||
db.onversionchange = () => db.close();
|
||||
resolve(db);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function runStoreOperation<T>(
|
||||
mode: IDBTransactionMode,
|
||||
operation: (store: IDBObjectStore) => IDBRequest<T>,
|
||||
): Promise<T> {
|
||||
return openDatabase().then(
|
||||
(db) =>
|
||||
new Promise<T>((resolve, reject) => {
|
||||
const transaction = db.transaction(STORE_NAME, mode);
|
||||
const store = transaction.objectStore(STORE_NAME);
|
||||
let result: T | undefined;
|
||||
let requestError: Error | null = null;
|
||||
|
||||
const request = operation(store);
|
||||
request.onsuccess = () => {
|
||||
result = request.result;
|
||||
};
|
||||
request.onerror = () => {
|
||||
requestError = request.error ?? new Error("IndexedDB 请求失败。");
|
||||
transaction.abort();
|
||||
};
|
||||
|
||||
transaction.oncomplete = () => {
|
||||
db.close();
|
||||
resolve(result as T);
|
||||
};
|
||||
|
||||
transaction.onabort = () => {
|
||||
db.close();
|
||||
reject(requestError ?? transaction.error ?? new Error("IndexedDB 事务已中止。"));
|
||||
};
|
||||
|
||||
transaction.onerror = () => {
|
||||
requestError = requestError ?? transaction.error ?? request.error ?? new Error("IndexedDB 事务失败。");
|
||||
};
|
||||
}),
|
||||
);
|
||||
}
|
||||
514
web/lib/h264.ts
Normal file
514
web/lib/h264.ts
Normal file
@@ -0,0 +1,514 @@
|
||||
export interface H264AccessUnit {
|
||||
type: "key" | "delta";
|
||||
data: Uint8Array;
|
||||
}
|
||||
|
||||
export interface FrameThumb {
|
||||
index: number;
|
||||
src: string;
|
||||
width: number;
|
||||
height: number;
|
||||
timestampUs: number;
|
||||
}
|
||||
|
||||
export interface ParsedH264 {
|
||||
codec: string;
|
||||
description: Uint8Array;
|
||||
accessUnits: H264AccessUnit[];
|
||||
frameCount: number;
|
||||
keyFrameCount: number;
|
||||
}
|
||||
|
||||
export interface H264DecoderConfig {
|
||||
codec: string;
|
||||
description: Uint8Array;
|
||||
}
|
||||
|
||||
export interface H264StreamChunk {
|
||||
accessUnits: H264AccessUnit[];
|
||||
config?: H264DecoderConfig;
|
||||
frameCount: number;
|
||||
keyFrameCount: number;
|
||||
bufferedBytes: number;
|
||||
done: boolean;
|
||||
}
|
||||
|
||||
interface RawNalUnit {
|
||||
type: number;
|
||||
data: Uint8Array;
|
||||
}
|
||||
|
||||
export function parseH264AnnexB(bytes: Uint8Array): ParsedH264 {
|
||||
const parser = new H264AnnexBStreamParser();
|
||||
const first = parser.push(bytes);
|
||||
const last = parser.flush();
|
||||
const accessUnits = [...first.accessUnits, ...last.accessUnits];
|
||||
const config = first.config ?? last.config;
|
||||
|
||||
if (!config) {
|
||||
throw new Error("没有找到 SPS / PPS，无法配置 WebCodecs 解码器。");
|
||||
}
|
||||
|
||||
const codec = config.codec;
|
||||
const description = config.description;
|
||||
const keyFrameCount = accessUnits.filter((unit) => unit.type === "key").length;
|
||||
|
||||
return {
|
||||
codec,
|
||||
description,
|
||||
accessUnits,
|
||||
frameCount: accessUnits.length,
|
||||
keyFrameCount,
|
||||
};
|
||||
}
|
||||
|
||||
export class H264AnnexBStreamParser {
|
||||
private buffer: Uint8Array<ArrayBufferLike> = new Uint8Array(0);
|
||||
private spsUnits: Uint8Array[] = [];
|
||||
private ppsUnits: Uint8Array[] = [];
|
||||
private currentSlices: Uint8Array[] = [];
|
||||
private currentIsKey = false;
|
||||
private currentHasVcl = false;
|
||||
private frameCount = 0;
|
||||
private keyFrameCount = 0;
|
||||
private config: H264DecoderConfig | null = null;
|
||||
private configSignature = "";
|
||||
|
||||
push(chunk: Uint8Array): H264StreamChunk {
|
||||
this.append(chunk);
|
||||
return this.drain(false);
|
||||
}
|
||||
|
||||
flush(): H264StreamChunk {
|
||||
return this.drain(true);
|
||||
}
|
||||
|
||||
private append(chunk: Uint8Array) {
|
||||
if (chunk.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const merged = new Uint8Array(this.buffer.length + chunk.length);
|
||||
merged.set(this.buffer, 0);
|
||||
merged.set(chunk, this.buffer.length);
|
||||
this.buffer = merged;
|
||||
}
|
||||
|
||||
private drain(final: boolean): H264StreamChunk {
|
||||
const accessUnits: H264AccessUnit[] = [];
|
||||
|
||||
while (true) {
|
||||
const starts = findStartCodes(this.buffer);
|
||||
|
||||
if (starts.length === 0) {
|
||||
this.buffer = final ? new Uint8Array(0) : keepTail(this.buffer);
|
||||
break;
|
||||
}
|
||||
|
||||
if (starts[0].index > 0) {
|
||||
this.buffer = this.buffer.slice(starts[0].index);
|
||||
continue;
|
||||
}
|
||||
|
||||
const processCount = final ? starts.length : starts.length - 1;
|
||||
if (processCount <= 0) {
|
||||
break;
|
||||
}
|
||||
|
||||
for (let index = 0; index < processCount; index += 1) {
|
||||
const start = starts[index];
|
||||
const next = starts[index + 1];
|
||||
const nalStart = start.index + start.length;
|
||||
const nalEnd = next ? next.index : this.buffer.length;
|
||||
|
||||
if (nalEnd <= nalStart) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const nal = {
|
||||
type: this.buffer[nalStart] & 0x1f,
|
||||
data: copyBytes(this.buffer.subarray(nalStart, nalEnd)),
|
||||
};
|
||||
|
||||
const flushed = this.processNal(nal);
|
||||
if (flushed) {
|
||||
accessUnits.push(flushed);
|
||||
}
|
||||
}
|
||||
|
||||
if (final) {
|
||||
this.buffer = new Uint8Array(0);
|
||||
break;
|
||||
}
|
||||
|
||||
this.buffer = this.buffer.slice(starts[processCount].index);
|
||||
}
|
||||
|
||||
const finalAccessUnit = final ? this.flushCurrentAccessUnit() : null;
|
||||
if (finalAccessUnit) {
|
||||
accessUnits.push(finalAccessUnit);
|
||||
}
|
||||
|
||||
const config = this.ensureConfig();
|
||||
|
||||
return {
|
||||
accessUnits,
|
||||
config: config ?? undefined,
|
||||
frameCount: this.frameCount,
|
||||
keyFrameCount: this.keyFrameCount,
|
||||
bufferedBytes: this.buffer.length,
|
||||
done: final && this.buffer.length === 0,
|
||||
};
|
||||
}
|
||||
|
||||
private processNal(nal: RawNalUnit): H264AccessUnit | null {
|
||||
if (nal.type === 7) {
|
||||
if (!containsBytes(this.spsUnits, nal.data)) {
|
||||
this.spsUnits.push(nal.data);
|
||||
this.configSignature = "";
|
||||
this.config = null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
if (nal.type === 8) {
|
||||
if (!containsBytes(this.ppsUnits, nal.data)) {
|
||||
this.ppsUnits.push(nal.data);
|
||||
this.configSignature = "";
|
||||
this.config = null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
if (nal.type !== 1 && nal.type !== 5) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const firstMbInSlice = readFirstMbInSlice(nal.data);
|
||||
if (firstMbInSlice === 0 && this.currentHasVcl) {
|
||||
const flushed = this.flushCurrentAccessUnit();
|
||||
this.currentSlices = [nal.data];
|
||||
this.currentHasVcl = true;
|
||||
this.currentIsKey = nal.type === 5;
|
||||
return flushed;
|
||||
}
|
||||
|
||||
this.currentSlices.push(nal.data);
|
||||
this.currentHasVcl = true;
|
||||
this.currentIsKey = this.currentIsKey || nal.type === 5;
|
||||
return null;
|
||||
}
|
||||
|
||||
private flushCurrentAccessUnit(): H264AccessUnit | null {
|
||||
if (this.currentSlices.length === 0) {
|
||||
this.currentHasVcl = false;
|
||||
this.currentIsKey = false;
|
||||
return null;
|
||||
}
|
||||
|
||||
const accessUnit: H264AccessUnit = {
|
||||
type: this.currentIsKey ? "key" : "delta",
|
||||
data: concatNalPayloads(this.currentSlices),
|
||||
};
|
||||
|
||||
this.frameCount += 1;
|
||||
if (accessUnit.type === "key") {
|
||||
this.keyFrameCount += 1;
|
||||
}
|
||||
|
||||
this.currentSlices = [];
|
||||
this.currentHasVcl = false;
|
||||
this.currentIsKey = false;
|
||||
return accessUnit;
|
||||
}
|
||||
|
||||
private ensureConfig(): H264DecoderConfig | null {
|
||||
if (this.spsUnits.length === 0 || this.ppsUnits.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const signature = `${this.spsUnits.map(bytesToHex).join("|")}::${this.ppsUnits
|
||||
.map(bytesToHex)
|
||||
.join("|")}`;
|
||||
if (this.config && this.configSignature === signature) {
|
||||
return this.config;
|
||||
}
|
||||
|
||||
this.config = {
|
||||
codec: codecStringFromSps(this.spsUnits[0]),
|
||||
description: buildAvcDecoderConfigRecord(this.spsUnits, this.ppsUnits),
|
||||
};
|
||||
this.configSignature = signature;
|
||||
return this.config;
|
||||
}
|
||||
}
|
||||
|
||||
function findStartCodes(bytes: Uint8Array): Array<{ index: number; length: number }> {
|
||||
const starts: Array<{ index: number; length: number }> = [];
|
||||
|
||||
for (let index = 0; index < bytes.length - 3; index += 1) {
|
||||
if (bytes[index] !== 0 || bytes[index + 1] !== 0) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (bytes[index + 2] === 1) {
|
||||
starts.push({ index, length: 3 });
|
||||
index += 2;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (index < bytes.length - 4 && bytes[index + 2] === 0 && bytes[index + 3] === 1) {
|
||||
starts.push({ index, length: 4 });
|
||||
index += 3;
|
||||
}
|
||||
}
|
||||
|
||||
return starts;
|
||||
}
|
||||
|
||||
function keepTail(bytes: Uint8Array): Uint8Array {
|
||||
if (bytes.length <= 3) {
|
||||
return bytes.slice();
|
||||
}
|
||||
|
||||
return bytes.slice(bytes.length - 3);
|
||||
}
|
||||
|
||||
function extractNalUnits(bytes: Uint8Array): RawNalUnit[] {
|
||||
const starts: Array<{ index: number; length: number }> = [];
|
||||
|
||||
for (let index = 0; index < bytes.length - 3; index += 1) {
|
||||
if (bytes[index] !== 0 || bytes[index + 1] !== 0) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (bytes[index + 2] === 1) {
|
||||
starts.push({ index, length: 3 });
|
||||
index += 2;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (index < bytes.length - 4 && bytes[index + 2] === 0 && bytes[index + 3] === 1) {
|
||||
starts.push({ index, length: 4 });
|
||||
index += 3;
|
||||
}
|
||||
}
|
||||
|
||||
if (starts.length === 0) {
|
||||
throw new Error("没有找到 Annex-B start code。");
|
||||
}
|
||||
|
||||
const nalUnits: RawNalUnit[] = [];
|
||||
|
||||
for (let i = 0; i < starts.length; i += 1) {
|
||||
const start = starts[i];
|
||||
const next = starts[i + 1];
|
||||
const nalStart = start.index + start.length;
|
||||
const nalEnd = next ? next.index : bytes.length;
|
||||
|
||||
if (nalEnd <= nalStart) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const data = bytes.subarray(nalStart, nalEnd);
|
||||
nalUnits.push({
|
||||
type: data[0] & 0x1f,
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
return nalUnits;
|
||||
}
|
||||
|
||||
function readFirstMbInSlice(nalData: Uint8Array): number {
|
||||
if (nalData.length < 2) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const rbsp = removeEmulationPreventionBytes(nalData.subarray(1));
|
||||
const reader = new BitReader(rbsp);
|
||||
return reader.readUE();
|
||||
}
|
||||
|
||||
function codecStringFromSps(sps: Uint8Array): string {
|
||||
if (sps.length < 4) {
|
||||
throw new Error("SPS 长度不足，无法生成 codec 字符串。");
|
||||
}
|
||||
|
||||
const profile = sps[1].toString(16).padStart(2, "0");
|
||||
const compatibility = sps[2].toString(16).padStart(2, "0");
|
||||
const level = sps[3].toString(16).padStart(2, "0");
|
||||
|
||||
return `avc1.${profile}${compatibility}${level}`;
|
||||
}
|
||||
|
||||
function buildAvcDecoderConfigRecord(
|
||||
spsUnits: Uint8Array[],
|
||||
ppsUnits: Uint8Array[],
|
||||
): Uint8Array {
|
||||
const spsList = uniqueByContent(spsUnits);
|
||||
const ppsList = uniqueByContent(ppsUnits);
|
||||
|
||||
let size = 7;
|
||||
for (const sps of spsList) {
|
||||
size += 2 + sps.length;
|
||||
}
|
||||
size += 1;
|
||||
for (const pps of ppsList) {
|
||||
size += 2 + pps.length;
|
||||
}
|
||||
|
||||
const record = new Uint8Array(size);
|
||||
let offset = 0;
|
||||
|
||||
record[offset++] = 1;
|
||||
record[offset++] = spsList[0][1];
|
||||
record[offset++] = spsList[0][2];
|
||||
record[offset++] = spsList[0][3];
|
||||
record[offset++] = 0xff;
|
||||
record[offset++] = 0xe0 | spsList.length;
|
||||
|
||||
for (const sps of spsList) {
|
||||
writeUint16(record, offset, sps.length);
|
||||
offset += 2;
|
||||
record.set(sps, offset);
|
||||
offset += sps.length;
|
||||
}
|
||||
|
||||
record[offset++] = ppsList.length;
|
||||
|
||||
for (const pps of ppsList) {
|
||||
writeUint16(record, offset, pps.length);
|
||||
offset += 2;
|
||||
record.set(pps, offset);
|
||||
offset += pps.length;
|
||||
}
|
||||
|
||||
return record;
|
||||
}
|
||||
|
||||
function concatNalPayloads(units: Uint8Array[]): Uint8Array {
|
||||
let size = 0;
|
||||
for (const unit of units) {
|
||||
size += 4 + unit.length;
|
||||
}
|
||||
|
||||
const output = new Uint8Array(size);
|
||||
let offset = 0;
|
||||
|
||||
for (const unit of units) {
|
||||
writeUint32(output, offset, unit.length);
|
||||
offset += 4;
|
||||
output.set(unit, offset);
|
||||
offset += unit.length;
|
||||
}
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
function removeEmulationPreventionBytes(data: Uint8Array): Uint8Array {
|
||||
const output: number[] = [];
|
||||
let zeroCount = 0;
|
||||
|
||||
for (const byte of data) {
|
||||
if (zeroCount >= 2 && byte === 0x03) {
|
||||
zeroCount = 0;
|
||||
continue;
|
||||
}
|
||||
|
||||
output.push(byte);
|
||||
zeroCount = byte === 0x00 ? zeroCount + 1 : 0;
|
||||
}
|
||||
|
||||
return Uint8Array.from(output);
|
||||
}
|
||||
|
||||
function uniqueByContent(units: Uint8Array[]): Uint8Array[] {
|
||||
const seen = new Set<string>();
|
||||
const result: Uint8Array[] = [];
|
||||
|
||||
for (const unit of units) {
|
||||
const key = bytesToHex(unit);
|
||||
if (seen.has(key)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
seen.add(key);
|
||||
result.push(unit);
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
function containsBytes(units: Uint8Array[], candidate: Uint8Array): boolean {
|
||||
const candidateKey = bytesToHex(candidate);
|
||||
return units.some((unit) => bytesToHex(unit) === candidateKey);
|
||||
}
|
||||
|
||||
function copyBytes(bytes: Uint8Array): Uint8Array {
|
||||
return bytes.slice();
|
||||
}
|
||||
|
||||
function bytesToHex(bytes: Uint8Array): string {
|
||||
let output = "";
|
||||
for (const byte of bytes) {
|
||||
output += byte.toString(16).padStart(2, "0");
|
||||
}
|
||||
return output;
|
||||
}
|
||||
|
||||
function writeUint16(target: Uint8Array, offset: number, value: number) {
|
||||
target[offset] = (value >> 8) & 0xff;
|
||||
target[offset + 1] = value & 0xff;
|
||||
}
|
||||
|
||||
function writeUint32(target: Uint8Array, offset: number, value: number) {
|
||||
target[offset] = (value >>> 24) & 0xff;
|
||||
target[offset + 1] = (value >>> 16) & 0xff;
|
||||
target[offset + 2] = (value >>> 8) & 0xff;
|
||||
target[offset + 3] = value & 0xff;
|
||||
}
|
||||
|
||||
class BitReader {
|
||||
private readonly data: Uint8Array;
|
||||
private byteIndex = 0;
|
||||
private bitIndex = 7;
|
||||
|
||||
constructor(data: Uint8Array) {
|
||||
this.data = data;
|
||||
}
|
||||
|
||||
readBit(): number {
|
||||
if (this.byteIndex >= this.data.length) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const bit = (this.data[this.byteIndex] >> this.bitIndex) & 1;
|
||||
this.bitIndex -= 1;
|
||||
|
||||
if (this.bitIndex < 0) {
|
||||
this.bitIndex = 7;
|
||||
this.byteIndex += 1;
|
||||
}
|
||||
|
||||
return bit;
|
||||
}
|
||||
|
||||
readBits(count: number): number {
|
||||
let value = 0;
|
||||
for (let index = 0; index < count; index += 1) {
|
||||
value = (value << 1) | this.readBit();
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
readUE(): number {
|
||||
let zeroCount = 0;
|
||||
while (this.readBit() === 0 && zeroCount < 31) {
|
||||
zeroCount += 1;
|
||||
}
|
||||
|
||||
const suffix = zeroCount > 0 ? this.readBits(zeroCount) : 0;
|
||||
return (1 << zeroCount) - 1 + suffix;
|
||||
}
|
||||
}
|
||||
45
web/lib/video-cache.ts
Normal file
45
web/lib/video-cache.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
const CACHE_NAME = "video-process-h264-v1";
|
||||
|
||||
export async function openCachedVideoResponse(
|
||||
url: string,
|
||||
signal: AbortSignal,
|
||||
): Promise<{ response: Response; cacheState: "hit" | "miss" }> {
|
||||
if (typeof caches !== "undefined") {
|
||||
const cache = await caches.open(CACHE_NAME);
|
||||
const cached = await cache.match(url);
|
||||
if (cached) {
|
||||
return { response: cached, cacheState: "hit" };
|
||||
}
|
||||
}
|
||||
|
||||
const response = await fetch(url, {
|
||||
signal,
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`请求失败：${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
if (typeof caches !== "undefined") {
|
||||
const cache = await caches.open(CACHE_NAME);
|
||||
cache.put(url, response.clone()).catch(() => {
|
||||
// Cache Storage is best-effort.
|
||||
});
|
||||
}
|
||||
|
||||
return { response, cacheState: "miss" };
|
||||
}
|
||||
|
||||
export async function clearCachedVideoResponse(url: string): Promise<void> {
|
||||
if (typeof caches === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const cache = await caches.open(CACHE_NAME);
|
||||
await cache.delete(url);
|
||||
} catch {
|
||||
// Cache Storage is best-effort.
|
||||
}
|
||||
}
|
||||
5
web/next-env.d.ts
vendored
Normal file
5
web/next-env.d.ts
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
|
||||
6
web/next.config.mjs
Normal file
6
web/next.config.mjs
Normal file
@@ -0,0 +1,6 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
reactStrictMode: true,
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
496
web/package-lock.json
generated
Normal file
496
web/package-lock.json
generated
Normal file
@@ -0,0 +1,496 @@
|
||||
{
|
||||
"name": "video-frame-viewer",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "video-frame-viewer",
|
||||
"dependencies": {
|
||||
"next": "^14.2.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.14.0",
|
||||
"@types/react": "^18.3.0",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"typescript": "^5.5.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/env": {
|
||||
"version": "14.2.35",
|
||||
"resolved": "https://registry.npmmirror.com/@next/env/-/env-14.2.35.tgz",
|
||||
"integrity": "sha512-DuhvCtj4t9Gwrx80dmz2F4t/zKQ4ktN8WrMwOuVzkJfBilwAwGr6v16M5eI8yCuZ63H9TTuEU09Iu2HqkzFPVQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@next/swc-darwin-arm64": {
|
||||
"version": "14.2.33",
|
||||
"resolved": "https://registry.npmmirror.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.33.tgz",
|
||||
"integrity": "sha512-HqYnb6pxlsshoSTubdXKu15g3iivcbsMXg4bYpjL2iS/V6aQot+iyF4BUc2qA/J/n55YtvE4PHMKWBKGCF/+wA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-darwin-x64": {
|
||||
"version": "14.2.33",
|
||||
"resolved": "https://registry.npmmirror.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.33.tgz",
|
||||
"integrity": "sha512-8HGBeAE5rX3jzKvF593XTTFg3gxeU4f+UWnswa6JPhzaR6+zblO5+fjltJWIZc4aUalqTclvN2QtTC37LxvZAA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-arm64-gnu": {
|
||||
"version": "14.2.33",
|
||||
"resolved": "https://registry.npmmirror.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.33.tgz",
|
||||
"integrity": "sha512-JXMBka6lNNmqbkvcTtaX8Gu5by9547bukHQvPoLe9VRBx1gHwzf5tdt4AaezW85HAB3pikcvyqBToRTDA4DeLw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-arm64-musl": {
|
||||
"version": "14.2.33",
|
||||
"resolved": "https://registry.npmmirror.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.33.tgz",
|
||||
"integrity": "sha512-Bm+QulsAItD/x6Ih8wGIMfRJy4G73tu1HJsrccPW6AfqdZd0Sfm5Imhgkgq2+kly065rYMnCOxTBvmvFY1BKfg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-x64-gnu": {
|
||||
"version": "14.2.33",
|
||||
"resolved": "https://registry.npmmirror.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.33.tgz",
|
||||
"integrity": "sha512-FnFn+ZBgsVMbGDsTqo8zsnRzydvsGV8vfiWwUo1LD8FTmPTdV+otGSWKc4LJec0oSexFnCYVO4hX8P8qQKaSlg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-x64-musl": {
|
||||
"version": "14.2.33",
|
||||
"resolved": "https://registry.npmmirror.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.33.tgz",
|
||||
"integrity": "sha512-345tsIWMzoXaQndUTDv1qypDRiebFxGYx9pYkhwY4hBRaOLt8UGfiWKr9FSSHs25dFIf8ZqIFaPdy5MljdoawA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-win32-arm64-msvc": {
|
||||
"version": "14.2.33",
|
||||
"resolved": "https://registry.npmmirror.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.33.tgz",
|
||||
"integrity": "sha512-nscpt0G6UCTkrT2ppnJnFsYbPDQwmum4GNXYTeoTIdsmMydSKFz9Iny2jpaRupTb+Wl298+Rh82WKzt9LCcqSQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-win32-ia32-msvc": {
|
||||
"version": "14.2.33",
|
||||
"resolved": "https://registry.npmmirror.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.33.tgz",
|
||||
"integrity": "sha512-pc9LpGNKhJ0dXQhZ5QMmYxtARwwmWLpeocFmVG5Z0DzWq5Uf0izcI8tLc+qOpqxO1PWqZ5A7J1blrUIKrIFc7Q==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-win32-x64-msvc": {
|
||||
"version": "14.2.33",
|
||||
"resolved": "https://registry.npmmirror.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.33.tgz",
|
||||
"integrity": "sha512-nOjfZMy8B94MdisuzZo9/57xuFVLHJaDj5e/xrduJp9CV2/HrfxTRH2fbyLe+K9QT41WBLUd4iXX3R7jBp0EUg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@swc/counter": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/@swc/counter/-/counter-0.1.3.tgz",
|
||||
"integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/@swc/helpers": {
|
||||
"version": "0.5.5",
|
||||
"resolved": "https://registry.npmmirror.com/@swc/helpers/-/helpers-0.5.5.tgz",
|
||||
"integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@swc/counter": "^0.1.3",
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "20.19.41",
|
||||
"resolved": "https://registry.npmmirror.com/@types/node/-/node-20.19.41.tgz",
|
||||
"integrity": "sha512-ECymXOukMnOoVkC2bb1Vc/w/836DXncOg5m8Xj1RH7xSHZJWNYY6Zh7EH477vcnD5egKNNfy2RpNOmuChhFPgQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"undici-types": "~6.21.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.15",
|
||||
"resolved": "https://registry.npmmirror.com/@types/prop-types/-/prop-types-15.7.15.tgz",
|
||||
"integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "18.3.28",
|
||||
"resolved": "https://registry.npmmirror.com/@types/react/-/react-18.3.28.tgz",
|
||||
"integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
"csstype": "^3.2.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-dom": {
|
||||
"version": "18.3.7",
|
||||
"resolved": "https://registry.npmmirror.com/@types/react-dom/-/react-dom-18.3.7.tgz",
|
||||
"integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/busboy": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmmirror.com/busboy/-/busboy-1.6.0.tgz",
|
||||
"integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
|
||||
"dependencies": {
|
||||
"streamsearch": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.16.0"
|
||||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001793",
|
||||
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001793.tgz",
|
||||
"integrity": "sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/browserslist"
|
||||
},
|
||||
{
|
||||
"type": "tidelift",
|
||||
"url": "https://tidelift.com/funding/github/npm/caniuse-lite"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "CC-BY-4.0"
|
||||
},
|
||||
"node_modules/client-only": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/client-only/-/client-only-0.0.1.tgz",
|
||||
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/csstype": {
|
||||
"version": "3.2.3",
|
||||
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz",
|
||||
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/graceful-fs": {
|
||||
"version": "4.2.11",
|
||||
"resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
|
||||
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"loose-envify": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.12",
|
||||
"resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.12.tgz",
|
||||
"integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"nanoid": "bin/nanoid.cjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/next": {
|
||||
"version": "14.2.35",
|
||||
"resolved": "https://registry.npmmirror.com/next/-/next-14.2.35.tgz",
|
||||
"integrity": "sha512-KhYd2Hjt/O1/1aZVX3dCwGXM1QmOV4eNM2UTacK5gipDdPN/oHHK/4oVGy7X8GMfPMsUTUEmGlsy0EY1YGAkig==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@next/env": "14.2.35",
|
||||
"@swc/helpers": "0.5.5",
|
||||
"busboy": "1.6.0",
|
||||
"caniuse-lite": "^1.0.30001579",
|
||||
"graceful-fs": "^4.2.11",
|
||||
"postcss": "8.4.31",
|
||||
"styled-jsx": "5.1.1"
|
||||
},
|
||||
"bin": {
|
||||
"next": "dist/bin/next"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.17.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@next/swc-darwin-arm64": "14.2.33",
|
||||
"@next/swc-darwin-x64": "14.2.33",
|
||||
"@next/swc-linux-arm64-gnu": "14.2.33",
|
||||
"@next/swc-linux-arm64-musl": "14.2.33",
|
||||
"@next/swc-linux-x64-gnu": "14.2.33",
|
||||
"@next/swc-linux-x64-musl": "14.2.33",
|
||||
"@next/swc-win32-arm64-msvc": "14.2.33",
|
||||
"@next/swc-win32-ia32-msvc": "14.2.33",
|
||||
"@next/swc-win32-x64-msvc": "14.2.33"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@opentelemetry/api": "^1.1.0",
|
||||
"@playwright/test": "^1.41.2",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"sass": "^1.3.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@opentelemetry/api": {
|
||||
"optional": true
|
||||
},
|
||||
"@playwright/test": {
|
||||
"optional": true
|
||||
},
|
||||
"sass": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/picocolors": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
|
||||
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.4.31",
|
||||
"resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz",
|
||||
"integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/postcss/"
|
||||
},
|
||||
{
|
||||
"type": "tidelift",
|
||||
"url": "https://tidelift.com/funding/github/npm/postcss"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.6",
|
||||
"picocolors": "^1.0.0",
|
||||
"source-map-js": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/react/-/react-18.3.1.tgz",
|
||||
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/react-dom/-/react-dom-18.3.1.tgz",
|
||||
"integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"scheduler": "^0.23.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/scheduler": {
|
||||
"version": "0.23.2",
|
||||
"resolved": "https://registry.npmmirror.com/scheduler/-/scheduler-0.23.2.tgz",
|
||||
"integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/streamsearch": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/streamsearch/-/streamsearch-1.1.0.tgz",
|
||||
"integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/styled-jsx": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/styled-jsx/-/styled-jsx-5.1.1.tgz",
|
||||
"integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"client-only": "0.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@babel/core": {
|
||||
"optional": true
|
||||
},
|
||||
"babel-plugin-macros": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "5.9.3",
|
||||
"resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.9.3.tgz",
|
||||
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/undici-types": {
|
||||
"version": "6.21.0",
|
||||
"resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-6.21.0.tgz",
|
||||
"integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
}
|
||||
}
|
||||
}
|
||||
20
web/package.json
Normal file
20
web/package.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "video-frame-viewer",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "^14.2.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.14.0",
|
||||
"@types/react": "^18.3.0",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"typescript": "^5.5.4"
|
||||
}
|
||||
}
|
||||
41
web/tsconfig.json
Normal file
41
web/tsconfig.json
Normal file
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./*"
|
||||
]
|
||||
},
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user