VideoAgentTrek-ScreenFilter Web应用开发指南基于JavaScript的前后端交互你是不是也遇到过这样的场景手头有一段视频但背景杂乱或者有不想展示的屏幕内容想快速处理一下。自己动手剪辑吧费时费力找专业工具吧又觉得太复杂。现在借助VideoAgentTrek-ScreenFilter这样的AI模型我们可以轻松实现视频屏幕内容的智能过滤。今天我们不聊模型本身有多厉害而是来点更实际的如何亲手搭建一个Web应用让用户通过浏览器就能方便地使用这个强大的视频处理能力。这篇文章就是一份面向前端开发者的实战指南我会带你一步步用JavaScript构建一个完整的前后端交互应用涵盖从视频上传、调用AI接口、展示处理进度到最终结果呈现的全过程。即使你之前没怎么接触过视频处理跟着做下来也能搞定。1. 项目概览与核心思路在开始写代码之前我们先理清这个Web应用要做什么以及大概怎么做。想象一下用户的使用流程打开网页 - 选择或拖入一个视频文件 - 点击“开始处理” - 看着进度条慢慢走 - 处理完成预览或下载结果视频。我们的任务就是把这个流程用代码实现。整个应用的核心是前端浏览器里的JavaScript代码与后端服务提供VideoAgentTrek-ScreenFilter能力的API之间的对话。前端负责收集用户的视频把它“打包”好发送给后端后端调用AI模型进行处理然后把处理结果“回传”给前端。我们这里主要聚焦在前端部分的开发。你需要准备的基础知识很简单会用HTML写个简单的页面结构会用CSS稍微美化一下最重要的是要会用JavaScript特别是ES6的语法处理用户交互和网络请求。如果你用过fetch或者axios库那就更好了。2. 搭建基础前端界面我们先从用户能看到的东西做起创建一个简洁明了的操作界面。创建一个index.html文件构建页面的骨架。这个页面不需要太复杂但几个关键区域要有!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title视频屏幕过滤器/title link relstylesheet hrefstyle.css /head body div classcontainer header h1 VideoAgentTrek-ScreenFilter 在线处理工具/h1 p上传视频自动过滤屏幕内容获得干净画面。/p /header main !-- 文件上传区域 -- section classupload-area iduploadArea h21. 上传视频/h2 div classdrop-zone p将视频文件拖放到此处或/p input typefile idvideoInput acceptvideo/* label forvideoInput classbrowse-btn选择文件/label p classfile-hint支持 MP4, AVI, MOV 等常见格式建议小于500MB。/p /div div classfile-info idfileInfo styledisplay: none; p已选择文件strong idfileName/strong (span idfileSize/span)/p video idvideoPreview controls width100% stylemax-width: 600px; margin-top: 10px;/video /div /section !-- 处理控制与进度区域 -- section classcontrol-area idcontrolArea styledisplay: none; h22. 开始处理/h2 button idprocessBtn classprocess-btn开始过滤屏幕内容/button div classprogress-container idprogressContainer styledisplay: none; p处理中请稍候.../p div classprogress-bar div classprogress-fill idprogressFill/div /div p classprogress-text idprogressText0%/p /div /section !-- 结果展示区域 -- section classresult-area idresultArea styledisplay: none; h23. 处理结果/h2 div classresult-content p处理成功您可以在下方预览或下载结果。/p div classvideo-comparison div h3原视频/h3 video idoriginalVideo controls width100%/video /div div h3处理后视频/h3 video idprocessedVideo controls width100%/video a iddownloadLink classdownload-btn下载结果视频/a /div /div /div /section !-- 错误信息区域 -- div classerror-area iderrorArea styledisplay: none;/div /main /div script srcapp.js/script /body /html再来点简单的样式让界面看起来舒服点。创建style.css文件body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif; line-height: 1.6; color: #333; max-width: 1200px; margin: 0 auto; padding: 20px; background-color: #f8f9fa; } .container { background: white; border-radius: 12px; padding: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } header { text-align: center; margin-bottom: 40px; border-bottom: 1px solid #eee; padding-bottom: 20px; } h1 { color: #2c3e50; } h2 { color: #3498db; border-left: 4px solid #3498db; padding-left: 10px; margin-top: 30px;} .upload-area, .control-area, .result-area { margin-bottom: 40px; padding: 25px; background: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0; } .drop-zone { border: 2px dashed #cbd5e0; border-radius: 8px; padding: 40px 20px; text-align: center; transition: all 0.3s; cursor: pointer; } .drop-zone:hover, .drop-zone.dragover { border-color: #3498db; background-color: #ebf8ff; } #videoInput { display: none; } .browse-btn { display: inline-block; background: #3498db; color: white; padding: 12px 24px; border-radius: 6px; cursor: pointer; font-weight: bold; margin: 10px; transition: background 0.3s; } .browse-btn:hover { background: #2980b9; } .file-hint { color: #718096; font-size: 0.9em; margin-top: 10px;} .file-info { margin-top: 20px; } .process-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 15px 30px; font-size: 1.1em; border-radius: 8px; cursor: pointer; font-weight: bold; transition: transform 0.2s; } .process-btn:hover { transform: translateY(-2px); } .process-btn:disabled { background: #a0aec0; cursor: not-allowed; transform: none; } .progress-container { margin-top: 25px; } .progress-bar { height: 20px; background: #e2e8f0; border-radius: 10px; overflow: hidden; margin: 15px 0; } .progress-fill { height: 100%; background: linear-gradient(90deg, #4fd1c5, #38b2ac); width: 0%; transition: width 0.3s ease; border-radius: 10px; } .progress-text { text-align: center; font-weight: bold; color: #2d3748; } .video-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 20px; } media (max-width: 768px) { .video-comparison { grid-template-columns: 1fr; } } .download-btn { display: inline-block; background: #48bb78; color: white; padding: 12px 24px; border-radius: 6px; text-decoration: none; font-weight: bold; margin-top: 15px; transition: background 0.3s; } .download-btn:hover { background: #38a169; } .error-area { background: #fed7d7; color: #9b2c2c; padding: 15px; border-radius: 8px; border-left: 4px solid #f56565; margin-top: 20px; }界面有了但它现在还不会动。接下来我们就要用JavaScript给它注入灵魂。3. 实现视频上传与预览功能用户交互的第一步是上传视频。我们需要处理文件选择、拖放并给用户一个预览。创建app.js文件我们从这里开始。首先获取我们将要操作的HTML元素// app.js // 获取DOM元素 const videoInput document.getElementById(videoInput); const uploadArea document.getElementById(uploadArea); const dropZone uploadArea.querySelector(.drop-zone); const fileInfo document.getElementById(fileInfo); const fileName document.getElementById(fileName); const fileSize document.getElementById(fileSize); const videoPreview document.getElementById(videoPreview); const controlArea document.getElementById(controlArea); const processBtn document.getElementById(processBtn); const progressContainer document.getElementById(progressContainer); const progressFill document.getElementById(progressFill); const progressText document.getElementById(progressText); const resultArea document.getElementById(resultArea); const originalVideo document.getElementById(originalVideo); const processedVideo document.getElementById(processedVideo); const downloadLink document.getElementById(downloadLink); const errorArea document.getElementById(errorArea); let selectedFile null; // 存储用户选择的文件然后为文件输入和拖放区域添加事件监听器// 1. 处理点击选择文件 videoInput.addEventListener(change, handleFileSelect); // 2. 处理拖放功能 dropZone.addEventListener(dragover, (e) { e.preventDefault(); dropZone.classList.add(dragover); }); dropZone.addEventListener(dragleave, () { dropZone.classList.remove(dragover); }); dropZone.addEventListener(drop, (e) { e.preventDefault(); dropZone.classList.remove(dragover); if (e.dataTransfer.files.length) { // 将拖放的文件赋值给input并触发change事件 videoInput.files e.dataTransfer.files; handleFileSelect({ target: videoInput }); } }); // 3. 处理文件选择的通用函数 function handleFileSelect(event) { const file event.target.files[0]; if (!file) return; // 简单检查文件类型 if (!file.type.startsWith(video/)) { showError(请选择一个视频文件如MP4、AVI等。); return; } // 检查文件大小例如限制为500MB const maxSize 500 * 1024 * 1024; // 500MB if (file.size maxSize) { showError(文件过大请选择小于500MB的视频文件。); return; } selectedFile file; updateFileInfo(file); showVideoPreview(file); // 显示控制区域 controlArea.style.display block; // 隐藏可能存在的错误信息 hideError(); } function updateFileInfo(file) { fileName.textContent file.name; // 格式化文件大小显示 const sizeInMB (file.size / (1024 * 1024)).toFixed(2); fileSize.textContent ${sizeInMB} MB; fileInfo.style.display block; } function showVideoPreview(file) { const videoURL URL.createObjectURL(file); videoPreview.src videoURL; // 同时为结果区域的原视频设置源 originalVideo.src videoURL; } // 简单的错误显示/隐藏函数 function showError(message) { errorArea.textContent 错误${message}; errorArea.style.display block; } function hideError() { errorArea.style.display none; }现在用户已经可以通过点击或拖放来选择视频文件并且能立即看到预览。下一步就是最核心的部分调用AI接口。4. 调用AI处理接口与进度监控这是整个应用的大脑。我们需要把用户上传的视频文件发送到后端的VideoAgentTrek-ScreenFilter服务并实时获取处理进度。4.1 准备API调用函数我们假设后端提供了一个RESTful API它接收视频文件返回一个任务ID然后我们可以通过这个任务ID轮询处理进度。这里我们用fetchAPI来实现你也可以用axios看个人喜好。首先定义API的端点你需要替换成你实际的后端地址// 配置API端点请根据你的实际后端地址修改 const API_BASE_URL https://your-backend-service.com/api; // 示例地址 const UPLOAD_ENDPOINT ${API_BASE_URL}/video/upload; const TASK_STATUS_ENDPOINT (taskId) ${API_BASE_URL}/task/${taskId}/status; const RESULT_ENDPOINT (taskId) ${API_BASE_URL}/task/${taskId}/result;然后为“开始处理”按钮添加点击事件processBtn.addEventListener(click, startVideoProcessing); async function startVideoProcessing() { if (!selectedFile) { showError(请先选择一个视频文件。); return; } // 禁用按钮防止重复点击 processBtn.disabled true; processBtn.textContent 处理中...; // 显示进度条 progressContainer.style.display block; updateProgress(0, 准备上传...); try { // 步骤1: 上传视频文件获取任务ID const taskId await uploadVideoFile(selectedFile); if (!taskId) { throw new Error(未能获取处理任务ID。); } console.log(任务已创建ID: ${taskId}); // 步骤2: 轮询任务状态直到完成或失败 const resultUrl await pollTaskStatus(taskId); // 步骤3: 获取并展示处理结果 await displayProcessingResult(resultUrl); // 处理完成显示结果区域 resultArea.style.display block; updateProgress(100, 处理完成); // 滚动到结果区域 resultArea.scrollIntoView({ behavior: smooth }); } catch (error) { console.error(处理过程出错:, error); showError(处理失败: ${error.message}); // 重置UI processBtn.disabled false; processBtn.textContent 开始过滤屏幕内容; progressContainer.style.display none; } }4.2 实现文件上传与状态轮询接下来我们实现上面用到的三个关键函数。// 上传视频文件到后端 async function uploadVideoFile(file) { updateProgress(10, 正在上传视频...); const formData new FormData(); formData.append(video, file); // 可以附加一些处理参数例如过滤强度等如果API支持 // formData.append(intensity, medium); try { const response await fetch(UPLOAD_ENDPOINT, { method: POST, body: formData, // 注意使用FormData时不要手动设置Content-Type浏览器会自动设置 }); if (!response.ok) { const errorText await response.text(); throw new Error(上传失败 (${response.status}): ${errorText}); } const data await response.json(); // 假设后端返回 { taskId: xxx, message: success } if (data.taskId) { updateProgress(30, 视频上传成功开始处理...); return data.taskId; } else { throw new Error(服务器响应中未包含任务ID。); } } catch (error) { console.error(上传文件时出错:, error); throw error; // 将错误抛给上层函数处理 } } // 轮询任务状态 async function pollTaskStatus(taskId) { let attempts 0; const maxAttempts 300; // 最多轮询300次假设5分钟超时每次间隔1秒 const pollInterval 1000; // 1秒轮询一次 return new Promise((resolve, reject) { const poll async () { attempts; if (attempts maxAttempts) { reject(new Error(处理超时请稍后重试。)); return; } try { const response await fetch(TASK_STATUS_ENDPOINT(taskId)); if (!response.ok) { throw new Error(状态查询失败: ${response.status}); } const statusData await response.json(); // 假设后端返回 { status: processing|completed|failed, progress: 50, message: ..., resultUrl: ... } console.log(轮询 ${attempts}:, statusData); switch (statusData.status) { case processing: // 更新进度条假设progress是0-100的整数 const progress Math.min(30 (statusData.progress || 0) * 0.6, 95); // 从30%到95% updateProgress(progress, statusData.message || AI模型正在处理视频...); // 继续轮询 setTimeout(poll, pollInterval); break; case completed: updateProgress(100, 视频处理完成); if (statusData.resultUrl) { resolve(statusData.resultUrl); // 返回结果视频的URL } else { reject(new Error(任务完成但未返回结果URL。)); } break; case failed: reject(new Error(处理失败: ${statusData.message || 未知错误})); break; default: console.warn(未知状态:, statusData.status); setTimeout(poll, pollInterval); } } catch (error) { console.error(轮询状态时出错:, error); // 网络错误等可以重试几次这里简单处理为失败 if (attempts 10) { // 连续10次失败则判定为错误 reject(new Error(无法获取处理状态请检查网络。)); } else { setTimeout(poll, pollInterval * 2); // 失败后延长间隔 } } }; poll(); // 开始轮询 }); } // 更新进度条显示 function updateProgress(percent, message) { progressFill.style.width ${percent}%; progressText.textContent ${Math.round(percent)}% - ${message}; }4.3 展示处理结果当轮询到任务完成时我们需要获取处理后的视频并展示给用户。// 获取并展示处理结果 async function displayProcessingResult(resultUrl) { updateProgress(98, 正在加载处理后的视频...); try { // 假设resultUrl是处理后视频的直接下载链接或可播放的URL // 如果是文件下载链接可能需要后端设置CORS或通过代理 processedVideo.src resultUrl; downloadLink.href resultUrl; downloadLink.download processed_${selectedFile.name}; // 设置下载文件名 // 等待视频元数据加载完成确保可以播放 await new Promise((resolve, reject) { processedVideo.onloadeddata resolve; processedVideo.onerror () reject(new Error(加载结果视频失败。)); // 设置一个超时 setTimeout(() reject(new Error(加载视频超时。)), 30000); }); updateProgress(100, 视频加载完毕); // 重置按钮状态 processBtn.disabled false; processBtn.textContent 开始过滤屏幕内容; console.log(结果视频加载成功。); } catch (error) { console.error(展示结果时出错:, error); throw error; } }到这里核心的交互逻辑就完成了。用户点击按钮后视频被上传我们启动一个轮询机制不断询问后端“处理好了没”并在前端用进度条给用户反馈。处理完成后结果视频会显示在页面上供预览和下载。5. 错误处理与用户体验优化一个健壮的应用离不开良好的错误处理和用户体验细节。我们已经有了基础的错误显示函数现在来完善它并添加一些优化。5.1 增强错误处理// 增强的错误处理函数 function showError(message, isFatal false) { errorArea.innerHTML strong⚠️ 遇到问题/strong ${message} ${isFatal ? : brsmall您可以尝试重新选择文件或刷新页面。/small} ; errorArea.style.display block; // 如果是致命错误禁用处理按钮 if (isFatal) { processBtn.disabled true; } // 自动滚动到错误信息区域 errorArea.scrollIntoView({ behavior: smooth, block: nearest }); } // 在全局捕获未处理的Promise错误可选用于调试 window.addEventListener(unhandledrejection, function(event) { console.error(未处理的Promise错误:, event.reason); showError(发生意外错误: ${event.reason.message || event.reason}, false); });5.2 添加用户取消操作长时间处理时用户可能想取消。我们可以添加一个取消按钮动态替换开始按钮// 在startVideoProcessing函数开头添加 let abortController null; // 用于取消fetch请求 async function startVideoProcessing() { if (!selectedFile) { showError(请先选择一个视频文件。); return; } // 创建AbortController用于取消请求 abortController new AbortController(); const cancelBtnHtml button idcancelBtn classprocess-btn stylebackground: #f56565;取消处理/button; processBtn.outerHTML cancelBtnHtml; const cancelBtn document.getElementById(cancelBtn); cancelBtn.addEventListener(click, cancelProcessing); // ... 其余原有代码 ... // 在所有fetch请求中传入signal // 例如修改uploadVideoFile中的fetch调用 // const response await fetch(UPLOAD_ENDPOINT, { // method: POST, // body: formData, // signal: abortController.signal // 添加这一行 // }); } function cancelProcessing() { if (abortController) { abortController.abort(); console.log(用户取消了处理。); showError(处理已被取消。, false); // 重置UI到初始状态 resetProcessingUI(); } } function resetProcessingUI() { const btnHtml button idprocessBtn classprocess-btn开始过滤屏幕内容/button; document.querySelector(.control-area button).outerHTML btnHtml; // 重新绑定事件 document.getElementById(processBtn).addEventListener(click, startVideoProcessing); progressContainer.style.display none; updateProgress(0, ); abortController null; }5.3 添加加载状态与反馈在视频预览和结果加载时可以添加加载指示器提升体验。!-- 在HTML的预览和结果video标签内添加加载提示 -- div classfile-info idfileInfo styledisplay: none; !-- ... 原有代码 ... -- div classvideo-wrapper video idvideoPreview controls width100% stylemax-width: 600px; margin-top: 10px;/video div classloading-overlay idpreviewLoading styledisplay: none;加载预览中.../div /div /div !-- 在CSS中添加样式 -- .video-wrapper { position: relative; } .loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; }// 在showVideoPreview函数中控制加载提示 function showVideoPreview(file) { const loadingEl document.getElementById(previewLoading); loadingEl.style.display flex; const videoURL URL.createObjectURL(file); videoPreview.src videoURL; originalVideo.src videoURL; videoPreview.onloadeddata () { loadingEl.style.display none; }; videoPreview.onerror () { loadingEl.style.display none; showError(无法加载视频预览文件可能已损坏。); }; }6. 总结与后续优化建议走完这一趟一个具备完整交互流程的VideoAgentTrek-ScreenFilter Web应用前端就搭建起来了。从用户拖入视频到看着进度条走动最后拿到处理好的结果整个过程是连贯且可感知的。我们用了最基础的fetchAPI来处理网络请求用轮询来跟踪后端任务状态这些都是构建此类异步交互应用的典型模式。实际开发中你可能会遇到更多细节问题。比如如果视频文件很大直接上传可能会超时或失败这时候就需要实现分片上传。思路是把文件切成小块一块一块地上传后端再拼接起来。这能提升大文件上传的成功率和用户体验。再比如进度条的真实性如果后端不返回精确的进度前端也可以根据上传、处理等不同阶段来模拟一个平滑的进度总比干等着好。另一个可以优化的点是错误恢复。网络不稳定时上传或轮询可能会中断。我们可以设计重试机制比如上传失败后自动重试几次或者记录任务ID即使页面刷新了用户回来还能继续查看那个任务的状态。最后别忘了安全性和用户体验。确保与后端API的通信是安全的使用HTTPS对用户上传的文件做严格的类型和大小校验防止恶意文件。界面上的每一个按钮状态、每一次提示都关乎用户是否愿意继续使用你的产品。希望这份指南能帮你快速上手。前端与AI服务交互的门槛正在变低关键在于想清楚用户需要什么然后用代码把它流畅地实现出来。剩下的就是不断打磨细节了。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
VideoAgentTrek-ScreenFilter Web应用开发指南：基于JavaScript的前后端交互
VideoAgentTrek-ScreenFilter Web应用开发指南基于JavaScript的前后端交互你是不是也遇到过这样的场景手头有一段视频但背景杂乱或者有不想展示的屏幕内容想快速处理一下。自己动手剪辑吧费时费力找专业工具吧又觉得太复杂。现在借助VideoAgentTrek-ScreenFilter这样的AI模型我们可以轻松实现视频屏幕内容的智能过滤。今天我们不聊模型本身有多厉害而是来点更实际的如何亲手搭建一个Web应用让用户通过浏览器就能方便地使用这个强大的视频处理能力。这篇文章就是一份面向前端开发者的实战指南我会带你一步步用JavaScript构建一个完整的前后端交互应用涵盖从视频上传、调用AI接口、展示处理进度到最终结果呈现的全过程。即使你之前没怎么接触过视频处理跟着做下来也能搞定。1. 项目概览与核心思路在开始写代码之前我们先理清这个Web应用要做什么以及大概怎么做。想象一下用户的使用流程打开网页 - 选择或拖入一个视频文件 - 点击“开始处理” - 看着进度条慢慢走 - 处理完成预览或下载结果视频。我们的任务就是把这个流程用代码实现。整个应用的核心是前端浏览器里的JavaScript代码与后端服务提供VideoAgentTrek-ScreenFilter能力的API之间的对话。前端负责收集用户的视频把它“打包”好发送给后端后端调用AI模型进行处理然后把处理结果“回传”给前端。我们这里主要聚焦在前端部分的开发。你需要准备的基础知识很简单会用HTML写个简单的页面结构会用CSS稍微美化一下最重要的是要会用JavaScript特别是ES6的语法处理用户交互和网络请求。如果你用过fetch或者axios库那就更好了。2. 搭建基础前端界面我们先从用户能看到的东西做起创建一个简洁明了的操作界面。创建一个index.html文件构建页面的骨架。这个页面不需要太复杂但几个关键区域要有!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title视频屏幕过滤器/title link relstylesheet hrefstyle.css /head body div classcontainer header h1 VideoAgentTrek-ScreenFilter 在线处理工具/h1 p上传视频自动过滤屏幕内容获得干净画面。/p /header main !-- 文件上传区域 -- section classupload-area iduploadArea h21. 上传视频/h2 div classdrop-zone p将视频文件拖放到此处或/p input typefile idvideoInput acceptvideo/* label forvideoInput classbrowse-btn选择文件/label p classfile-hint支持 MP4, AVI, MOV 等常见格式建议小于500MB。/p /div div classfile-info idfileInfo styledisplay: none; p已选择文件strong idfileName/strong (span idfileSize/span)/p video idvideoPreview controls width100% stylemax-width: 600px; margin-top: 10px;/video /div /section !-- 处理控制与进度区域 -- section classcontrol-area idcontrolArea styledisplay: none; h22. 开始处理/h2 button idprocessBtn classprocess-btn开始过滤屏幕内容/button div classprogress-container idprogressContainer styledisplay: none; p处理中请稍候.../p div classprogress-bar div classprogress-fill idprogressFill/div /div p classprogress-text idprogressText0%/p /div /section !-- 结果展示区域 -- section classresult-area idresultArea styledisplay: none; h23. 处理结果/h2 div classresult-content p处理成功您可以在下方预览或下载结果。/p div classvideo-comparison div h3原视频/h3 video idoriginalVideo controls width100%/video /div div h3处理后视频/h3 video idprocessedVideo controls width100%/video a iddownloadLink classdownload-btn下载结果视频/a /div /div /div /section !-- 错误信息区域 -- div classerror-area iderrorArea styledisplay: none;/div /main /div script srcapp.js/script /body /html再来点简单的样式让界面看起来舒服点。创建style.css文件body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif; line-height: 1.6; color: #333; max-width: 1200px; margin: 0 auto; padding: 20px; background-color: #f8f9fa; } .container { background: white; border-radius: 12px; padding: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } header { text-align: center; margin-bottom: 40px; border-bottom: 1px solid #eee; padding-bottom: 20px; } h1 { color: #2c3e50; } h2 { color: #3498db; border-left: 4px solid #3498db; padding-left: 10px; margin-top: 30px;} .upload-area, .control-area, .result-area { margin-bottom: 40px; padding: 25px; background: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0; } .drop-zone { border: 2px dashed #cbd5e0; border-radius: 8px; padding: 40px 20px; text-align: center; transition: all 0.3s; cursor: pointer; } .drop-zone:hover, .drop-zone.dragover { border-color: #3498db; background-color: #ebf8ff; } #videoInput { display: none; } .browse-btn { display: inline-block; background: #3498db; color: white; padding: 12px 24px; border-radius: 6px; cursor: pointer; font-weight: bold; margin: 10px; transition: background 0.3s; } .browse-btn:hover { background: #2980b9; } .file-hint { color: #718096; font-size: 0.9em; margin-top: 10px;} .file-info { margin-top: 20px; } .process-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 15px 30px; font-size: 1.1em; border-radius: 8px; cursor: pointer; font-weight: bold; transition: transform 0.2s; } .process-btn:hover { transform: translateY(-2px); } .process-btn:disabled { background: #a0aec0; cursor: not-allowed; transform: none; } .progress-container { margin-top: 25px; } .progress-bar { height: 20px; background: #e2e8f0; border-radius: 10px; overflow: hidden; margin: 15px 0; } .progress-fill { height: 100%; background: linear-gradient(90deg, #4fd1c5, #38b2ac); width: 0%; transition: width 0.3s ease; border-radius: 10px; } .progress-text { text-align: center; font-weight: bold; color: #2d3748; } .video-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 20px; } media (max-width: 768px) { .video-comparison { grid-template-columns: 1fr; } } .download-btn { display: inline-block; background: #48bb78; color: white; padding: 12px 24px; border-radius: 6px; text-decoration: none; font-weight: bold; margin-top: 15px; transition: background 0.3s; } .download-btn:hover { background: #38a169; } .error-area { background: #fed7d7; color: #9b2c2c; padding: 15px; border-radius: 8px; border-left: 4px solid #f56565; margin-top: 20px; }界面有了但它现在还不会动。接下来我们就要用JavaScript给它注入灵魂。3. 实现视频上传与预览功能用户交互的第一步是上传视频。我们需要处理文件选择、拖放并给用户一个预览。创建app.js文件我们从这里开始。首先获取我们将要操作的HTML元素// app.js // 获取DOM元素 const videoInput document.getElementById(videoInput); const uploadArea document.getElementById(uploadArea); const dropZone uploadArea.querySelector(.drop-zone); const fileInfo document.getElementById(fileInfo); const fileName document.getElementById(fileName); const fileSize document.getElementById(fileSize); const videoPreview document.getElementById(videoPreview); const controlArea document.getElementById(controlArea); const processBtn document.getElementById(processBtn); const progressContainer document.getElementById(progressContainer); const progressFill document.getElementById(progressFill); const progressText document.getElementById(progressText); const resultArea document.getElementById(resultArea); const originalVideo document.getElementById(originalVideo); const processedVideo document.getElementById(processedVideo); const downloadLink document.getElementById(downloadLink); const errorArea document.getElementById(errorArea); let selectedFile null; // 存储用户选择的文件然后为文件输入和拖放区域添加事件监听器// 1. 处理点击选择文件 videoInput.addEventListener(change, handleFileSelect); // 2. 处理拖放功能 dropZone.addEventListener(dragover, (e) { e.preventDefault(); dropZone.classList.add(dragover); }); dropZone.addEventListener(dragleave, () { dropZone.classList.remove(dragover); }); dropZone.addEventListener(drop, (e) { e.preventDefault(); dropZone.classList.remove(dragover); if (e.dataTransfer.files.length) { // 将拖放的文件赋值给input并触发change事件 videoInput.files e.dataTransfer.files; handleFileSelect({ target: videoInput }); } }); // 3. 处理文件选择的通用函数 function handleFileSelect(event) { const file event.target.files[0]; if (!file) return; // 简单检查文件类型 if (!file.type.startsWith(video/)) { showError(请选择一个视频文件如MP4、AVI等。); return; } // 检查文件大小例如限制为500MB const maxSize 500 * 1024 * 1024; // 500MB if (file.size maxSize) { showError(文件过大请选择小于500MB的视频文件。); return; } selectedFile file; updateFileInfo(file); showVideoPreview(file); // 显示控制区域 controlArea.style.display block; // 隐藏可能存在的错误信息 hideError(); } function updateFileInfo(file) { fileName.textContent file.name; // 格式化文件大小显示 const sizeInMB (file.size / (1024 * 1024)).toFixed(2); fileSize.textContent ${sizeInMB} MB; fileInfo.style.display block; } function showVideoPreview(file) { const videoURL URL.createObjectURL(file); videoPreview.src videoURL; // 同时为结果区域的原视频设置源 originalVideo.src videoURL; } // 简单的错误显示/隐藏函数 function showError(message) { errorArea.textContent 错误${message}; errorArea.style.display block; } function hideError() { errorArea.style.display none; }现在用户已经可以通过点击或拖放来选择视频文件并且能立即看到预览。下一步就是最核心的部分调用AI接口。4. 调用AI处理接口与进度监控这是整个应用的大脑。我们需要把用户上传的视频文件发送到后端的VideoAgentTrek-ScreenFilter服务并实时获取处理进度。4.1 准备API调用函数我们假设后端提供了一个RESTful API它接收视频文件返回一个任务ID然后我们可以通过这个任务ID轮询处理进度。这里我们用fetchAPI来实现你也可以用axios看个人喜好。首先定义API的端点你需要替换成你实际的后端地址// 配置API端点请根据你的实际后端地址修改 const API_BASE_URL https://your-backend-service.com/api; // 示例地址 const UPLOAD_ENDPOINT ${API_BASE_URL}/video/upload; const TASK_STATUS_ENDPOINT (taskId) ${API_BASE_URL}/task/${taskId}/status; const RESULT_ENDPOINT (taskId) ${API_BASE_URL}/task/${taskId}/result;然后为“开始处理”按钮添加点击事件processBtn.addEventListener(click, startVideoProcessing); async function startVideoProcessing() { if (!selectedFile) { showError(请先选择一个视频文件。); return; } // 禁用按钮防止重复点击 processBtn.disabled true; processBtn.textContent 处理中...; // 显示进度条 progressContainer.style.display block; updateProgress(0, 准备上传...); try { // 步骤1: 上传视频文件获取任务ID const taskId await uploadVideoFile(selectedFile); if (!taskId) { throw new Error(未能获取处理任务ID。); } console.log(任务已创建ID: ${taskId}); // 步骤2: 轮询任务状态直到完成或失败 const resultUrl await pollTaskStatus(taskId); // 步骤3: 获取并展示处理结果 await displayProcessingResult(resultUrl); // 处理完成显示结果区域 resultArea.style.display block; updateProgress(100, 处理完成); // 滚动到结果区域 resultArea.scrollIntoView({ behavior: smooth }); } catch (error) { console.error(处理过程出错:, error); showError(处理失败: ${error.message}); // 重置UI processBtn.disabled false; processBtn.textContent 开始过滤屏幕内容; progressContainer.style.display none; } }4.2 实现文件上传与状态轮询接下来我们实现上面用到的三个关键函数。// 上传视频文件到后端 async function uploadVideoFile(file) { updateProgress(10, 正在上传视频...); const formData new FormData(); formData.append(video, file); // 可以附加一些处理参数例如过滤强度等如果API支持 // formData.append(intensity, medium); try { const response await fetch(UPLOAD_ENDPOINT, { method: POST, body: formData, // 注意使用FormData时不要手动设置Content-Type浏览器会自动设置 }); if (!response.ok) { const errorText await response.text(); throw new Error(上传失败 (${response.status}): ${errorText}); } const data await response.json(); // 假设后端返回 { taskId: xxx, message: success } if (data.taskId) { updateProgress(30, 视频上传成功开始处理...); return data.taskId; } else { throw new Error(服务器响应中未包含任务ID。); } } catch (error) { console.error(上传文件时出错:, error); throw error; // 将错误抛给上层函数处理 } } // 轮询任务状态 async function pollTaskStatus(taskId) { let attempts 0; const maxAttempts 300; // 最多轮询300次假设5分钟超时每次间隔1秒 const pollInterval 1000; // 1秒轮询一次 return new Promise((resolve, reject) { const poll async () { attempts; if (attempts maxAttempts) { reject(new Error(处理超时请稍后重试。)); return; } try { const response await fetch(TASK_STATUS_ENDPOINT(taskId)); if (!response.ok) { throw new Error(状态查询失败: ${response.status}); } const statusData await response.json(); // 假设后端返回 { status: processing|completed|failed, progress: 50, message: ..., resultUrl: ... } console.log(轮询 ${attempts}:, statusData); switch (statusData.status) { case processing: // 更新进度条假设progress是0-100的整数 const progress Math.min(30 (statusData.progress || 0) * 0.6, 95); // 从30%到95% updateProgress(progress, statusData.message || AI模型正在处理视频...); // 继续轮询 setTimeout(poll, pollInterval); break; case completed: updateProgress(100, 视频处理完成); if (statusData.resultUrl) { resolve(statusData.resultUrl); // 返回结果视频的URL } else { reject(new Error(任务完成但未返回结果URL。)); } break; case failed: reject(new Error(处理失败: ${statusData.message || 未知错误})); break; default: console.warn(未知状态:, statusData.status); setTimeout(poll, pollInterval); } } catch (error) { console.error(轮询状态时出错:, error); // 网络错误等可以重试几次这里简单处理为失败 if (attempts 10) { // 连续10次失败则判定为错误 reject(new Error(无法获取处理状态请检查网络。)); } else { setTimeout(poll, pollInterval * 2); // 失败后延长间隔 } } }; poll(); // 开始轮询 }); } // 更新进度条显示 function updateProgress(percent, message) { progressFill.style.width ${percent}%; progressText.textContent ${Math.round(percent)}% - ${message}; }4.3 展示处理结果当轮询到任务完成时我们需要获取处理后的视频并展示给用户。// 获取并展示处理结果 async function displayProcessingResult(resultUrl) { updateProgress(98, 正在加载处理后的视频...); try { // 假设resultUrl是处理后视频的直接下载链接或可播放的URL // 如果是文件下载链接可能需要后端设置CORS或通过代理 processedVideo.src resultUrl; downloadLink.href resultUrl; downloadLink.download processed_${selectedFile.name}; // 设置下载文件名 // 等待视频元数据加载完成确保可以播放 await new Promise((resolve, reject) { processedVideo.onloadeddata resolve; processedVideo.onerror () reject(new Error(加载结果视频失败。)); // 设置一个超时 setTimeout(() reject(new Error(加载视频超时。)), 30000); }); updateProgress(100, 视频加载完毕); // 重置按钮状态 processBtn.disabled false; processBtn.textContent 开始过滤屏幕内容; console.log(结果视频加载成功。); } catch (error) { console.error(展示结果时出错:, error); throw error; } }到这里核心的交互逻辑就完成了。用户点击按钮后视频被上传我们启动一个轮询机制不断询问后端“处理好了没”并在前端用进度条给用户反馈。处理完成后结果视频会显示在页面上供预览和下载。5. 错误处理与用户体验优化一个健壮的应用离不开良好的错误处理和用户体验细节。我们已经有了基础的错误显示函数现在来完善它并添加一些优化。5.1 增强错误处理// 增强的错误处理函数 function showError(message, isFatal false) { errorArea.innerHTML strong⚠️ 遇到问题/strong ${message} ${isFatal ? : brsmall您可以尝试重新选择文件或刷新页面。/small} ; errorArea.style.display block; // 如果是致命错误禁用处理按钮 if (isFatal) { processBtn.disabled true; } // 自动滚动到错误信息区域 errorArea.scrollIntoView({ behavior: smooth, block: nearest }); } // 在全局捕获未处理的Promise错误可选用于调试 window.addEventListener(unhandledrejection, function(event) { console.error(未处理的Promise错误:, event.reason); showError(发生意外错误: ${event.reason.message || event.reason}, false); });5.2 添加用户取消操作长时间处理时用户可能想取消。我们可以添加一个取消按钮动态替换开始按钮// 在startVideoProcessing函数开头添加 let abortController null; // 用于取消fetch请求 async function startVideoProcessing() { if (!selectedFile) { showError(请先选择一个视频文件。); return; } // 创建AbortController用于取消请求 abortController new AbortController(); const cancelBtnHtml button idcancelBtn classprocess-btn stylebackground: #f56565;取消处理/button; processBtn.outerHTML cancelBtnHtml; const cancelBtn document.getElementById(cancelBtn); cancelBtn.addEventListener(click, cancelProcessing); // ... 其余原有代码 ... // 在所有fetch请求中传入signal // 例如修改uploadVideoFile中的fetch调用 // const response await fetch(UPLOAD_ENDPOINT, { // method: POST, // body: formData, // signal: abortController.signal // 添加这一行 // }); } function cancelProcessing() { if (abortController) { abortController.abort(); console.log(用户取消了处理。); showError(处理已被取消。, false); // 重置UI到初始状态 resetProcessingUI(); } } function resetProcessingUI() { const btnHtml button idprocessBtn classprocess-btn开始过滤屏幕内容/button; document.querySelector(.control-area button).outerHTML btnHtml; // 重新绑定事件 document.getElementById(processBtn).addEventListener(click, startVideoProcessing); progressContainer.style.display none; updateProgress(0, ); abortController null; }5.3 添加加载状态与反馈在视频预览和结果加载时可以添加加载指示器提升体验。!-- 在HTML的预览和结果video标签内添加加载提示 -- div classfile-info idfileInfo styledisplay: none; !-- ... 原有代码 ... -- div classvideo-wrapper video idvideoPreview controls width100% stylemax-width: 600px; margin-top: 10px;/video div classloading-overlay idpreviewLoading styledisplay: none;加载预览中.../div /div /div !-- 在CSS中添加样式 -- .video-wrapper { position: relative; } .loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; }// 在showVideoPreview函数中控制加载提示 function showVideoPreview(file) { const loadingEl document.getElementById(previewLoading); loadingEl.style.display flex; const videoURL URL.createObjectURL(file); videoPreview.src videoURL; originalVideo.src videoURL; videoPreview.onloadeddata () { loadingEl.style.display none; }; videoPreview.onerror () { loadingEl.style.display none; showError(无法加载视频预览文件可能已损坏。); }; }6. 总结与后续优化建议走完这一趟一个具备完整交互流程的VideoAgentTrek-ScreenFilter Web应用前端就搭建起来了。从用户拖入视频到看着进度条走动最后拿到处理好的结果整个过程是连贯且可感知的。我们用了最基础的fetchAPI来处理网络请求用轮询来跟踪后端任务状态这些都是构建此类异步交互应用的典型模式。实际开发中你可能会遇到更多细节问题。比如如果视频文件很大直接上传可能会超时或失败这时候就需要实现分片上传。思路是把文件切成小块一块一块地上传后端再拼接起来。这能提升大文件上传的成功率和用户体验。再比如进度条的真实性如果后端不返回精确的进度前端也可以根据上传、处理等不同阶段来模拟一个平滑的进度总比干等着好。另一个可以优化的点是错误恢复。网络不稳定时上传或轮询可能会中断。我们可以设计重试机制比如上传失败后自动重试几次或者记录任务ID即使页面刷新了用户回来还能继续查看那个任务的状态。最后别忘了安全性和用户体验。确保与后端API的通信是安全的使用HTTPS对用户上传的文件做严格的类型和大小校验防止恶意文件。界面上的每一个按钮状态、每一次提示都关乎用户是否愿意继续使用你的产品。希望这份指南能帮你快速上手。前端与AI服务交互的门槛正在变低关键在于想清楚用户需要什么然后用代码把它流畅地实现出来。剩下的就是不断打磨细节了。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
