admin/guoju0808
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 本地 Java 发票 OCR + 策划方案多角色开放 + H5 相机脱敏修复

Browse Source 
- OCR: 进程内 PaddleOCR ONNX Runtime 识别替代远程 Python 微服务
  (新增 ocr/core/service/config 引擎, 删 OcrClient/OcrConfig, PDF 文本层优先 + QR 快路径)
- 投稿: 项目设计投稿 → 项目策划方案, doctor/executor/sponsor 三角色开放
  (BizProjectPlan 按非 admin/manager 隔离, 复用 Submissions.vue, 设计文件改 OssFileUploader)
- H5: <video> 去掉 autoplay + safePlay 重试, 穿透 uni-app wrapper 找原生 video
- 脱敏: 签到表高斯模糊由横向条带改为全高竖条带 (20%~50% 宽度)
- 域名: ringdoctor.com → risingdoctor.com
This commit is contained in:
郭庆泰
2026-08-24 19:23:53 +08:00
parent 904e28710f
commit 0c882ae846
36 changed files with 2851 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ry-h5/composables/useCamera.ts
+21 -1
View File
@@ -32,7 +32,27 @@ export function useCamera(videoId: string, blur?: BlurConfig) {
const errorMsg = ref<string>('')
function getVideoEl(): HTMLVideoElement | null {
return document.getElementById(videoId) as HTMLVideoElement | null
const el = document.getElementById(videoId) as HTMLElement | null
if (!el) return null
// uni-app H5 把 <video> 编译成 <uni-video> Vue 组件时, getElementById
// 拿到的是 wrapper, 它的 srcObject setter 会透传给内部原生 <video>,
// 但 readyState / play() 不一定透传. 用 readyState 是否 number 判断是否原生.
if (el.tagName === 'VIDEO' && typeof (el as any).readyState === 'number') {
return el as HTMLVideoElement
}
// wrapper 场景: 内部包了一个原生 <video>
const inner = el.querySelector('video') as HTMLVideoElement | null
if (inner && typeof inner.readyState === 'number') {
console.log('[camera] 穿透 uni-app wrapper, 找到内部原生 <video>')
return inner
}
// 最后一搏: 找页面上第一个原生 <video>
const fallback = document.querySelector('video') as HTMLVideoElement | null
if (fallback) {
console.log('[camera] 全局兜底找到第一个原生 <video>')
return fallback
}
return null
}
async function startCamera() {
ry-h5/pages/panorama/index.uvue
+23 -5
View File
@@ -14,7 +14,6 @@
<video
id="panorama-video"
class="video"
autoplay
muted
playsinline
/>
@@ -279,19 +278,38 @@ function goBack() {
.preview-actions {
display: flex;
flex-direction: row;
justify-content: space-around;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
width: 100%;
padding: 40rpx 60rpx;
padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
}
.preview-btn {
flex: 1;
margin: 0 20rpx;
padding: 24rpx 0;
/* flex item: 在 .preview-actions 里 flex:1 平分宽度 */
flex: 1 1 0%;
min-width: 0;
box-sizing: border-box;
/* flex container: 让内部 <text> 真正居中 */
display: flex;
justify-content: center;
align-items: center;
/* 重置浏览器 / uni-app H5 给 <button> 的默认外观 (边框/appearance 是按钮不对称的常见根因) */
margin: 0 16rpx;
padding: 0;
border: none;
outline: none;
appearance: none;
-webkit-appearance: none;
border-radius: 48rpx;
font-size: 30rpx;
font-weight: bold;
line-height: 1;
min-height: 88rpx;
}
.preview-btn-cancel {
ry-h5/pages/signin/index.uvue
+24 -6
View File
@@ -14,7 +14,6 @@
<video
id="signin-video"
class="video"
autoplay
muted
playsinline
/>
@@ -67,7 +66,7 @@
import { useCamera } from '@/composables/useCamera'
const videoId = 'signin-video'
// A4 纸 20%~50% 区间 (签到人手机号/身份证号所在的姓名栏) 做高斯模糊脱敏
// A4 纸: 从顶边到底边的一竖条, 水平位置在 20%~50% 宽度 (签到人手机号/身份证号所在列) 做高斯模糊脱敏
const { captured, errorMsg, startCamera, flipCamera, takePhoto, retake, confirm } =
useCamera(videoId, { start: 0.2, end: 0.5, radius: 20 })
@@ -273,19 +272,38 @@ function goBack() {
.preview-actions {
display: flex;
flex-direction: row;
justify-content: space-around;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
width: 100%;
padding: 40rpx 60rpx;
padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
}
.preview-btn {
flex: 1;
margin: 0 20rpx;
padding: 24rpx 0;
/* flex item: 在 .preview-actions 里 flex:1 平分宽度 */
flex: 1 1 0%;
min-width: 0;
box-sizing: border-box;
/* flex container: 让内部 <text> 真正居中 */
display: flex;
justify-content: center;
align-items: center;
/* 重置浏览器 / uni-app H5 给 <button> 的默认外观 (边框/appearance 是按钮不对称的常见根因) */
margin: 0 16rpx;
padding: 0;
border: none;
outline: none;
appearance: none;
-webkit-appearance: none;
border-radius: 48rpx;
font-size: 30rpx;
font-weight: bold;
line-height: 1;
min-height: 88rpx;
}
.preview-btn-cancel {
ry-h5/utils/camera.ts
+126 -47
View File
@@ -8,6 +8,25 @@
*/
export type Facing = 'user' | 'environment'
// uni-app H5 runtime (uni-h5.es.js) 看到 <video autoplay> 会抢先调一次 play(),
// 此时 srcObject 还没设,会抛 NotSupportedError 变成 unhandled rejection.
// 模板已不再写 autoplay, 这里再装一个兜底监听, 把漏网的 NotSupportedError /
// AbortError 静默掉, 不污染控制台.
declare global {
interface Window {
__cameraRejectionGuard?: boolean
}
}
if (typeof window !== 'undefined' && !window.__cameraRejectionGuard) {
window.__cameraRejectionGuard = true
window.addEventListener('unhandledrejection', (e) => {
const name = (e?.reason as DOMException)?.name
if (name === 'NotSupportedError' || name === 'AbortError') {
e.preventDefault()
}
})
}
export async function openCamera(video: HTMLVideoElement, facing: Facing): Promise<void> {
if (!navigator.mediaDevices?.getUserMedia) {
throw new Error('当前浏览器不支持摄像头访问,请升级浏览器或使用 Chrome / Safari')
@@ -52,10 +71,56 @@ video.setAttribute('playsinline', 'true')
// iOS 必须: 不静音黑屏 (否则 iOS 拒绝播放)
video.muted = true
// 显式 play(): <video autoplay> 只在元素首次加载时触发一次, 而 srcObject 是
// 异步挂上的, 此时视频还没源, 浏览器不会自动重放 → 黑屏 + 播放按钮.
// 静音 + playsinline 下, 现代浏览器默认放行静音自动播放, 直接 play() 起流.
video.play()
// 源就绪后再 play(): 过早 play() 会因为 video 还没有源抛 NotSupportedError
// ("The element has no supported sources"), 变成未捕获的 Promise 拒绝.
// safePlay 现在做四件事:
// 1. 防御 uni-app H5 包装层让 video.play 返回 undefined 的情况
// 2. 吞掉 NotSupportedError / AbortError (浏览器认为没源时不报)
// 3. readyState < 2 时按 readyState 升级主动重试, 不再只等 loadedmetadata
// 4. 其他错误 warn 后不再重试 (避免噪音)
const safePlay = () => {
// 防御: uni-app H5 包装层可能让 video.play 不存在或返回 undefined
if (typeof video.play !== 'function') {
console.warn('[camera] video.play 不是函数 (可能 uni-app 包装), 跳过')
return
}
let result: unknown
try {
result = video.play()
} catch (e) {
console.warn('[camera] play() 同步抛错:', (e as Error)?.message)
return
}
if (!result || typeof (result as Promise<void>).catch !== 'function') {
// play() 没返回 Promise (uni-app 包装层常见), 无错误可处理, 直接放过
return
}
;(result as Promise<void>).catch((e: DOMException) => {
const name = e?.name
if (name === 'NotSupportedError' || name === 'AbortError') {
// 源还没就绪 (readyState 0/1), 起一个轮询, 数据到位再 play
if (video.readyState < 2) {
console.log('[camera] 源未就绪, readyState=', video.readyState, ', 等待后重试')
const start = Date.now()
const timer = setInterval(() => {
if (video.readyState >= 2) {
clearInterval(timer)
safePlay()
} else if (Date.now() - start > 3000) {
clearInterval(timer)
console.warn('[camera] 等待 readyState>=2 超时, 放弃自动播放')
}
}, 100)
}
} else {
console.warn('[camera] play() 失败:', name, e?.message)
}
})
}
// 赋值 srcObject 立刻主动 play 一次 (不再只等 loadedmetadata, 避免 uni-app
// 包装或某些浏览器不触发该事件时视频永远不播)
safePlay()
const fallbackTimer = setTimeout(() => {
if (video.readyState < 1) {
@@ -67,6 +132,8 @@ const fallbackTimer = setTimeout(() => {
configurable: true,
})
console.log('[camera] defineProperty 后 srcObject isStream:', video.srcObject === stream)
// 强制赋值后再主动试一次 play
safePlay()
} catch (e) {
console.error('[camera] defineProperty 也失败:', e)
}
@@ -75,6 +142,7 @@ const fallbackTimer = setTimeout(() => {
console.warn('[camera] 仍 readyState 0,改用 src=blobURL')
try {
video.src = URL.createObjectURL(stream)
safePlay()
} catch (e) {
console.error('[camera] blobURL 兜底失败:', e)
}
@@ -87,11 +155,19 @@ video.addEventListener(
() => {
clearTimeout(fallbackTimer)
console.log('[camera] loadedmetadata 触发, readyState:', video.readyState, 'isStream:', video.srcObject === stream)
// 数据真正就绪后再补一次 play(), 兜底个别浏览器首次 play() 因无数据被打断
video.play()
// 数据真正就绪后再 play
safePlay()
},
{ once: true }
)
// 兜底: 个别浏览器 loadedmetadata 后 readyState 仍不够, loadeddata 再补一次 play()
video.addEventListener('loadeddata', () => safePlay(), { once: true })
// 若赋值 srcObject 前已就绪 (理论上不会), 立即放
if (video.readyState >= 1) {
safePlay()
}
}
export function stopCamera(video: HTMLVideoElement): void {
@@ -134,30 +210,27 @@ function buildGaussianKernel(radius: number): number[] {
}
/**
* 对 RGBA 数组的竖直条带 [y0, y1) 做可分离高斯模糊, 返回新数组 (不修改原数组).
* 水平卷积范围向外扩 radius, 保证条带边界处垂直卷积有正确的邻域上下文.
* 对 RGBA 数组的竖直条带 [x0, x1) 做可分离高斯模糊, 返回新数组 (不修改原数组).
* 条带贯穿全高 (顶边→底边), 只在水平 [x0, x1) 范围内模糊; 其余区域照抄.
*/
function gaussianBlurBand(
data: Uint8ClampedArray,
width: number,
height: number,
y0: number,
y1: number,
x0: number,
x1: number,
radius: number
): Uint8ClampedArray {
const kernel = buildGaussianKernel(radius)
const r = radius
const kSize = kernel.length
const hy0 = Math.max(0, y0 - r)
const hy1 = Math.min(height, y1 + r)
// 1) 水平卷积: 读 data, 写 h1 (仅 [hy0, hy1) 行, 其余照抄)
// 1) 水平卷积 (沿 x): 读 data, 写 h1 (仅 [x0, x1) 列, 全高, 其余照抄)
const h1 = new Uint8ClampedArray(data)
const row = new Array<number>(width * 4)
for (let y = hy0; y < hy1; y++) {
const base = y * width * 4
for (let x = 0; x < width; x++) {
const col = new Array<number>(height * 4)
for (let x = x0; x < x1; x++) {
for (let y = 0; y < height; y++) {
const base = (y * width + x) * 4
let rr = 0
let gg = 0
let bb = 0
@@ -166,29 +239,34 @@ function gaussianBlurBand(
let sx = x + k - r
if (sx < 0) sx = 0
if (sx >= width) sx = width - 1
const idx = base + sx * 4
const idx = (y * width + sx) * 4
const wt = kernel[k]
rr += data[idx] * wt
gg += data[idx + 1] * wt
bb += data[idx + 2] * wt
aa += data[idx + 3] * wt
}
const o = x * 4
row[o] = rr
row[o + 1] = gg
row[o + 2] = bb
row[o + 3] = aa
const o = y * 4
col[o] = rr
col[o + 1] = gg
col[o + 2] = bb
col[o + 3] = aa
}
for (let y = 0; y < height; y++) {
const idx = (y * width + x) * 4
const o = y * 4
h1[idx] = col[o]
h1[idx + 1] = col[o + 1]
h1[idx + 2] = col[o + 2]
h1[idx + 3] = col[o + 3]
}
for (let i = 0; i < width * 4; i++) h1[base + i] = row[i]
}
// 2) 垂直卷积: 读 h1, 写 h2 (仅 [y0, y1) 行, 其余照抄 h1)
// 2) 垂直卷积 (沿 y): 读 h1, 写 h2 (仅 [x0, x1) 列, 全高, 其余照抄 h1)
const h2 = new Uint8ClampedArray(h1)
const band = y1 - y0
const col = new Array<number>(band * 4)
for (let x = 0; x < width; x++) {
for (let yy = 0; yy < band; yy++) {
const y = y0 + yy
const col2 = new Array<number>(height * 4)
for (let x = x0; x < x1; x++) {
for (let y = 0; y < height; y++) {
let rr = 0
let gg = 0
let bb = 0
@@ -204,19 +282,19 @@ function gaussianBlurBand(
bb += h1[idx + 2] * wt
aa += h1[idx + 3] * wt
}
const o = yy * 4
col[o] = rr
col[o + 1] = gg
col[o + 2] = bb
col[o + 3] = aa
const o = y * 4
col2[o] = rr
col2[o + 1] = gg
col2[o + 2] = bb
col2[o + 3] = aa
}
for (let yy = 0; yy < band; yy++) {
const idx = ((y0 + yy) * width + x) * 4
const o = yy * 4
h2[idx] = col[o]
h2[idx + 1] = col[o + 1]
h2[idx + 2] = col[o + 2]
h2[idx + 3] = col[o + 3]
for (let y = 0; y < height; y++) {
const idx = (y * width + x) * 4
const o = y * 4
h2[idx] = col2[o]
h2[idx + 1] = col2[o + 1]
h2[idx + 2] = col2[o + 2]
h2[idx + 3] = col2[o + 3]
}
}
@@ -225,6 +303,7 @@ function gaussianBlurBand(
/**
* 截图并同时生成两张图: 清晰版 + 竖直条带 [start, end] 高斯模糊版 (签到表脱敏用).
* start/end 是「宽度」比例 (从左到右), 条带贯穿全高 (顶边→底边).
* 同一帧出两张, 避免两次截图不一致.
*/
export function captureFrameWithBlur(
@@ -246,12 +325,12 @@ export function captureFrameWithBlur(
ctx.drawImage(video, 0, 0, w, h)
const sharp = canvas.toDataURL('image/jpeg', 0.85)
const y0 = Math.max(0, Math.floor(h * start))
const y1 = Math.min(h, Math.floor(h * end))
const x0 = Math.max(0, Math.floor(w * start))
const x1 = Math.min(w, Math.floor(w * end))
let blurred = sharp
if (y1 - y0 > 1) {
if (x1 - x0 > 1) {
const imgData = ctx.getImageData(0, 0, w, h)
const dst = gaussianBlurBand(imgData.data, w, h, y0, y1, radius)
const dst = gaussianBlurBand(imgData.data, w, h, x0, x1, radius)
imgData.data.set(dst)
ctx.putImageData(imgData, 0, 0)
blurred = canvas.toDataURL('image/jpeg', 0.85)