video2slides: 修缩略图/大图 400 — img 标签带不了头，改用 ?c= query 传 client

apps/video2slides/frontend/index.html

@@ -128,7 +128,7 @@ async function api(path,opts={}){
   const ct=r.headers.get('content-type')||'';
   return ct.includes('json')?r.json():r;
 }
-function imgUrl(vid,kind,idx){return `/api/videos/${vid}/${kind}/${idx}`;}
+function imgUrl(vid,kind,idx){return `/api/videos/${vid}/${kind}/${idx}?c=${encodeURIComponent(CLIENT)}`;}
 const fmtDur=s=>{s=Math.round(s||0);const m=Math.floor(s/60),x=s%60;return `${m}:${String(x).padStart(2,'0')}`;};
 const fmtSize=b=>b>1e9?(b/1e9).toFixed(1)+'G':b>1e6?(b/1e6).toFixed(1)+'M':(b/1e3|0)+'K';
 const fmtT=s=>{s=Math.round(s);const h=Math.floor(s/3600),m=Math.floor(s%3600/60),x=s%60;const p=n=>String(n).padStart(2,'0');return h?`${h}:${p(m)}:${p(x)}`:`${m}:${p(x)}`;};

apps/video2slides/src/handlers.rs

@@ -5,7 +5,7 @@ use std::collections::HashMap;
 use std::path::{Path, PathBuf};
 use std::sync::{Arc, Mutex};
 
-use axum::extract::{Multipart, Path as AxPath, State};
+use axum::extract::{Multipart, Path as AxPath, Query, State};
 use axum::http::{header, HeaderMap, StatusCode};
 use axum::response::{IntoResponse, Response};
 use axum::Json;
@@ -48,6 +48,20 @@ fn client_id(headers: &HeaderMap) -> Result<String, ApiErr> {
         .ok_or_else(|| err(StatusCode::BAD_REQUEST, "缺少 X-Client-Id"))
 }
 
+/// `<img src>` 没法带自定义头，图片接口允许用 `?c=<clientId>` query 传 client，
+/// 兜底再看 header。
+#[derive(Deserialize)]
+pub struct ClientQuery {
+    c: Option<String>,
+}
+
+fn client_from(q: &ClientQuery, headers: &HeaderMap) -> Result<String, ApiErr> {
+    if let Some(c) = q.c.as_ref().filter(|s| !s.is_empty()) {
+        return Ok(c.clone());
+    }
+    client_id(headers)
+}
+
 // ---------------------------------------------------------------------------
 // 上传
 // ---------------------------------------------------------------------------
@@ -272,17 +286,19 @@ async fn serve_img(
 pub async fn thumb(
     State(st): State<AppState>,
     AxPath((vid, idx)): AxPath<(String, u32)>,
+    Query(q): Query<ClientQuery>,
     headers: HeaderMap,
 ) -> Result<Response, ApiErr> {
-    let client = client_id(&headers)?;
+    let client = client_from(&q, &headers)?;
     serve_img(&st, &client, &vid, "thumbs", idx).await
 }
 
 pub async fn frame(
     State(st): State<AppState>,
     AxPath((vid, idx)): AxPath<(String, u32)>,
+    Query(q): Query<ClientQuery>,
     headers: HeaderMap,
 ) -> Result<Response, ApiErr> {
-    let client = client_id(&headers)?;
+    let client = client_from(&q, &headers)?;
     serve_img(&st, &client, &vid, "frames", idx).await
 }