求助HTML5搭配Node.js/Python/JS实现移动端网页视频采集上传云服务

1. 前端H5/JavaScript实现 #

核心依赖HTML5原生Media Capture、File API，无需额外引入重型框架即可适配绝大多数移动端浏览器：

• 基础采集组件直接用带属性的file输入框即可，原生支持唤起摄像头拍摄而非选择本地文件，开启multiple属性支持单次选择多段视频：

<!-- 直接放在表单内即可 -->
<input type="file" id="videoPicker" accept="video/*" capture="camcorder" multiple>
<div id="uploadProgress"></div>
<button id="submitUpload">提交所有视频</button>

• 核心前端逻辑注意点：
  • 权限触发必须由用户主动点击操作唤起，不可在页面加载后自动触发摄像头权限申请，否则会被iOS Safari、安卓微信内置浏览器等环境拦截
  • 建议添加单段视频时长校验：选中视频后通过URL.createObjectURL生成临时播放地址，读取video.duration属性限制单段不超过3分钟，避免单文件过大上传失败
  • 网络不稳定场景建议用分片上传：将视频按1-5M大小切片，按顺序提交分片，后端收到所有分片后合并，支持断点续传
  • 实时展示上传进度，避免用户误关页面导致上传中断

2. 后端实现（两种可选方案） #

方案1：Node.js + Express #

使用成熟的multer中间件处理文件上传，开发效率高：

const express = require('express');
const multer = require('multer');
const app = express();

// 配置存储规则
const storage = multer.diskStorage({
  destination: (req, file, cb) => cb(null, './uploaded_videos'), // 本地存储路径，也可直接对接云存储SDK
  filename: (req, file, cb) => cb(null, `${Date.now()}_${file.originalname}`)
});
// 限制单文件最大200M，单次最多上传10个视频
const uploadMiddleware = multer({ storage, limits: { fileSize: 200 * 1024 * 1024, files: 10 } });

// 上传接口
app.post('/api/video/upload', uploadMiddleware.array('videos'), (req, res) => {
  // 可在这里将视频路径、上传人信息等存入数据库，方便后续兽医端查询
  res.json({ status: 'success', uploadedFiles: req.files.map(f => f.filename) });
});

app.listen(3000, () => console.log('服务启动在3000端口'));

如果需要支持断点续传，额外接收前端提交的分片序号、文件唯一标识参数，所有分片收齐后合并为完整视频即可。

方案2：Python + FastAPI #

性能更高，异步支持更好，适合后续扩展AI识别等功能：

import time
import os
from fastapi import FastAPI, File, UploadFile
from typing import List

app = FastAPI()
UPLOAD_DIR = "./uploaded_videos"
os.makedirs(UPLOAD_DIR, exist_ok=True)

@app.post("/api/video/upload")
async def upload_videos(videos: List[UploadFile] = File(...)):
    saved_files = []
    for video in videos:
        file_name = f"{int(time.time())}_{video.filename}"
        save_path = os.path.join(UPLOAD_DIR, file_name)
        with open(save_path, "wb") as f:
            f.write(await video.read())
        saved_files.append(file_name)
    # 可在这里写入数据库存储元信息
    return {"status": "success", "uploaded_files": saved_files}

大文件分片上传逻辑和Node.js方案一致，接收分片参数后合并即可。

3. 落地优化建议 #

• 存储层建议直接对接云厂商对象存储服务，无需自行维护存储服务器，可靠性更高，还自带CDN加速方便兽医端快速加载视频
• 前端可引入ffmpeg.wasm做客户端视频压缩，降低分辨率和码率后再上传，减少流量消耗和存储成本
• 前后端都要做文件格式校验，前端限制仅上传视频格式，后端二次校验文件头，避免恶意文件上传
• 可以添加拍摄引导提示，建议用户拍摄时保持画面稳定，优先拍摄伤口位置，方便兽医诊断

内容的提问来源于stack exchange，提问作者ZenYogiBalajo