@orderg-x/dsh-video-preview 0.5.0 → 0.5.1

package/lib/index.js

@@ -551,7 +551,7 @@ export function lookTool(ctx, getBrowser) {
   return defineTool({
     name: 'look_video',
     description:
-      '看一个本地视频（或音频）的内容：在电脑上用看不见的 Chrome / Edge 打开，按时间取几帧拼成一张图交给你（每格左上角标了时间），' +
+      '看一个本地视频（或音频）的内容：在电脑上用看不见的 Chrome / Edge 打开，按时间取几帧拼成一张图交给你（每格上方标了时间），' +
       '再量声音（有没有声、多大、哪段没声、有没有爆音、是不是只有一边有声），顺便查手机上能不能放（编码、文件头位置）。' +
       '你做完、改完视频（录屏、剪辑、转码、配音、合成动画）后，交给用户之前先用它看一眼；用户说视频「不对」「黑屏」「没声音」「手机放不了」时也用它。' +
       `at 给几个时间点（如 ["0:12", "1:05"]，最多 ${MAX_AT} 个）看那几刻的大图；from / to 只看一段；frames 改取几帧（最多 ${MAX_FRAMES}）。` +

package/lib/look.js

@@ -103,21 +103,24 @@ export function pageTools() {
   }
   const luma = (d, i) => d[i] * 0.2126 + d[i + 1] * 0.7152 + d[i + 2] * 0.0722
   /**
-   * 一帧的亮度、反差、亮着的点占多少（千分之几，160×90 上数，黑底上的字也数得到），
-   * 和一个 16×9 的灰度指纹（比前后帧是不是一样）
+   * 一帧的亮度、反差（16×9 上算）、亮着的点占多少（千分之几，160×90 上数，黑底上的字也数得到），
+   * 和一个 64×36 的灰度指纹（比前后帧是不是一样：录屏里只有一小块在变也看得出来）
    */
-  function stats(sg, mg) {
+  function stats(sg, mg, fg) {
     const d = sg.getImageData(0, 0, 16, 9).data
-    const fp = []
     let sum = 0
-    for (let i = 0; i < d.length; i += 4) { const y = luma(d, i); fp.push(Math.round(y)); sum += y }
-    const mean = sum / fp.length
+    const ys = []
+    for (let i = 0; i < d.length; i += 4) { const y = luma(d, i); ys.push(y); sum += y }
+    const mean = sum / ys.length
     let sq = 0
-    for (const y of fp) sq += (y - mean) * (y - mean)
+    for (const y of ys) sq += (y - mean) * (y - mean)
     const m = mg.getImageData(0, 0, 160, 90).data
     let lit = 0
     for (let i = 0; i < m.length; i += 4) if (luma(m, i) > 48) lit++
-    return { y: Math.round(mean), sd: Math.round(Math.sqrt(sq / fp.length)), lit: Math.round((lit / (m.length / 4)) * 10000) / 10, fp }
+    const f = fg.getImageData(0, 0, 64, 36).data
+    const fp = []
+    for (let i = 0; i < f.length; i += 4) fp.push(Math.round(luma(f, i)))
+    return { y: Math.round(mean), sd: Math.round(Math.sqrt(sq / ys.length)), lit: Math.round((lit / (m.length / 4)) * 10000) / 10, fp }
   }
   function label(g, text, x, y, size) {
     g.font = `600 ${size}px -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif`
@@ -132,7 +135,7 @@ export function pageTools() {
     g.fillText(text, x + size * 0.4, y + h / 2)
   }
   /**
-   * 取帧。sheet：拼成一张（cols 列、每格 cw×ch，左上角标时间）；否则每帧一张大图（长边 edge）。
+   * 取帧。sheet：拼成一张（cols 列、每格 cw×ch，上面一条 lh 高写时间）；否则每帧一张大图（长边 edge）。
    * 返回 { jpgs: [base64…], stats: [{ t, y, sd, lit, fp, ok }] }
    */
   async function frames(times, labels, o) {
@@ -146,13 +149,17 @@ export function pageTools() {
     mid.width = 160
     mid.height = 90
     const mg = mid.getContext('2d', { willReadFrequently: true })
+    const fpc = document.createElement('canvas')
+    fpc.width = 64
+    fpc.height = 36
+    const fg = fpc.getContext('2d', { willReadFrequently: true })
     const out = { jpgs: [], stats: [] }
     let sheet = null
     let g = null
     if (o.sheet) {
       sheet = document.createElement('canvas')
       sheet.width = o.cols * o.cw + (o.cols + 1) * o.gap
-      sheet.height = Math.ceil(times.length / o.cols) * o.ch + (Math.ceil(times.length / o.cols) + 1) * o.gap
+      sheet.height = Math.ceil(times.length / o.cols) * (o.ch + o.lh) + (Math.ceil(times.length / o.cols) + 1) * o.gap
       g = sheet.getContext('2d')
       g.fillStyle = '#1b1d22'
       g.fillRect(0, 0, sheet.width, sheet.height)
@@ -161,12 +168,16 @@ export function pageTools() {
       const ok = await seek(times[i])
       sg.drawImage(v, 0, 0, 16, 9)
       mg.drawImage(v, 0, 0, 160, 90)
-      out.stats.push({ t: times[i], ok, ...stats(sg, mg) })
+      fg.drawImage(v, 0, 0, 64, 36)
+      out.stats.push({ t: times[i], ok, ...stats(sg, mg, fg) })
       if (sheet) {
         const x = o.gap + (i % o.cols) * (o.cw + o.gap)
-        const y = o.gap + Math.floor(i / o.cols) * (o.ch + o.gap)
-        g.drawImage(v, x, y, o.cw, o.ch)
-        label(g, labels[i], x + 6, y + 6, Math.max(13, Math.round(o.cw / 18)))
+        const y = o.gap + Math.floor(i / o.cols) * (o.ch + o.lh + o.gap)
+        g.font = `600 ${o.fs}px -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif`
+        g.fillStyle = '#e6e6e6'
+        g.textBaseline = 'middle'
+        g.fillText(labels[i], x + 2, y + o.lh / 2)
+        g.drawImage(v, x, y + o.lh, o.cw, o.ch)
       } else {
         const k = Math.min(1, o.edge / Math.max(W, H))
         const c = document.createElement('canvas')
@@ -229,13 +240,16 @@ export function sheetLayout(w, h, n) {
   const gap = 8
   let cw = Math.floor((SHEET_W - (cols + 1) * gap) / cols)
   let ch = Math.round((cw * (h || 9)) / (w || 16))
-  const tall = rows * ch + (rows + 1) * gap
+  // 每格上面留一条写时间，不盖住画面左上角（标题常在那）
+  const fs = Math.max(13, Math.round(cw / 18))
+  const lh = Math.round(fs * 1.6)
+  const tall = rows * (ch + lh) + (rows + 1) * gap
   if (tall > 1568) {
-    const k = (1568 - (rows + 1) * gap) / (rows * ch)
+    const k = (1568 - (rows + 1) * gap - rows * lh) / (rows * ch)
     cw = Math.floor(cw * k)
     ch = Math.floor(ch * k)
   }
-  return { cols, cw, ch, gap }
+  return { cols, cw, ch, gap, fs, lh }
 }
 
 /**
@@ -343,9 +357,11 @@ export function audioFindings(a, { duration, short = false } = {}) {
 
 const BLACK_Y = 16 // 平均亮度
 const BLACK_LIT = 3 // 亮着的点不到千分之三（黑底上有字、有画面的不算黑屏；只有鼠标指针的还算）
-const SAME = 2.5 // 两帧指纹平均差多少以内算一样
+const CELL_DIFF = 8 // 指纹里一格亮度差这么多才算变了（压缩噪点不算）
 
-const fpDiff = (a, b) => a.reduce((s, x, i) => s + Math.abs(x - b[i]), 0) / a.length
+/** 两帧指纹里变了的格子：64×36 里不超过 2 格（闪烁的光标、一点噪点）算一样 */
+const changed = (a, b) => a.reduce((n, x, i) => n + (Math.abs(x - b[i]) > CELL_DIFF ? 1 : 0), 0)
+const same = (a, b) => changed(a, b) <= Math.max(2, a.length * 0.001)
 
 /** 取到的帧 → 问题：黑屏、画面一直没变 */
 export function frameFindings(stats, { duration, short = false, sheet = true } = {}) {
@@ -368,13 +384,13 @@ export function frameFindings(stats, { duration, short = false, sheet = true } =
     if (last && sheet) issues.push({ level: 'warn', text: `最后一帧（${t(stats[stats.length - 1].t)}）是黑的：结尾可能多了一段黑屏` })
   }
   if (sheet && stats.length >= 3 && duration > 2) {
-    const same = stats.slice(1).every((s, i) => fpDiff(s.fp, stats[i].fp) <= SAME)
-    if (same) issues.push({ level: 'warn', text: `取的 ${stats.length} 帧几乎一模一样：整段画面可能没动（录屏卡住了、录到了静止的窗口）；要是本来就是静态画面就没事` })
+    const allSame = stats.slice(1).every((s, i) => same(s.fp, stats[i].fp))
+    if (allSame) issues.push({ level: 'warn', text: `取的 ${stats.length} 帧几乎一模一样：整段画面可能没动（录屏卡住了、录到了静止的窗口）；要是本来就是静态画面就没事` })
     else {
       // 连着好几格一样，而且占了一大段
       let s = 0
       for (let i = 1; i <= stats.length; i++) {
-        const cont = i < stats.length && fpDiff(stats[i].fp, stats[i - 1].fp) <= SAME
+        const cont = i < stats.length && same(stats[i].fp, stats[i - 1].fp)
         if (!cont) {
           if (i - s >= 4 && stats[i - 1].t - stats[s].t >= duration * 0.3) issues.push({ level: 'warn', text: `${t(stats[s].t)}–${t(stats[i - 1].t)} 画面没变（${i - s} 帧一样）：要是本该有动作，可能卡住了` })
           s = i
@@ -427,7 +443,7 @@ export function formatLook({ name, size, probe, res, kind, ext = '', audioSkippe
   }
   if (res && res.jpgs.length) {
     if (res.sheet) {
-      lines.push(`图 1：${res.times.length} 帧，从 ${fmtTime(res.times[0], short)} 到 ${fmtTime(res.times[res.times.length - 1], short)} 均匀取，从左到右、从上到下，每格左上角是时间。`)
+      lines.push(`图 1：${res.times.length} 帧，从 ${fmtTime(res.times[0], short)} 到 ${fmtTime(res.times[res.times.length - 1], short)} 均匀取，从左到右、从上到下，每格上方是时间。`)
     } else {
       res.times.forEach((t, i) => lines.push(`图 ${i + 1}：${fmtTime(t, short)} 那一刻（原画面缩到长边 ${BIG_EDGE} 以内）。`))
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orderg-x/dsh-video-preview",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "type": "module",
   "scripts": {
     "test": "node --test --test-concurrency=1 test/*.mjs"