修改巡检图片视频内容

src/utils/common.js

@@ -283,4 +283,121 @@ export const compressImageUni = (file) => {
             console.log('压缩失败:', error);
         }
     })
+}
+
+
+// H5 获取视频第一帧
+const getFirstFrameInH5 = (videoPath) => {
+    return new Promise((resolve, reject) => {
+        const video = document.createElement('video')
+        video.src = videoPath
+        video.crossOrigin = 'anonymous'
+        
+        video.addEventListener('loadeddata', () => {
+            video.currentTime = 0.1
+        })
+        
+        video.addEventListener('seeked', () => {
+            const canvas = document.createElement('canvas')
+            const ctx = canvas.getContext('2d')
+            canvas.width = video.videoWidth
+            canvas.height = video.videoHeight
+            ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
+            
+            const dataUrl = canvas.toDataURL('image/jpeg', 0.8)
+            resolve(dataUrl)
+        })
+        video.addEventListener('error', reject)
+    })
+}
+
+// App平台获取第一帧（Android/iOS）
+const getFirstFrameInApp = (videoPath) => {
+    return new Promise((resolve, reject) => {
+        // 方法1：使用原生VideoPlayer（推荐）
+        // #ifdef APP-PLUS
+        try {
+            const videoPlayer = plus.video.createVideoPlayer('firstFramePlayer', {
+                src: videoPath,
+                autoplay: false,
+                controls: false,
+                showLoading: false,
+                showProgress: false
+            })
+            
+            // 监听视频准备完成
+            videoPlayer.addEventListener('loadeddata', () => {
+                // 截图
+                videoPlayer.snapshot({
+                    format: 'jpg',
+                    quality: 80
+                }, (res) => {
+                    // res.target 是图片临时路径
+                    console.log('截图成功:', res)
+                    resolve(res.target)
+                    
+                    // 销毁播放器
+                    videoPlayer.close()
+                }, (error) => {
+                    console.error('截图失败:', error)
+                    reject(error)
+                    videoPlayer.close()
+                })
+            }, false)
+            
+            videoPlayer.addEventListener('error', (error) => {
+                console.error('视频加载失败:', error)
+                reject(error)
+                videoPlayer.close()
+            })
+            
+        } catch (error) {
+            console.error('创建VideoPlayer失败:', error)
+            
+            // 方法2：备用方案，使用HTML5 video（如果原生方法失败）
+            // showAppVideo.value = true
+            // showAppCanvas.value = true
+            
+            // // 等待DOM更新后获取元素
+            // setTimeout(() => {
+            //     const video = document.getElementById('appVideo')
+            //     const canvas = document.getElementById('appCanvas')
+            //     const ctx = canvas.getContext('2d')
+                
+            //     video.onloadedmetadata = () => {
+            //         canvas.width = video.videoWidth
+            //         canvas.height = video.videoHeight
+                    
+            //         video.onseeked = () => {
+            //             ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
+            //             const dataUrl = canvas.toDataURL('image/jpeg', 0.8)
+                        
+            //             // 清理
+            //             showAppVideo.value = false
+            //             showAppCanvas.value = false
+                        
+            //             resolve(dataUrl)
+            //         }
+            //         video.currentTime = 0.1
+            //     }
+            //     video.onerror = reject
+            // }, 100)
+        }
+        // #endif
+    })
+}
+
+// 获取视频第一帧（跨平台处理）
+export const getVideoFirstFrame = (videoPath) => {
+    return new Promise((resolve, reject) => {
+        // #ifdef H5
+        // H5平台使用canvas
+        getFirstFrameInH5(videoPath).then(resolve).catch(reject)
+        // #endif
+        
+        // #ifdef APP-PLUS
+        // App平台使用plus.video
+        getFirstFrameInApp(videoPath).then(resolve).catch(reject)
+        // #endif
+    })
 }